<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2023年4月12日 19:00:04
	 */
	import {
		ref
	} from 'vue'
	import {
		ReportUrl,
		HospitalExtraInfoAction,
		UserPersonGroupAction,
		UserPersonDeleteAction,
		UserPersonListAction,
		$image,
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import YinSi from '@/components/YinSi.vue'
	import {
		useStore
	} from '@/store'
	const $store = useStore()
	const $props = defineProps({
		type: {
			type: String,
			default: 'choose'
		}
	});
	onShow(() => {
		HospitalExtraInfo()
	})

	const order_type_config = ref(false)
	const HospitalExtraInfo = async () => {
		const response = await HospitalExtraInfoAction({
			hospital: $store.buy_info.hospital,
			mark: 'order_type'
		})
		$response(response, () => {
			order_type_config.value = response.data.info
			getHospitalInfo()
		})
	}

	const hospital_info = ref(false)
	const getHospitalInfo = () => {
		uni.$lu.hospital((info) => {
			hospital_info.value = info
			$store.buy_info.person = []
			uni.$lu.user((user_info) => {
				if (!!user_info.id) {
					UserPersonList()
				} else {
					uni.reLaunch({
						url: '/pages/main/home/home'
					})
				}
			})
		})
	}

	const user_person_list = ref([])
	const UserPersonList = async () => {
		const response = await UserPersonListAction()
		$response(response, () => {
			user_person_list.value = response.data.list
		})
	}

	const toPersonClick = (info) => {
		$store.buy_info.person = [info]
		switch ($props.type) {
			case 'choose':
				if (order_type_config.value.item === 1) {
					choose_type_show.value = true
				} else {
					chooseTypeClick('combo')
				}
				break;
			case 'group':
				$store.buy_info.hospital = hospital_info.value.id
				$store.buy_info.combo = 0
				$store.buy_info.items = []
				$store.buy_info.group = ''
				$store.buy_info.time = {
					id: 0,
					date: null
				}
				UserPersonGroup(info)
				break;
			case 'info':
				uni.navigateTo({
					url: '/pages/buy/info/info'
				})
				break;
			case 'check':
				uni.navigateBack({
					delta: 1
				})
				break;
			case 'report':
				IsOpenYinSi.value=true
				
				break;
			case 'question':
				$store.buy_info.hospital = hospital_info.value.id
				$store.buy_info.combo = 0
				$store.buy_info.items = []
				$store.buy_info.group = ''
				$store.buy_info.time = {
					id: 0,
					date: null
				}
				uni.$lu.jump({
					jump_type: 2,
					jump_path: `/pages/dlc/question/question?hospital=${hospital_info.value.id}`,
					login_type: 1
				})
				break;
		}
	}

	const choose_type_show = ref(false)
	const choose_type_popup_ref = ref(null)
	const chooseTypePopupRef = (e) => {
		choose_type_popup_ref.value = e
		choose_type_popup_ref.value.open('center')
	}
	const chooseTypeChange = ({
		show
	}) => {
		choose_type_show.value = show
	}

	const chooseTypeClick = (type) => {
		choose_type_show.value = false
		$store.buy_info.hospital = hospital_info.value.id
		$store.buy_info.combo = 0
		$store.buy_info.items = []
		$store.buy_info.group = ''
		$store.buy_info.time = {
			id: 0,
			date: null
		}
		switch (type) {
			case 'item':
				uni.navigateTo({
					url: '/pages/buy/items/items'
				})
				break;
			case 'combo':
				uni.switchTab({
					url: '/pages/main/combo/combo'
				})
				break;
		}
	}

	const UserPersonGroup = async (info) => {
		const response = await UserPersonGroupAction({
			hospital: $store.buy_info.hospital,
			phone: info.phone,
			id_number: info.id_number,
		})
		$response(response, () => {
			$store.buy_info.group = response.data.appointment_number
			uni.navigateTo({
				url: '/pages/buy/info/info'
			})
		})
	}
	let IsOpenYinSi=ref(false)
 
	const YinSiAgreeFunc=(e)=>{
		 if(e='agree_report'){
			 uni.$lu.jump({
			 	jump_type: 3,
			 	jump_path: ReportUrl({
			 		hospital: hospital_info.value.id,
			 		id_number: $store.buy_info.person[0].id_number
			 	}),
			 	login_type: 1
			 })
		 }
	}
	const YinSiCloseFunc=()=>{
		IsOpenYinSi.value=false
	}
	const toEditPersonClick = () => {
		uni.navigateTo({
			url: `/pages/user/edit/edit?id=0`
		})
	}
</script>
<template>
	<view>
		<YinSi :IsOpenYinSi="IsOpenYinSi" @agree="YinSiAgreeFunc" @close="YinSiCloseFunc"></YinSi>
		<view v-if="choose_type_show">
			<uni-popup :ref="chooseTypePopupRef" background-color="#ffffff00" @change="chooseTypeChange">
				<view class="choose_type_popup_wrapper">
					<view @click="choose_type_show = false" class="close_icon_wrapper">
						<uni-icons type="closeempty" size="22" color="#999999"></uni-icons>
					</view>
					<view class="choose_type_title_wrapper">请选择体检方式</view>
					<view class="choose_type_line_wrapper"></view>
					<view class="choose_type_list_wrapper">
						<view @click="chooseTypeClick('item')" class="choose_type_item_wrapper">
							<view class="choose_type_item_bg_wrapper">
								<image :src="$image('/storage/assets/mp/home/自选套餐.png')"></image>
							</view>
							<view class="choose_type_item_icon_wrapper">
								自选项目
								<image :src="$image('/storage/assets/mp/home/自选箭头.png')"></image>
							</view>
						</view>
						<view @click="chooseTypeClick('combo')" class="choose_type_item_wrapper">
							<view class="choose_type_item_bg_wrapper">
								<image :src="$image('/storage/assets/mp/home/套餐项目.png')"></image>
							</view>
							<view class="choose_type_item_icon_wrapper">
								<text class="choose_type_item_icon_text_wrapper">套餐项目</text>
								<image :src="$image('/storage/assets/mp/home/套餐箭头.png')"></image>
							</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>

		<view v-if="user_person_list.length === 0" class="no_person_wrapper">
			<view class="no_person_icon_wrapper">
				<image mode="scaleToFill" :src="$image('/storage/assets/mp/order/没有数据@2x.png')"></image>
			</view>
			<view class="no_person_text_wrapper">暂无体检人</view>
		</view>

		<view v-else class="user_person_list_wrapper">
			
			<view v-for="(i,k) in user_person_list" :key="k" class="user_person_item_wrapper">
				<view class="user_person_info_tag_wrapper" :class="[
					i.relationship === '本人' ? 'user_person_info_tag_active_wrapper' : ''
				]">{{ i.relationship }}</view>
				<view class="user_person_info_content_wrapper">
					<view class="user_person_info_wrapper">
						<view class="user_person_info_name_wrapper">{{ i.name }}</view>
						<view class="user_person_info_sex_wrapper">{{ Number(i.sex) === 1 ? '男' : '女' }}性</view>
						<view class="user_person_info_marriage_wrapper">{{ Number(i.marriage) === 1 ? '已婚' : '未婚' }}</view>
					</view>
					<view class="user_person_info_id_number_wrapper">{{ i.id_number }}</view>
				</view>
				<view @click="toPersonClick(i)" class="button_wrapper">选择</view>
			</view>
		</view>
		<view @click="toEditPersonClick()" class="add_button_wrapper">
			<view class="add_button_icon_wrapper">
				<image :src="$image('/storage/assets/mp/person/添加体检人@2x.png')"></image>
			</view>
			<view class="add_button_text_wrapper">添加体检人</view>
		</view>
		<view class="button_blank_wrapper"></view>
		<view class="blank_wrapper"></view>
	</view>
