<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2023年4月11日 17:56:51
	 */
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		OrderRefundAction,
		OrderPayAction,
		OrderListAction,
		$image,
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from '@/store'
	const $store = useStore()
	import Countdown from './countdown/countdown.vue'
	const tab_active = ref(0)
	const tabChange = (type) => {
		tab_active.value = type
		OrderList()
	}
	const tab_arr = ['全部', '待支付', '进行中', '已取消', '已完成', '已退款']
	onMounted(() => {
		$store.buy_info = {
			hospital: 0,
			combo: 0,
			items: [],
			group: '',
			person: [],
			time: {
				id: 0,
				date: null
			}
		}
		tabChange(0)
	})
	const order_list = ref([])
	const OrderList = async () => {
		const response = await OrderListAction({
			status: tab_active.value
		})
		$response(response, () => {
			order_list.value = response.data.list.map((item) => {
				item.buy_info = JSON.parse(item.buy_info)
				return item
			})
		})
	}
	const changeStatus = (id, status) => {
		let index = order_list.value.findIndex(ii => ii.id === id)
		if (index !== -1) order_list.value[index].status = status
	}
	const status_arr = ['', '待支付', '已预约', '已取消', '已完成', '已退款']
	const status_color_arr = ['', '#F02E50', '#0BBACF', '#333333', '#FF6201', '#FFA40A']

	const orderClick = (info) => {
		if (info.status === 1) {
			OrderPay(info.id)
		}
	}

	const OrderPay = async (order) => {
		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) => {
					if (res.errMsg === 'requestPayment:ok') {
						uni.navigateTo({
							url: `/pages/buy/done/done?id=${order}`
						})
					} else {
						OrderList()
					}
				}
			});
		})
	}

	const mapClick = (info) => {
		uni.openLocation({
			type: 'wgs84',
			latitude: Number(info.latitude),
			longitude: Number(info.longitude),
			scale: 18,
			name: info.hospital_name,
			address: info.address
		})
	}
	const order_refund = ref(0)
	const OrderRefund = async () => {
		uni.showLoading({
			title: '正在退款'
		})
		const response = await OrderRefundAction({
			id: order_refund.value
		})
		uni.hideLoading()
		$response(response, () => {
			uni.$lu.toast("退款成功");
			OrderList()
			refundClose()
		})
	}
	const OrderRefundShow = (info) => {
		order_refund.value = info.id
		refund_show.value = true
	}

	const refund_show = ref(false)
	const refund_popup_ref = ref(null)
	const refundPopupRef = (e) => {
		refund_popup_ref.value = e
		refund_popup_ref.value.open('center')
	}
	const refundChange = ({
		show
	}) => {
		refund_show.value = show
	}

	const refundClose = () => {
		refund_show.value = false
	}
	const pingjia =(i)=>{
		
		var info={}
		uni.getStorage({
			key: 'h5_list',
			success: function (res) {
				 info=res.data
				 info.jump_path = info.jump_path.replace('question','question2')
				 info.jump_path=info.jump_path+"&orderid="+i.id
				 uni.$lu.jump(info)
			}
		});
		
		
	}
