<template>
	<view class="p30">
		<view style="height: 20rpx"></view>
		<view style="background-color: #ffffff; padding: 20rpx; border-radius: 10rpx; font-size: 30rpx; display: flex">
			<image style="width: 220rpx; height: 220rpx; border-radius: 16rpx" :src="shop.cover" mode="aspectFill"></image>
			<view style="padding: 20rpx">
				<view style="color: #232323">{{ shop.name }}</view>
				<view style="height: 20rpx"></view>
				<view>
					<text>单价：</text>
					<text style="color: crimson">{{ shop.currentPrice }}元</text>
				</view>
				<view style="height: 20rpx"></view>
				<view>
					<text>总价：</text>
					<text style="color: crimson">{{ shop.currentPrice * dataFrom.num }}元</text>
				</view>
			</view>
		</view>
		<view style="height: 20rpx"></view>
		<view style="background-color: #ffffff; padding: 20rpx; border-radius: 10rpx; font-size: 30rpx; display: flex; align-items: center; justify-content: space-between">
			<view class="u-flex">
				<view>购买数量</view>
				<view style="width: 10rpx"></view>
			</view>
			<view><up-number-box v-model="dataFrom.num" inputWidth="100rpx" @change="changenum"></up-number-box></view>
		</view>

		<!-- 		<view
			@click="toAddress"
			v-if="shop.purposeType != 1"
			style="
				background-color: #ffffff;
				padding: 20rpx;
				border-radius: 10rpx;
				font-size: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30rpx;
			"
		>
			<view class="u-flex" v-if="!addData">
				<view>请先选择收货地址</view>
			</view>

			<view class="address-a" v-else @click="toAddress">
				<view class="top">
					<view class="top-a">
						<view>{{ addData.realName }}</view>
						<view>{{ addData.phone }}</view>
					</view>
					<view class="top-b">{{ addData.province }} {{ addData.city }} {{ addData.district }} {{ addData.detail }}</view>
				</view>
			</view>
		</view> -->

		<!-- 		<view
			style="background-color: #ffffff; padding: 20rpx; border-radius: 10rpx; font-size: 30rpx; margin-top: 30rpx"
			v-if="shop.purposeType == 2 || (shop.purposeType == 3 && shop.salePrice == 2980)"
		>
			<view style="font-weight: 700">温馨提示：{{ shop.purposeType == 2 ? `满${shop.itemType == 7 ? '20' : shop.itemType == 20 ? '5' : ''}台包安装` : '' }}</view>
			<view style="height: 20rpx"></view>
			<view>套包安装内容仅限50米，实际电缆小于50米的以实际安装必要长度为准，差值米数不以任何形式赠送或返还;超出50米的，超出部分按100元/米补足超出的费用。</view>
		</view> -->

		<view style="background-color: #ffffff; padding: 20rpx; border-radius: 10rpx; font-size: 30rpx; margin-top: 30rpx">
			<view style="font-weight: 700">购买须知：</view>
			<view style="height: 20rpx"></view>
			<view style="color: #dd6161">付款成功后立即生效，并投入生产安装，不支持退款、退货。</view>
			<view style="height: 20rpx"></view>
			<view style="display: flex; align-items: center; justify-content: space-between">
				<view style="display: flex">
					<view>阅读并同意:</view>
					<navigator url="/pages/protocol/buy?id=14" style="color: dodgerblue" open-type="navigate">
						<text>《充电桩购销合同》</text>
					</navigator>
				</view>
				<view>
					<up-text v-if="policy.is_buy == 1" text="已同意" type="primary"></up-text>
					<up-text v-else text="未同意" type="error"></up-text>
				</view>
			</view>
			<view style="height: 20rpx"></view>
			<view style="display: flex; align-items: center; justify-content: space-between">
				<view style="display: flex">
					<view>阅读并同意:</view>
					<navigator url="/pages/protocol/trusteeship?id=13" style="color: dodgerblue" open-type="navigate">
						<text>《充电桩托管协议》</text>
					</navigator>
				</view>
				<view>
					<up-text v-if="policy.is_trusteeship == 1" text="已同意" type="primary"></up-text>
					<up-text v-else text="未同意" type="error"></up-text>
				</view>
			</view>
		</view>

		<view style="display: flex; justify-content: center; margin-top: 80rpx">
			<view class="affirm_btn" @click="add">确认订单</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { addGoodsOrders } from '@/api/api.js';
import { shopInfo } from '@/api/api.js';
import { onLoad } from '@dcloudio/uni-app';
let dataFrom = ref({
	num: 1
});
let shop = ref({});
let policy = ref({
	is_trusteeship: 0,
	is_buy: 0
});

let address = ref({});
let addData = ref(null);

let typeTrue = computed(() => {
	var a = false;
	if (
		(shop.value.purposeType == 2 && dataFrom.value.num == 20 && shop.value.itemType == 7) ||
		(shop.value.purposeType == 2 && dataFrom.value.num == 5 && shop.value.itemType == 20)
	) {
		a = true;
	}
	return a;
});

onLoad(async (options) => {
	let _res = await shopInfo({
		goodId: options.id
	});
	shop.value = _res;

	uni.$on('buy', (e) => {
		policy.value.is_buy = e;
	});
	uni.$on('trusteeship', (e) => {
		policy.value.is_trusteeship = e;
	});

	uni.$on('address', (e) => {
		addData.value = e;
		address.value = {
			takeName: e.realName,
			takePhone: e.phone,
			takeAddress: `${e.province}${e.city}${e.district}${e.detail}`
		};
	});
});

let changenum = (e) => {
	console.log(e);
};

let toAddress = () => {
	uni.navigateTo({
		url: '/pages/address/list?type=1'
	});
};

let add = async () => {
	// if (!address.value.takeName && shop.value.purposeType != 1) return uni.showToast({ title: '请先选择收货地址', icon: 'none' });
	if (!policy.value.is_buy) return uni.showToast({ title: '请阅读并同意《充电桩购销合同》', icon: 'none' });
	if (!policy.value.is_trusteeship) return uni.showToast({ title: '请阅读并同意《充电桩托管协议》', icon: 'none' });
	let _res = await addGoodsOrders({
		num: dataFrom.value.num,
		goodsId: shop.value.id
		// ...address.value
	});
	uni.redirectTo({
		url: `/pageInvest/shop/pay?id=${_res.id}&amount=${_res.payMoney}&type=1&num=${_res.num}&goodsId=${shop.value.id}`
	});
};
</script>

<style scoped lang="scss">
.affirm_btn {
	width: 650rpx;
	height: 78rpx;
	background: #4874e5;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 24rpx;
	color: #ffffff;
}

.address-a {
	.top {
		padding: 40rpx;

		.top-a {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 30rpx;
			font-weight: bold;
			color: #222222;
			margin-bottom: 45rpx;
		}

		.top-b {
			font-size: 30rpx;
			font-weight: bold;
			color: #999999;
		}
	}

	.bottom {
		padding: 35rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.bottom-che {
			display: flex;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}

			font-size: 24rpx;
			font-weight: bold;
			color: #222222;
		}

		.bottom-r {
			font-size: 26rpx;
			font-weight: bold;
			color: #999999;
			display: flex;
			align-items: center;
		}
	}
}
</style>
