<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2023年5月25日 22:26:49
	 */
	import {
		ref
	} from 'vue'
	import {
		HospitalExtraInfoAction,
		BuyInfoAction,
		$image,
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from '@/store'
	const $store = useStore()
	const buy_info = ref(false)
	let links=ref([]);//项目关联关系
	const BuyInfo = async () => {
		const response = await BuyInfoAction($store.buy_info)
		$response(response, () => {
			buy_info.value = response.data
			
			
			links.value=response.data.links
			//遍历返回的自选项目，获取id 赋值给 本地缓存
			let ll=[]
			buy_info.value.items.forEach(function(v,i){
				ll.push(v.id)
			})
			$store.buy_info.items=ll
			
			
		})
	}
	const order_type_config = ref(false)
	const readme_config = ref(false)
	const HospitalExtraInfo = async (mark) => {
		const response = await HospitalExtraInfoAction({
			hospital: $store.buy_info.hospital,
			mark
		})
		$response(response, () => {
			switch (mark) {
				case 'order_type':
					order_type_config.value = response.data.info
					break;
				case 'readme':
					readme_config.value = response.data.info
					break;
			}
		})
	}

	const tab_active = ref(0)

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

	const clearClick = () => {
		$store.buy_info.items = []
		buy_info.value.items = []
		BuyInfo()
	}

	const delClick = (id, key) => {
		delClickLinks(id, key)
		let index = $store.buy_info.items.indexOf(id)
		if (index !== -1) $store.buy_info.items.splice(index, 1)
		buy_info.value.items.splice(key, 1)
		BuyInfo()
	}
	
	//删除关联项目
	const delClickLinks =(id,key)=>{
		links.value.forEach(function(v,i){
			if(id==v.item_id){
				let link_ids =  v.link_ids.split(",");
				link_ids.forEach(function(v2,i2){
					let index = $store.buy_info.items.indexOf(v2)
					if (index !== -1) $store.buy_info.items.splice(index, 1)
					buy_info.value.items.splice(key, 1)
				})
				
			}
		})
	}
	const next_text = ref('下一步')
	const nextClick = (next = true, auto = false) => {
		if (user_info.value.dev === 1) {
			if (next) toNext()
			return
		}
		if (tab_active.value !== 1 && next_text.value !== '下一步' && !auto) return
		if (readme_config.value.time <= 0) {
			next_text.value = '下一步'
			if (next) toNext()
			return
		}
		if (tab_active.value !== 1) {
			uni.$lu.toast("请先阅读体检须知")
			tabChange(1)
		} else {
			next_text.value = `${readme_config.value.time}秒`
			setTimeout(() => {
				readme_config.value.time--
				if (tab_active.value === 1) nextClick(next, true)
			}, 1000)
		}
	}
	const toNext = () => {
		uni.navigateTo({
			url: '/pages/buy/check/check'
		})
	}

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

	const tabChange = (type) => {
		tab_active.value = type
		if (type === 1) nextClick(false)
		if (type === 0) next_text.value = '下一步'
	}

	onShow(() => {
		getUserInfo()
		HospitalExtraInfo('order_type')
		HospitalExtraInfo('readme')
	})
</script>
<template>
	<view>
		<view class="top_line_wrapper"></view>
		<view v-if="!!buy_info">
			<view class="top_info_wrapper">
				<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 v-else-if="!!buy_info.group" class="combo_info_wrapper">
					<view class="combo_info_name_wrapper">{{ buy_info.group.combo_name }}</view>
					<view class="combo_info_tag_wrapper">
						<view class="combo_tag_sex_wrapper combo_tag_sex_all_wrapper">{{ buy_info.group.name }}</view>
						<view class="combo_tag_sex_wrapper combo_tag_sex_all_wrapper">{{ buy_info.group.group_name }}</view>
					</view>
				</view>
				<view v-else class="combo_info_wrapper">
					<view class="combo_info_name_wrapper">自选项目</view>
					<view class="combo_info_tag_wrapper">
						<view class="combo_tag_sex_wrapper combo_tag_sex_all_wrapper">{{ buy_info.count }}个项目</view>
					</view>
				</view>
				<view class="tab_wrapper">
					<view @click="tabChange(0)" class="tab_item_wrapper" :class="[
						tab_active === 0 ? 'tab_item_text_active_wrapper' : ''
					]">
						<view class="tab_item_text_wrapper">套餐</view>
						<view class="tab_item_line_wrapper"></view>
					</view>
					<view @click="tabChange(1)" class="tab_item_wrapper" :class="[
						tab_active === 1 ? 'tab_item_text_active_wrapper' : ''
					]">
						<view class="tab_item_text_wrapper">体检须知</view>
						<view class="tab_item_line_wrapper"></view>
					</view>
				</view>
			</view>
			<view class="center_show_wrapper">
				<view v-if="tab_active === 0">
					<view v-if="buy_info.items.length > 0" class="items_items_wrapper">
						<view class="title_wrapper">
							<view class="title_line_wrapper"></view>
							<view class="title_text_wrapper">自选项目</view>
							<view @click="clearClick()" class="clear_button_wrapper">
								<view class="clear_button_icon_wrapper">
									<image :src="$image('/storage/assets/mp/combo/清空.png')"></image>
								</view>
								<view class="clear_button_text_wrapper">清空</view>
							</view>
						</view>
						<view class="items_list_wrapper">
							<view class="items_list_item_wrapper" v-for="(i,k) in buy_info.items" :key="k">
								<view class="items_list_item_text_wrapper">{{ k+1 }}.{{ i.name }}</view>
								<view class="items_list_item_right_wrapper">
									<view class="items_list_item_price_wrapper">￥{{ Number(i.price).toFixed(2) }}</view>
									<view @click="delClick(i.id,k)" class="items_list_item_del_wrapper">
										<image :src="$image('/storage/assets/mp/combo/删除.png')"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="buy_info.items.length > 0" class="list_break_wrapper"></view>
					<view v-if="!!buy_info.combo" class="combo_items_wrapper">
						<view class="title_wrapper">
							<view class="title_line_wrapper"></view>
							<view class="title_text_wrapper">套餐项目</view>
						</view>
						<view class="items_list_wrapper">
							<view class="items_list_item_wrapper" v-for="(i,k) in buy_info.combo.items" :key="k">
								<view class="items_list_item_text_wrapper">{{ k+1 }}.{{ i.name }}</view>
								<view class="items_list_item_price_wrapper">￥{{ Number(i.price).toFixed(2) }}</view>
							</view>
						</view>
					</view>
					<view v-if="!!buy_info.group" class="combo_items_wrapper">
						<view class="title_wrapper">
							<view class="title_line_wrapper"></view>
							<view class="title_text_wrapper">团检项目</view>
						</view>
						<view class="items_list_wrapper">
							<view class="items_list_item_wrapper" v-for="(i,k) in buy_info.group.items" :key="k">
								<view class="items_list_item_text_wrapper">{{ k+1 }}.{{ i.name }}</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="tab_active === 1" class="readme_wrapper">
					<view class="readme_box_wrapper" v-html="readme_config.content"></view>
				</view>
			</view>
			<view class="bottom_wrapper">
				<view class="bottom_box_wrapper">
					<view class="bottom_count_wrapper">
						<view>您需现场付费</view>
						<view>{{ buy_info.count }}个项目</view>
					</view>
					<view class="bottom_line_wrapper"></view>
					<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>
					<view class="bottom_button_wrapper">
						<view @click="toItemChoose()"
							v-if="(!!order_type_config && order_type_config.combo_add_item === 1) || (!$store.buy_info.combo && !$store.buy_info.group)"
							class="bottom_button_items_wrapper">
							我要加项
						</view>
						<view @click="nextClick()" class="bottom_button_next_wrapper" :class="[
							(!order_type_config || order_type_config.combo_add_item !== 1) && (!!$store.buy_info.combo || !!$store.buy_info.group)
							 ? 'bottom_button_next_long_wrapper' : ''
						]">
							{{ next_text }}
						</view>
					</view>
				</view>
				<view class="blank_wrapper"></view>
			</view>
		</view>
		<view class="blank_wrapper"></view>
	</view>