</script>
<template>
	<view>
		<view v-if="refund_show">
			<uni-popup :ref="refundPopupRef" type="dialog">
				<uni-popup-dialog type="info" cancelText="关闭" confirmText="确定" title="退款确认" content="是否确认退款？"
					@confirm="OrderRefund" @close="refundClose"></uni-popup-dialog>
			</uni-popup>
		</view>

		<view class="top_line_wrapper"></view>
		<view class="tab_wrapper">
			<view @click="tabChange(k)" v-for="(i,k) in tab_arr" :key="k" class="tab_item_wrapper" :class="[
				tab_active === k ? 'tab_item_text_active_wrapper' : ''
			]">
				<view class="tab_item_text_wrapper">{{ i }}</view>
				<view class="tab_item_line_wrapper"></view>
			</view>
		</view>
		<view class="order_break_wrapper"></view>
		<view class="order_list_wrapper">
			<view class="no_order_wrapper" v-if="!order_list.length">
				<view class="no_order_image_wrapper">
					<image :src="$image('/storage/assets/mp/order/暂无订单.png')"></image>
				</view>
				<view class="no_order_text_wrapper">暂无订单</view>
			</view>
			<view @click.stop="orderClick(i)" class="order_item_wrapper" v-for="(i,k) in order_list" :key="k">
				<view class="order_title_wrapper">
					<view class="order_left_wrapper">
						<view class="order_name_wrapper">
							<view v-if="!!i.buy_info.group.id">团检套餐</view>
							<view v-else>
								<view v-if="!!i.buy_info.combo.id">{{ i.buy_info.combo.name }}</view>
								<view v-else>自选项目</view>
							</view>
						</view>
						<view v-if="i.status === 1" class="order_need_wrapper">
							<view class="order_need_text_wrapper">待付款</view>
							<view class="order_need_price_wrapper">￥{{ i.price }}</view>
						</view>
					</view>
					<view class="order_status_wrapper" :style="{
						color:status_color_arr[i.status]
					}">
						<view v-if="i.status !== 5">{{ status_arr[i.status] }}</view>
						<view v-else>已{{ !!Number(i.price) ? '退款' : '退订' }}</view>
					</view>
				</view>
				<view class="order_info_wrapper">
					<view class="order_info_line_wrapper">
						<view class="order_info_line_title_wrapper">体检人：</view>
						<view class="order_info_line_content_wrapper">{{ i.name }}</view>
					</view>
					<view class="order_info_line_wrapper">
						<view class="order_info_line_title_wrapper">预约时间：</view>
						<view class="order_info_line_content_wrapper">{{ i.appointment_time }}</view>
					</view>
					<view class="order_info_line_wrapper">
						<view class="order_info_line_title_wrapper">订单号：</view>
						<view class="order_info_line_content_wrapper">{{ i.show }}</view>
					</view>
					<view class="order_info_line_wrapper">
						<view class="order_info_line_title_wrapper">类型：</view>
						<view class="order_info_line_content_wrapper">{{ i.type === 1 ? '个检' : '团检' }}</view>
					</view>
				</view>
				<view v-if="i.status === 2" class="hospital_wrapper">
					<view class="hospital_info_wrapper">
						<view class="hospital_name_wrapper">{{ i.hospital_name }}</view>
						<view class="hospital_address_wrapper">
							<view class="hospital_address_icon_wrapper">
								<image :src="$image('/storage/assets/mp/order/地址.png')"></image>
							</view>
							<view class="hospital_address_text_wrapper">{{ i.address }}</view>
						</view>
					</view>
					<view @click.stop="mapClick(i)" class="hospital_map_wrapper">
						<view class="hospital_map_icon_wrapper">
							<image :src="$image('/storage/assets/mp/order/导航.png')"></image>
						</view>
						<view class="hospital_map_text_wrapper">导航到医院</view>
					</view>
				</view>
				<view v-if="i.status === 2" class="pay_done_wrapper">
					<view v-if="(i.refund === 0 && !!i.appointment_number)" @click="OrderRefundShow(i)" class="refund_wrapper">{{ !!Number(i.price) ? '退款' : '退订' }}</view>
					<view class="qrcode_wrapper">
						<image :src="$image('/storage/assets/mp/order/二维码.png')"></image>
					</view>
				</view>
				<view v-if="i.status !== 3" class="order_line_wrapper"></view>
				<view v-if="i.status === 3" class="order_line_break_wrapper"></view>
				<view class="order_price_wrapper">
					<view v-if="i.status === 1" class="order_price_box_wrapper">
						<view class="order_price_box_time_wrapper">
							<view class="order_price_box_time_title_wrapper">倒计时：</view>
							<view class="order_price_box_time_content_wrapper">
								<Countdown @changeStatus="changeStatus" :id="i.id" :time="i.created_at"></Countdown>
							</view>
						</view>
						<view class="order_price_box_tip_wrapper">订单提交后请在2小时内完成支付，超时作废</view>
					</view>
					<view v-if="i.status === 2" class="order_price_box_wrapper">
						<view class="order_pay_time_wrapper">支付时间 {{ i.pay_time }}</view>
						<view class="order_pay_price_wrapper">
							<view class="order_pay_price_title_wrapper">已付</view>
							<view class="order_pay_price_content_wrapper">￥{{ i.price }}</view>
						</view>
					</view>
					<view v-if="i.status === 4" class="order_price_box_wrapper">
						<view class="order_pay_time_wrapper">到检时间 {{ i.check_time }}</view>
						<view class="pingjia" @click="pingjia(i)">评价</view>
						<view class="order_pay_price_wrapper done_info_wrapper">
							<view class="order_pay_price_title_wrapper">已付</view>
							<view class="order_pay_price_content_wrapper">￥{{ i.price }}</view>
						</view>
					</view>
					<view v-if="i.status === 5" class="order_price_box_wrapper">
						<view class="order_pay_time_wrapper">{{ !!Number(i.price) ? '退款' : '退订' }}时间 {{ i.refund_time }}</view>
						<view v-if="!!Number(i.price)" class="order_pay_price_wrapper refund_info_wrapper">
							<view class="order_pay_price_title_wrapper">已退款</view>
							<view class="order_pay_price_content_wrapper">￥{{ i.price }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="blank_wrapper"></view>
	</view>
</template>
<style>
	page {
		background: #ffffff;
	}
</style>
<style scoped>
	.order_pay_price_content_wrapper {
		font-size: 24rpx;
		font-weight: 500;
		color: #0BBACF;
	}

	.order_pay_price_title_wrapper {
		font-size: 18rpx;
		font-weight: 500;
		color: #0BBACF;
	}

	.order_pay_price_wrapper {
		display: flex;
		align-items: center;
		padding: 0 12rpx;
		height: 34rpx;
		background: #e3f5f7;
		border-radius: 5rpx;
		line-height: 34rpx;
	}

	.order_pay_time_wrapper {
		font-size: 20rpx;
		font-weight: 500;
		color: #999A9A;
		line-height: 1;
	}
	.pingjia{
		font-size: 20rpx;
		font-weight: 500;
		color: #ff5500;
		line-height: 1;
		border: 1px solid #ff5500;
		padding: 5rpx;
		border-radius: 5rpx;
	}

	.qrcode_wrapper image {
		width: 61rpx;
		height: 61rpx;
		display: block;
	}

	.qrcode_wrapper {
		width: 61rpx;
		height: 61rpx;
		margin-right: 25rpx;
		margin-left: 22rpx;
	}

	.refund_wrapper {
		width: 180rpx;
		height: 60rpx;
		background: rgba(230, 229, 229, 0);
		border: 2px solid #0BBACF;
		border-radius: 30rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #0BBACF;
		line-height: 60rpx;
		text-align: center;
	}

	.pay_done_wrapper {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 14rpx;
	}

	.hospital_info_wrapper {
		margin-left: 23rpx;
	}

	.hospital_map_text_wrapper {
		font-size: 22rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin-left: 8rpx;
	}

	.hospital_map_icon_wrapper image {
		width: 32rpx;
		height: 32rpx;
		display: block;
	}

	.hospital_map_icon_wrapper {
		width: 32rpx;
		height: 32rpx;
	}

	.hospital_map_wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 182rpx;
		height: 48rpx;
		background: linear-gradient(90deg, #23D3AF, #0DC5CF);
		border: 2px solid #D0EEEF;
		border-radius: 24rpx;
		margin-right: 5rpx;
	}

	.hospital_address_text_wrapper {
		font-size: 20rpx;
		font-weight: 400;
		color: #757676;
		line-height: 1;
		margin-left: 11rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 350rpx;
	}

	.hospital_address_icon_wrapper image {
		width: 20rpx;
		height: 24rpx;
		display: block;
	}

	.hospital_address_icon_wrapper {
		width: 20rpx;
		height: 24rpx;
	}

	.hospital_address_wrapper {
		display: flex;
		align-items: center;
		margin-top: 17rpx;
	}

	.hospital_name_wrapper {
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		line-height: 1;
	}

	.hospital_wrapper {
		width: 648rpx;
		height: 110rpx;
		background: #effafb;
		margin: 26rpx auto 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.order_list_wrapper {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: 120rpx;
		overflow-y: auto;
		padding-bottom: 50rpx;
	}

	.no_order_text_wrapper {
		font-size: 28rpx;
		font-weight: 500;
		color: #CDCDCD;
		line-height: 1;
		margin-top: 20rpx;
		text-align: center;
	}

	.no_order_image_wrapper image {
		width: 381rpx;
		height: 251rpx;
		display: block;
	}

	.no_order_image_wrapper {
		width: 381rpx;
		height: 251rpx;
		margin: 140rpx auto 0;
	}

	.order_price_box_tip_wrapper {
		height: 34rpx;
		background: rgba(255, 98, 1, 0.1);
		border: 1px solid rgba(255, 98, 1, 0.3);
		border-radius: 5rpx;
		font-size: 18rpx;
		font-weight: 500;
		color: #FF6201;
		line-height: 34rpx;
		padding: 0 10rpx;
	}

	.order_price_box_time_content_wrapper {
		font-size: 20rpx;
		font-weight: 500;
		color: #F02E50;
	}

	.order_price_box_time_title_wrapper {
		font-size: 20rpx;
		font-weight: 500;
		color: #999A9A;
	}

	.order_price_box_time_wrapper {
		display: flex;
		align-items: center;
	}

	.order_price_box_wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
	}

	.refund_info_wrapper.order_pay_price_wrapper {
		background: #E8F2F4;
	}

	.refund_info_wrapper>.order_pay_price_title_wrapper {
		color: #668EA7;
	}

	.refund_info_wrapper>.order_pay_price_content_wrapper {
		color: #668EA7;
	}

	.done_info_wrapper.order_pay_price_wrapper {
		background: #EDF1F1;
	}

	.done_info_wrapper>.order_pay_price_title_wrapper {
		color: #181818;
	}

	.done_info_wrapper>.order_pay_price_content_wrapper {
		color: #181818;
	}

	.order_line_wrapper {
		width: 648rpx;
		height: 1rpx;
		background: #323232;
		opacity: 0.07;
		margin: 25rpx auto 0;
	}

	.order_line_break_wrapper {
		width: 648rpx;
		height: 1rpx;
		margin: 25rpx auto 0;
	}

	.order_info_wrapper {
		margin-left: 20rpx;
		margin-top: 36rpx;
	}

	.order_info_line_content_wrapper {
		font-size: 26rpx;
		font-weight: 500;
		color: #444444;
		line-height: 40rpx;
	}

	.order_info_line_wrapper {
		height: 40rpx;
		line-height: 40rpx;
		display: flex;
		align-items: center;
	}

	.order_info_line_title_wrapper {
		width: 150rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #999A9A;
		line-height: 40rpx;
	}

	.order_status_wrapper {
		font-size: 30rpx;
		font-weight: 500;
		margin-right: 13rpx;
	}

	.order_need_text_wrapper {
		font-size: 18rpx;
		font-weight: 500;
		color: #F02E50;
	}

	.order_need_price_wrapper {
		font-size: 26rpx;
		font-weight: 500;
		color: #F02E50;
	}

	.order_need_wrapper {
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
		line-height: 34rpx;
		height: 34rpx;
		padding: 0 12rpx;
		background: #f8eaed;
		border-radius: 5rpx;
		margin-left: 15rpx;
	}

	.order_name_wrapper {
		font-size: 32rpx;
		font-weight: 500;
		color: #222222;
		max-width: 260rpx;
		line-height: 1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.order_left_wrapper {
		display: flex;
		align-items: center;
	}

	.order_title_wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 27rpx;
		margin-left: 21rpx;
	}

	.order_break_wrapper {
		background: #f3f3f3;
		width: 750rpx;
		height: 15rpx;
	}

	.order_item_wrapper {
		overflow: hidden;
		width: 690rpx;
		margin: 20rpx auto 0;
		background: linear-gradient(0deg, rgba(235, 250, 251, 0.4), rgba(249, 254, 254, 0.4));
		box-shadow: 0rpx 3rpx 6rpx 4rpx rgba(2, 95, 78, 0.14);
		border-radius: 10rpx;
	}

	.tab_item_line_wrapper {
		width: 43rpx;
		height: 6rpx;
		background: #0BBACF;
		border-radius: 3rpx;
		margin: 0 auto;
		opacity: 0;
	}

	.tab_item_wrapper {
		height: 88rpx;
		width: 200rpx;
		text-align: center;
	}

	.tab_item_text_wrapper {
		font-size: 28rpx;
		font-weight: 500;
		color: #3F3F3F;
		line-height: 83rpx;
	}

	.tab_wrapper {
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-top: 12rpx;
	}

	.tab_item_text_active_wrapper>.tab_item_text_wrapper {
		color: #0BBACF;
	}

	.tab_item_text_active_wrapper>.tab_item_line_wrapper {
		opacity: 1;
	}
</style>