<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2023年5月25日 22:26:49
	 */
	import {
		ref
	} from 'vue'
	import {
		OrderCreateAction,
		OrderPayAction,
		BuyInfoAction,
		$image,
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from '@/store'
	const $store = useStore()
	const buy_info = ref(false)
	const BuyInfo = async () => {
		const response = await BuyInfoAction($store.buy_info)
		$response(response, () => {
			buy_info.value = response.data
			$store.buy_info.time = buy_info.value.time
		})
	}

	const user_info = ref(false)
	const getUserInfo = () => {
		uni.$lu.user((info) => {
			user_info.value = info
			if (!!user_info.value.id) BuyInfo()
		})
	}

	const nextClick = () => {
		OrderCreate()
	}

	const choosePersonClick = () => {
		uni.navigateTo({
			url: '/pages/buy/person/person?type=check'
		})
	}

	const chooseTimeClick = () => {
		uni.navigateTo({
			url: '/pages/buy/time/time'
		})
	}

	const OrderPay = async (order) => {
		if (pay_action.value) return
		pay_action.value = true
		const response = await OrderPayAction({
			order,
			pay_type: 1
		})
		$response(response, () => {
			wx.requestPayment({
				timeStamp: response.data.pay.timestamp,
				nonceStr: response.data.pay.nonce_str,
				package: response.data.pay.package,
				signType: 'RSA',
				paySign: response.data.pay.pay_sign,
				complete: (res) => {
					pay_action.value = false
					if (res.errMsg === 'requestPayment:ok') {
						uni.redirectTo({
							url: `/pages/buy/done/done?id=${order}`
						})
					} else {
						uni.reLaunch({
							url: '/pages/main/order/order'
						})
					}
				}
			});
		})
	}
	const OrderCreate = async () => {
		pay_action.value = true
		const response = await OrderCreateAction({
			...$store.buy_info,
			referral: referral.value
		})
		pay_action.value = false
		$response(response, () => {
			OrderPay(response.data.id)
		})
	}

	const referral = ref('')
	const pay_action = ref(false)
	onShow(() => {
		getUserInfo()
		console.log(JSON.stringify($store.buy_info))
	})
</script>
<template>
	<view>
		<view class="top_line_wrapper"></view>
		<view v-if="!!buy_info">
			<view v-if="!!buy_info.combo" class="combo_info_wrapper">
				<view class="combo_info_name_wrapper">{{ buy_info.combo.name }}</view>
				<view class="combo_info_tag_wrapper">
					<view class="combo_tag_sex_wrapper combo_tag_sex_all_wrapper" v-if="buy_info.combo.sex==='全部'">全部</view>
					<view class="combo_tag_sex_wrapper combo_tag_sex_nan_wrapper" v-if="buy_info.combo.sex==='男'">男士</view>
					<view class="combo_tag_sex_wrapper combo_tag_sex_nv_wrapper" v-if="buy_info.combo.sex==='女'">女士</view>
				</view>
			</view>
			<view class="person_info_wrapper">
				<view class="person_info_title_wrapper">预约人信息</view>
				<view class="person_info_line_wrapper"></view>
				<view v-if="$store.buy_info.person.length > 0">
					<view class="person_info_name_wrapper">{{ $store.buy_info.person[0].name }}</view>
					<view class="person_info_info_wrapper">
						<view class="person_info_sex_wrapper">{{ Number($store.buy_info.person[0].sex) === 1 ? '男' : '女' }}性</view>
						<view class="person_info_marriage_wrapper">
							{{ Number($store.buy_info.person[0].marriage) === 1 ? '已婚' : '未婚' }}
						</view>
						<view class="person_info_phone_wrapper">{{ $store.buy_info.person[0].phone }}</view>
					</view>
					<view class="person_info_line_wrapper"></view>
				</view>
				<view @click="choosePersonClick()" class="change_button_wrapper">
					{{ $store.buy_info.person.length === 0 ? '添加' : '切换' }}体检人
				</view>
			</view>
			<view class="time_wrapper">
				<view class="time_title_wrapper">介绍人</view>
				<view class="time_content_wrapper">
					<input type="text" v-model="referral" placeholder="请输入">
				</view>
			</view>
			<view @click="chooseTimeClick()" class="time_wrapper">
				<view class="time_title_wrapper">体检时间</view>
				<view class="time_content_wrapper">
					{{ buy_info.time.id !== 0 ? buy_info.time.show : '请选择体检时间'}}
				</view>
			</view>
			<view class="tip_wrapper">
				<view class="tip_icon_wrapper">
					<image :src="$image('/storage/assets/mp/combo/提示.png')"></image>
				</view>
				<view class="tip_text_wrapper">提示：只有点击提交预约按钮才能完成预约哦~</view>
			</view>
			<view class="bottom_wrapper">
				<view class="bottom_box_wrapper">
					<view class="bottom_price_wrapper">
						<view class="bottom_price_original_price_wrapper"
							v-if="Number(buy_info.original_price) > Number(buy_info.price)">
							<!-- ￥{{ Number(buy_info.original_price).toFixed(2) }} -->
						</view>
						<view class="bottom_price_price_wrapper">
							<view class="bottom_price_price_icon_wrapper">￥</view>
							{{ Number(buy_info.price).toFixed(2) }}
						</view>
					</view>
					<button :loading="pay_action" @click="nextClick()" class="bottom_button_wrapper">提交预约</button>
				</view>
				<view class="blank_wrapper"></view>
			</view>
		</view>
		<view class="blank_wrapper"></view>
	</view>
</template>
<style scoped>
	.tip_text_wrapper {
		width: 600rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #FF6201;
		margin-left: 11rpx;
	}

	.tip_wrapper {
		display: flex;
		align-items: center;
		margin-top: 49rpx;
		margin-left: 41rpx;
	}

	.tip_icon_wrapper image {
		width: 27rpx;
		height: 27rpx;
		display: block;
	}

	.tip_icon_wrapper {
		width: 27rpx;
		height: 27rpx;
	}

	.time_content_wrapper {
		font-size: 28rpx;
		font-weight: 400;
		color: #000000;
		margin-left: 108rpx;
	}

	.time_title_wrapper {
		font-size: 28rpx;
		font-weight: 400;
		color: #000000;
		margin-left: 40rpx;
	}

	.time_wrapper {
		width: 750rpx;
		height: 101rpx;
		background: #ffffff;
		margin-top: 15rpx;
		line-height: 101rpx;
		display: flex;
		align-items: center;
	}

	.change_button_wrapper {
		font-size: 28rpx;
		font-weight: 400;
		color: #000000;
		line-height: 106rpx;
		text-align: center;
	}

	.person_info_phone_wrapper {
		margin-left: 30rpx;
	}

	.person_info_marriage_wrapper {
		margin-left: 30rpx;
	}

	.person_info_info_wrapper {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		font-weight: 400;
		color: #999999;
		line-height: 1;
		margin-top: 31rpx;
		margin-left: 40rpx;
	}

	.person_info_name_wrapper {
		font-size: 32rpx;
		font-weight: 400;
		color: #000000;
		line-height: 1;
		margin-left: 40rpx;
		margin-top: 40rpx;
	}

	.person_info_line_wrapper {
		width: 690rpx;
		height: 1rpx;
		background: #E8E8E8;
		margin: 26rpx auto 0;
	}

	.person_info_title_wrapper {
		font-size: 28rpx;
		font-weight: 400;
		color: #000000;
		line-height: 1;
		margin-top: 31rpx;
		margin-left: 40rpx;
	}

	.person_info_wrapper {
		width: 750rpx;
		background: #ffffff;
		margin-top: 16rpx;
		overflow: hidden;
	}

	.bottom_price_price_icon_wrapper {
		font-size: 24rpx;
		font-weight: 400;
	}

	.bottom_price_price_wrapper {
		font-size: 36rpx;
		font-weight: 800;
		color: #F02E50;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.bottom_price_original_price_wrapper {
		font-size: 22rpx;
		font-weight: 800;
		text-decoration: line-through;
		color: #444444;
		line-height: 1;
	}

	.bottom_button_wrapper {
		width: 200rpx;
		height: 68rpx;
		background: #0BBACF;
		border-radius: 34rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 68rpx;
		text-align: center;
		margin-right: 30rpx;
	}

	.bottom_price_wrapper {
		text-align: right;
		margin-right: 30rpx;
		width: 200rpx;
	}

	.bottom_box_wrapper {
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bottom_wrapper {
		position: fixed;
		width: 750rpx;
		background: #ffffff;
		bottom: 0;
	}

	.combo_info_wrapper {
		height: 125rpx;
		background: #ffffff;
		overflow: hidden;
	}

	.combo_info_name_wrapper {
		font-size: 30rpx;
		font-weight: 500;
		color: #222222;
		line-height: 1;
		margin-top: 29rpx;
		margin-left: 39rpx;
		max-width: 600rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.combo_info_tag_wrapper {
		display: flex;
		align-items: center;
		margin-top: 19rpx;
		margin-left: 39rpx;
	}

	.combo_tag_sex_wrapper {
		width: 50rpx;
		height: 28rpx;
		border: 1px solid;
		border-radius: 6rpx;
		font-size: 20rpx;
		font-weight: 500;
		line-height: 28rpx;
		text-align: center;
	}

	.combo_tag_sex_all_wrapper {
		color: #8EC363;
		border-color: #8EC363;
	}

	.combo_tag_sex_nan_wrapper {
		color: #5FCAEA;
		border-color: #5FCAEA;
	}

	.combo_tag_sex_nv_wrapper {
		color: #EF7389;
		border-color: #EF7389;
	}
</style>