<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2023年4月11日 17:56:51
	 */
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		ConfigGetAction,
		HospitalExtraInfoAction,
		$image,
		$response,$chat_url
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		delToken
	} from '@/lu/token.js'
	import {
		useStore
	} from '@/store'
	const $store = useStore()
	import CheckLogin from '@/components/check_login/check_login.vue'
	const user_info = ref(false)
	onMounted(() => {
		ConfigGet()
		setChooseCallFunc()
		getUserInfo()
		tiao()
	})
	const hospital_info = ref(false)
	const getHospitalInfo = (user_info) => {
		uni.$lu.hospital((info) => {
			hospital_info.value = info
			if (!!user_info.id) {
				HospitalExtraInfo()
			} else {
				$store.buy_info = {
					hospital: 0,
					combo: 0,
					items: [],
					group: '',
					person: [],
					time: 0
				}
				card_config.value = JSON.parse(JSON.stringify(default_card_config))
			}
		})
	}
	const choose_call_show = ref(false)
	const setChooseCallFunc = () => {
		uni.$lu.open.choose_call = () => {
			if (!!mp_phone.value) {
				choose_call_show.value = true
			} else {
				makePhoneCall(hospital_info.value.phone)
			}
		}
	}

	const makePhoneCall = (phone) => {
		choose_call_show.value = false
		uni.makePhoneCall({
			phoneNumber: phone
		})
	}

	const getUserInfo = () => {
		uni.$lu.user((info) => {
			user_info.value = info
			getHospitalInfo(info)
		})
	}
	const default_card_config = {
		open: 2,
		card: false,
	}
	const card_config = ref(JSON.parse(JSON.stringify(default_card_config)))
	const HospitalExtraInfo = async () => {
		const response = await HospitalExtraInfoAction({
			hospital: hospital_info.value.id,
			mark: 'card_pay'
		})
		$response(response, () => {
			card_config.value = response.data.info
			if (Number(card_config.value.open) === 1 && !!card_config.value.card) {
				button_list.value[2].show = true
			}
		})
	}
	const mp_phone = ref('')
	const ConfigGet = async () => {
		const response = await ConfigGetAction({
			label_arr: ['客服电话']
		})
		$response(response, () => {
			mp_phone.value = response.data['客服电话']
		})
	}

	const button_list = ref([{
		title: '我的订单',
		icon: '/storage/assets/mp/user/我的订单@2x.png',
		show: true,
		jump_type: 2,
		jump_path: '/pages/main/order/order',
		login_type: 1
	}, {
		title: '体检人员管理',
		icon: '/storage/assets/mp/user/体检人员管理@2x.png',
		show: true,
		jump_type: 2,
		jump_path: '/pages/user/person/person',
		login_type: 1
	}, {
		title: '会员卡信息',
		icon: '/storage/assets/mp/user/会员卡信息@2x.png',
		show: false,
		jump_type: 4,
		jump_path: 'toast;未开启',
		login_type: 1
	}, {
		title: '联系客服',
		icon: '/storage/assets/mp/user/联系客服@2x.png',
		show: true,
		jump_type: 4,
		jump_path: 'choose_call',
		login_type: 1
	},
	{
		title: '提交工单',
		icon: '/storage/assets/mp/user/会员卡信息@2x.png',
		show: true,
		jump_type: 3,
		jump_path: $chat_url+'/h5/#/pages/main/login/login?page=chat&token=[TOKEN]',
		login_type: 1
	}])
	const quitShow = () => {
		quit_show.value = true
	}
	const quitClick = () => {
		quit_show.value = false
		delToken()
		$store.buy_info = {
			hospital: 0,
			combo: 0,
			items: [],
			group: '',
			person: [],
			time: 0
		}
		uni.reLaunch({
			url: '/pages/main/user/user'
		})
	}
	const quit_show = ref(false)
	const quit_popup_ref = ref(null)
	const quitPopupRef = (e) => {
		quit_popup_ref.value = e
		quit_popup_ref.value.open('center')
	}
	const quitChange = ({
		show
	}) => {
		quit_show.value = show
	}

	const choose_call_popup_ref = ref(null)
	const chooseCallPopupRef = (e) => {
		choose_call_popup_ref.value = e
		choose_call_popup_ref.value.open('center')
	}
	const chooseCallChange = ({
		show
	}) => {
		choose_call_show.value = show
	}

	const loginCallback = () => {
		getUserInfo()
	}
	const userButtonClick = (info) => {
		uni.$lu.jump(info)
	}