</template>
<style scoped>
	.top_info_wrapper {
		position: fixed;
		width: 100%;
	}

	.clear_button_text_wrapper {
		margin-left: 21rpx;
	}

	.clear_button_wrapper {
		position: absolute;
		top: 50%;
		right: 30rpx;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		font-size: 26rpx;
		font-weight: 500;
		color: #7D7D7D;
		line-height: 1;
	}

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

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

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

	.items_list_item_del_wrapper {
		width: 24rpx;
		height: 26rpx;
		margin-right: 13rpx;
	}

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

	.list_break_wrapper {
		width: 750rpx;
		height: 14rpx;
		background: #F3F3F3;
	}

	.bottom_button_next_wrapper {
		width: 50%;
		background: #ff6201;
	}

	.bottom_button_items_wrapper {
		width: 50%;
	}

	.bottom_button_next_long_wrapper {
		width: 100%;
	}

	.readme_box_wrapper {
		width: 680rpx;
		font-size: 28rpx;
		color: #000000;
		line-height: 52rpx;
		margin: 20rpx auto 0;
	}

	.center_show_wrapper {
		position: fixed;
		bottom: calc(150rpx + var(--safe-area-inset-bottom));
		top: 245rpx;
		left: 0;
		right: 0;
		overflow-y: auto;
		background: #ffffff;
	}

	.readme_wrapper {
		height: 100%;
		width: 100%;
	}

	.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: 320rpx;
		height: 68rpx;
		background: #0BBACF;
		border-radius: 34rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 68rpx;
		text-align: center;
		overflow: hidden;
	}

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

	.bottom_line_wrapper {
		width: 1rpx;
		height: 53rpx;
		background: #dedede;
	}

	.bottom_count_wrapper {
		width: 169rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #000000;
		line-height: 40rpx;
		text-align: center;
	}

	.bottom_box_wrapper {
		height: 120rpx;
		display: flex;
		align-items: center;
	}

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

	.items_list_item_price_wrapper {
		font-size: 30rpx;
		font-weight: 500;
		color: #F02E50;
		line-height: 1;
		position: absolute;
		left: 500rpx;
	}

	.items_list_item_text_wrapper {
		margin-left: 22rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #222222;
		line-height: 1;
		max-width: 450rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.items_list_item_wrapper {
		width: 690rpx;
		height: 94rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #EBEBEB;
		margin: 0 auto;
		position: relative;
	}

	.title_text_wrapper {
		font-size: 30rpx;
		font-weight: 500;
		color: #222222;
		line-height: 1;
		margin-left: 15rpx;
	}

	.items_items_wrapper {
		background: #ffffff;
	}

	.combo_items_wrapper {
		background: #ffffff;
	}

	.title_wrapper {
		display: flex;
		align-items: center;
		height: 95rpx;
		width: 750rpx;
		background: #ffffff;
		border-bottom: 2rpx solid #EBEBEB;
		position: relative;
	}

	.title_line_wrapper {
		width: 7rpx;
		height: 27rpx;
		border-radius: 999rpx;
		margin-left: 30rpx;
	}

	.combo_items_wrapper>.title_wrapper>.title_line_wrapper {
		background: #0bbacf;
	}

	.items_items_wrapper>.title_wrapper>.title_line_wrapper {
		background: #fa7c2f;
	}

	.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;
		margin-top: 13rpx;
	}

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

	.tab_item_text_active_wrapper>.tab_item_line_wrapper {
		opacity: 1;
	}

	.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 {
		padding-left: 10rpx;
		padding-right: 10rpx;
		height: 28rpx;
		border: 1px solid;
		border-radius: 6rpx;
		font-size: 20rpx;
		font-weight: 500;
		line-height: 28rpx;
		text-align: center;
		margin-right: 10rpx;
	}

	.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>