</template>
<style>
	page {
		background: #ffffff;
	}
</style>
<style scoped>
	.choose_type_list_wrapper {
		margin-top: 21rpx;
	}

	.choose_type_item_wrapper {
		position: relative;
	}

	.choose_type_item_icon_wrapper image {
		width: 13rpx;
		height: 21rpx;
		display: block;
		margin-left: 35rpx;
	}

	.choose_type_item_icon_wrapper {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #FC852B;
		line-height: 1;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 49rpx;
	}

	.choose_type_item_icon_text_wrapper {
		color: #4C82FF;
	}

	.choose_type_item_bg_wrapper image {
		width: 530rpx;
		height: 142rpx;
		display: block;
	}

	.choose_type_item_bg_wrapper {
		width: 530rpx;
		height: 142rpx;
	}

	.choose_type_item_wrapper {
		width: 530rpx;
		height: 142rpx;
		margin: 46rpx auto 0;
	}

	.choose_type_line_wrapper {
		width: 531rpx;
		height: 1rpx;
		background: #0DC3D0;
		margin: 40rpx auto 0;
	}

	.choose_type_title_wrapper {
		font-size: 30rpx;
		font-weight: 500;
		color: #000000;
		line-height: 1;
		margin-top: 49rpx;
		text-align: center;
	}

	.close_icon_wrapper {
		position: absolute;
		top: 29rpx;
		right: 36rpx;
	}

	.choose_type_popup_wrapper {
		width: 600rpx;
		padding-bottom: 84rpx;
		overflow: hidden;
		background: #FFFFFF;
		border-radius: 29rpx 30rpx 30rpx 30rpx;
	}

	.no_person_wrapper {
		margin-top: 200rpx;
	}

	.no_person_icon_wrapper image {
		width: 318rpx;
		height: 251rpx;
		display: block;
	}

	.no_person_icon_wrapper {
		width: 318rpx;
		height: 251rpx;
		margin: 0 auto;
	}

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

	.login_popup_text_title_wrapper {
		font-size: 32rpx;
		font-weight: bold;
		color: #3D3D3D;
		margin-top: 65rpx;
		line-height: 42rpx;
		line-height: 1;
	}

	.login_popup_cancel_button_wrapper {
		width: 445rpx;
		height: 84rpx;
		background: #bbbbbb;
		border-radius: 42rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 84rpx;
		text-align: center;
		margin: 38rpx auto 0;
	}

	.login_popup_button_wrapper {
		width: 445rpx;
		height: 84rpx;
		background: linear-gradient(90deg, #23D3AF, #0DC5CF);
		border: 2px solid #D0EEEF;
		border-radius: 42rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 84rpx;
		border: none !important;
		margin: 80rpx auto 0;
		text-align: center;
	}

	.login_popup_text_wrapper {
		text-align: center;
	}

	.login_popup_icon_wrapper image {
		width: 152rpx;
		height: 152rpx;
		display: block;
	}

	.login_popup_icon_wrapper {
		width: 152rpx;
		height: 152rpx;
		position: absolute;
		top: -64rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.login_popup_wrapper {
		position: relative;
		width: 569rpx;
		height: 465rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
		border-radius: 20rpx;
	}

	.check_login_popup_wrapper {
		position: relative;
		z-index: 9999;
	}

	.user_person_info_tag_wrapper {
		position: absolute;
		width: 76rpx;
		height: 32rpx;
		background: #668EA7;
		border-radius: 10rpx 0 10rpx 0;
		font-size: 20rpx;
		font-weight: 500;
		color: #FAFDFE;
		line-height: 32rpx;
		text-align: center;
		top: 0;
		left: 0;
	}

	.user_person_info_tag_active_wrapper {
		background: linear-gradient(-20deg, #0CBAED, #00DED7);
		box-shadow: 2rpx 3rpx 2rpx 0 rgba(2, 95, 78, 0.2);
	}

	.edit_button_wrapper {
		margin-left: 40rpx;
	}

	.button_text_wrapper {
		font-size: 26rpx;
		font-weight: 500;
		color: #6A6A6A;
		line-height: 1;
		margin-left: 13rpx;
	}

	.button_icon_wrapper image {
		width: 24rpx;
		height: 26rpx;
		display: block;
	}

	.button_icon_wrapper {
		width: 24rpx;
		height: 26rpx;
	}

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

	.user_person_info_id_number_wrapper {
		font-size: 26rpx;
		font-weight: 500;
		color: #6A6A6A;
		line-height: 1;
		margin-top: 22rpx;
	}

	.user_person_info_content_wrapper {
		margin-left: 40rpx;
		width: 400rpx;
	}

	.user_person_info_marriage_wrapper {
		font-size: 26rpx;
		font-weight: 500;
		color: #6A6A6A;
		line-height: 1;
		margin-left: 20rpx;
	}

	.user_person_info_sex_wrapper {
		font-size: 26rpx;
		font-weight: 500;
		color: #6A6A6A;
		line-height: 1;
		margin-left: 20rpx;
	}

	.user_person_info_name_wrapper {
		font-size: 30rpx;
		font-weight: 500;
		color: #181818;
		line-height: 1;
	}

	.user_person_info_wrapper {
		display: flex;
		align-items: flex-end;
	}

	.button_blank_wrapper {
		height: calc(120rpx + var(--safe-area-inset-bottom));
	}

	.user_person_list_wrapper {
		margin-top: 40rpx;
	}

	.user_person_item_wrapper {
		position: relative;
		width: 690rpx;
		height: 160rpx;
		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.07);
		border-radius: 10rpx;
		margin: 20rpx auto 0;
		display: flex;
		align-items: center;
	}

	.add_button_text_wrapper {
		font-size: 31rpx;
		font-weight: 500;
		color: #F6FDFD;
		margin-left: 32rpx;
	}

	.add_button_icon_wrapper image {
		width: 30rpx;
		height: 30rpx;
		display: block;
	}

	.add_button_icon_wrapper {
		width: 30rpx;
		height: 30rpx;
	}

	.add_button_wrapper {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1;
		width: 580rpx;
		height: 90rpx;
		background: linear-gradient(-90deg, #23D3AF, #0DC5CF);
		border-radius: 45rpx;
		bottom: calc(69rpx + var(--safe-area-inset-bottom));
		left: 50%;
		transform: translateX(-50%);
	}
</style>