</script>
<template>
	<view> 
		<CheckLogin @callback="loginCallback()"></CheckLogin>
		<view v-if="quit_show">
			<uni-popup :ref="quitPopupRef" background-color="#ffffff00" @change="quitChange">
				<view class="login_popup_wrapper">
					<view class="top_blank_wrapper"></view>
					<view class="login_popup_text_wrapper">
						<view class="login_popup_text_title_wrapper">是否确认退出登录</view>
					</view>
					<view @click="quitClick()" class="login_popup_button_wrapper">退出登录</view>
					<view @click="quit_show = false" class="login_popup_cancel_button_wrapper">暂不退出</view>
				</view>
			</uni-popup>
		</view>

		<view v-if="choose_call_show">
			<uni-popup :ref="chooseCallPopupRef" background-color="#ffffff00" @change="chooseCallChange">
				<view class="login_popup_wrapper">
					<view class="top_blank_wrapper"></view>
					<view class="login_popup_text_wrapper">
						<view class="login_popup_text_title_wrapper">请选择要拨打的客服电话</view>
					</view>
					<view @click="makePhoneCall(hospital_info.phone)" class="login_popup_button_wrapper">医院客服</view>
					<view @click="makePhoneCall(mp_phone)" class="login_popup_cancel_button_wrapper">小程序客服</view>
				</view>
			</uni-popup>
		</view>

		<uni-nav-bar :border="false" fixed statusBar color="#ffffff" backgroundColor="#00000000" title="我的" />
		<view class="user_bg_wrapper">
			<image :src="$image('/storage/assets/mp/user/用户背景@2x.png')"></image>
		</view>
		<view v-if="!!user_info" class="user_info_wrapper">
			<view class="user_info_avatar_wrapper">
				<image mode="aspectFill" :src="$image(user_info.avatar)"></image>
			</view>
			<view class="user_info_info_wrapper">
				<view class="user_info_info_nickname_wrapper">
					{{ !!user_info.person.id ? user_info.person.name : user_info.nickname }}
				</view>
				<view v-if="!!user_info.id" class="user_info_info_phone_wrapper">
					{{ !!user_info.person.id ? user_info.person.phone : '未添加体检人' }}
				</view>
			</view>
			<view v-if="Number(card_config.open) === 1 && !card_config.card" class="user_card_button_wrapper">领取会员卡</view>
		</view>
		<view class="user_button_wrapper">
			<template v-for="(i,k) in button_list" :key="k">
				<view @click="userButtonClick(i)" v-if="i.show" class="user_button_item_wrapper">
					<view class="user_button_item_title_wrapper">
						<view class="user_button_item_title_icon_wrapper">
							<image mode="aspectFill" :src="$image(i.icon)"></image>
						</view>
						<view class="user_button_item_title_text_wrapper">{{ i.title }}</view>
					</view>
					<view class="user_button_item_icon_wrapper">
						<image :src="$image('/storage/assets/mp/user/箭头@2x.png')"></image>
					</view>
				</view>
				<view v-if="i.show" class="user_button_line_wrapper"></view>
			</template>
			<view v-if="!!user_info && !!user_info.id" @click="quitShow()" class="quit_button_wrapper">退出登录</view>
		</view>
		<view class="blank_wrapper"></view>
	</view>
</template>
<style>
	page {
		background: #ffffff;
	}
</style>
<style scoped>
	.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;
	}

	.quit_button_wrapper {
		width: 580rpx;
		height: 90rpx;
		background: linear-gradient(-90deg, #23D3AF, #0DC5CF);
		border-radius: 45rpx;
		font-size: 31rpx;
		font-weight: 500;
		color: #F6FDFD;
		line-height: 90rpx;
		text-align: center;
		margin: 347rpx auto 0;
	}

	.user_button_item_title_text_wrapper {
		font-size: 30rpx;
		font-weight: bold;
		color: #181818;
		line-height: 1;
		margin-left: 32rpx;
	}

	.user_button_line_wrapper {
		width: 599rpx;
		height: 1rpx;
		background: #E4E5E5;
		opacity: 0.5;
		margin: 0 auto;
	}

	.user_button_wrapper {
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 13rpx 2rpx rgba(146, 148, 148, 0.1);
		border-radius: 20rpx;
		margin: 60rpx auto 0;
		padding-bottom: 60rpx;
	}

	.user_button_item_icon_wrapper image {
		width: 13rpx;
		height: 21rpx;
		display: block;
	}

	.user_button_item_icon_wrapper {
		width: 13rpx;
		height: 21rpx;
		margin-right: 52rpx;
	}

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

	.user_button_item_title_icon_wrapper image {
		width: 56rpx;
		height: 62rpx;
		display: block;
	}

	.user_button_item_title_icon_wrapper {
		width: 56rpx;
		height: 62rpx;
		margin-left: 51rpx;
	}

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

	.user_card_button_wrapper {
		position: absolute;
		top: 50%;
		right: 30rpx;
		transform: translateY(-50%);
		width: 180rpx;
		height: 63rpx;
		background: #8EFFF9;
		border-radius: 32rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #0DC5CF;
		line-height: 63rpx;
		text-align: center;
		text-shadow: -1rpx 0rpx 0rpx rgba(216, 254, 252, 0.6);
	}

	.user_info_info_wrapper {
		margin-left: 25rpx;
	}

	.user_info_info_phone_wrapper {
		font-size: 28rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 1;
		margin-top: 24rpx;
	}

	.user_info_info_nickname_wrapper {
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 1;
	}

	.user_info_wrapper {
		display: flex;
		align-items: center;
		position: relative;
		margin-top: 70rpx;
	}

	.user_info_avatar_wrapper image {
		width: 120rpx;
		height: 120rpx;
		display: block;
		border-radius: 60rpx;
	}

	.user_info_avatar_wrapper {
		width: 120rpx;
		height: 120rpx;
		margin-left: 38rpx;
	}

	.user_bg_wrapper image {
		width: 750rpx;
		height: 520rpx;
	}

	.user_bg_wrapper {
		width: 750rpx;
		height: 520rpx;
		position: absolute;
		top: 0;
		z-index: -1;
	}
</style>