<script setup>
	/**
	 * name：
	 * user：myddc
	 * date：2024年9月14日 20:05:05
	 */
	import {
		ref,
		computed
	} from 'vue'
	import {
		$image,
		$api,
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from '@/store'
	const $store = useStore()

	const combo_active = ref('')
	const person_active = ref('')
	const selectItemClick = (type, value) => {
		select_active.value[type] = value
	}

	const combo_select = ref({
		combo: [],
		person: [],
	})

	const getmyddcSelect = async () => {
		uni.showLoading()
		const response = await $api('ComboSelect') //目前请求的套餐 头的接口
		uni.hideLoading()
		$response(response, () => {
			combo_select.value = response.data
			getComboList()
		})
	}

	const myddc_list = ref({
		list: [],
		hospital: {
			id: 0
		},
		doctor: {
			id: 0
		},
		info: {
			name: ''
		},
		totalPage: {
			dqpage: 1,
			total: 2
		},
		dqpf: '', //当前评分
		dxSelect: [], //评分类型
		dcLists: []
	})

	const getComboList = async () => {
		uni.showLoading()
		const response = await $api('ComboList', {
			doctor: $store.save.doctor,
			hospital: hospital_active.value,
		})
		uni.hideLoading()

		$response(response, () => {
			console.log(response.data, 'response.data')
			myddc_list.value = {
				...response.data,
				totalPage: {
					dqpage: 1,
					total: 2
				},
				dxSelect: [{
						text: '5分',
						value: 5
					}, {
						text: '4分',
						value: 4
					}, {
						text: '3分',
						value: 3
					},
					{
						text: '2分',
						value: 2
					}, {
						text: '1分',
						value: 1
					},
				],
				dcLists: [{
						id: 1,
						nr: '第一题',
						title: 'A. 您对本次体检服务的整体评价'
					},
					{
						id: 2,
						nr: '第二题',
						title: 'E2 您是否有其他建议:'
					},
					{
						id: 3,
						nr: '第三题',
						title: 'B2 您是否有其他建议:'
					},
				]
			}
		})
	}

	const hospital_active = ref(0)
	const checkHospital = () => {
		let hospital_id = $store.save.hospital
		if (!hospital_id) {
			hospital_id = $store.config.hospital[0].id
		}
		hospital_active.value = hospital_id

		getmyddcSelect()
	}

	const config_ref = ref(null)
	const configRef = (e) => {
		if (!config_ref.value) {
			config_ref.value = e
			checkHospital()
		}
	}

	const select_drawer_ref = ref(null)
	const selectDrawerRef = (e) => {
		select_drawer_ref.value = e
	}
	const select_active = ref({
		combo: '',
		person: '',
	})
	const popup_ref = ref(null)
	const popupRef = (e) => {
		console.log(e, 'e')
		if (!popup_ref.value) {
			popup_ref.value = e
		}
	}

	const sumbilt = () => {
		popup_ref.value.open()
		console.log(popup_ref.value, 'value')
	}
	const closePop = () => {
		popup_ref.value.close()
		console.log(popup_ref.value, 'value')
	}
	 
	const pageNavigation = (type) => {
		console.log(type)
		let {
			totalPage
		} = myddc_list.value
		if (type == '+') {
			//当前点击为上一题。
			//判断当前是不是第一题 
			if (totalPage.dqpage > 1) {
				totalPage.dqpage -= 1
			}
			// 满足条件当前状态+1

		}
		if (type == '-') {
			//当前点击为下一题。
			console.log(myddc_list.value)

			if (totalPage.dqpage < totalPage.total) {
				totalPage.dqpage += 1
			}
		}
		console.log(totalPage.dqpage)

	}

	onShow(() => {
		if (!!config_ref.value) {
			checkHospital()
		}
	})
</script>
<template>
	<view>
		<view v-if="!!$store.config">
			<view :ref="configRef"></view>
		</view>

		<view class="header_wrapper">
			<view v-if="!!myddc_list.hospital.id" class="hospital_wrapper">
				<view class="hospital_icon_wrapper">
					<image src="@/static/assets/dingwei@2x.png"></image>
				</view>
				<view class="hospital_name_wrapper">{{ myddc_list.hospital.name }}</view>
				<view class="hospital_select_wrapper">
					<image src="@/static/assets/gengduo@2x.png"></image>
				</view>
			</view>
			<view v-if="!! myddc_list.info.name" class="user_wrapper">
				<view class="user_title_wrapper">就诊人：</view>
				<view class="user_name_wrapper">{{ myddc_list.info.name }}</view>
				<view v-if="myddc_list.info.count > 1" class="user_choose_wrapper">
					<image src="@/static/assets/qiehuan@2x.png"></image>
				</view>
			</view>
		</view>

		<view class="myddc">
			<view class="myddc_avatar_wrapper">
				<image src="@/static/assets/slices/slices@3x.png"></image>
			</view>
			<view class="myddc_text">
				<view class="title">满意度调查</view>
				<view class="nr">
					尊敬的先生/女士,为了能够更好地为您进行健康评估,请您认真填写以下问卷。
				</view>
			</view>
		</view>
		<view class="myddc_total">
			共<span class="page_color">{{myddc_list.totalPage.total}}</span> 题/第 <span
				class="page_color">{{myddc_list.totalPage.dqpage}}</span> 题
		</view>
		<view class="tm_list">
			<view class="tm_list_title">
				{{ myddc_list.dcLists[myddc_list.totalPage.dqpage-1]?myddc_list.dcLists[myddc_list.totalPage.dqpage-1].title:''}}

			</view>
			<view v-show="myddc_list.totalPage.dqpage ==1">

				<view class="tm_list_boby">
					<!-- <view class="text">单选选中：{{JSON.stringify(myddc_list.dqpf)}}</view> -->
					<uni-data-checkbox selectedColor="#EEA61E" selectedTextColor="#0C0C0C" v-model="myddc_list.dqpf"
						:localdata="myddc_list.dxSelect"></uni-data-checkbox>

				</view>
			</view>
			<view v-show="myddc_list.totalPage.dqpage == 2">

				<view class="tm_list_boby">
					<!-- v-model="value" -->
					<view class="uni-textarea">
						<textarea   size="14"  placeholder=" " />
					</view>
					<!-- <uni-easyinput   type="textarea" placeholder=" "></uni-easyinput> -->
				</view>
			</view>

			<view class="tm_list_br" />
			<view class="tm_list_foot">
				<view @click="pageNavigation('+')">
					<span style="opacity: 0.7;margin-right: 5rpx;"> &lt;</span>
					上一题
				</view>
				<view @click="pageNavigation('-')">
					下一题
					<span style="opacity: 0.7;margin-left: 5rpx;"> &gt;</span>
				</view>

			</view>
		</view>
		<view @click="sumbilt(i)" class="tm_list_choose_wrapper">提交</view>

		<uni-popup :ref="popupRef" type="center">
			<view class="popupBox">
				<view class="popupBox_text">
					您的反馈我们已经收到，感谢您参与 满意度调查！
				</view>
				<view @click="closePop" class="popupBox_comfirm">确定</view>
			</view>
		</uni-popup>

	</view>
</template>
<style scoped>
	::v-deep .uni-data-checklist .checklist-group {
		flex-direction: column !important;
	}

	::v-deep .uni-data-checklist .checklist-group .checklist-box {
		margin: 15rpx 0 !important;
	}

	.myddc {
		display: flex;
		align-items: center;
		width: 750rpx;
		margin: 0 auto;
	}

	.myddc_text .title {
		width: 160rpx;
		height: 31rpx;
		font-weight: 500;
		font-size: 31rpx;
		color: #3F3A3A;
		line-height: 40rpx;
		margin: 43rpx 0 25rpx;
	}

	.myddc_text .nr {
		color: #898989;
		width: 480rpx;
		height: 57rpx;
		font-weight: 400;
		font-size: 22rpx;
		color: #898989;
		line-height: 32rpx;

	}

	.myddc_avatar_wrapper {
		width: 82rpx;
		height: 82rpx;
		margin: 56rpx 38rpx 0 78rpx;
	}

	.myddc_avatar_wrapper image {
		width: 82rpx;
		height: 82rpx;
	}

	.myddc_total {
		width: 750rpx;
		height: 27rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #0E0E0E;
		line-height: 66rpx;
		text-align: right;
		padding-right: 80rpx;
		box-sizing: border-box;
		margin: 0 auto;
	}

	.page_color {
		color: #239EA3;
	}

	.tm_list {
		width: 690rpx;
		/* height: 620rpx; */
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 15rpx;
		/* display: flex; */
		margin: 42rpx auto 0;
	}

	.tm_list_title {
		padding: 40rpx 0 27rpx 50rpx;
		width: 428rpx;
		/* height: 31rpx; */
		font-weight: 500;
		font-size: 30rpx;
	}

	.uni-textarea {
		border-radius: 6rpx;
		border: 1px solid #A1A0A0;
		height: 100%; 
		padding: 5rpx 10rpx;
		
	}

	.tm_list_boby {
		height: 353rpx;
		margin-left: 45rpx;
		width: 600rpx;
		height: 353rpx;
		background: #FFFFFF;

		padding: 5rpx 10rpx;
	}

	.tm_list_br {
		width: 600rpx;
		height: 1rpx;
		background: #DEDEDF;
		margin: 48rpx 45rpx 27rpx;
	}

	.tm_list_foot {
		margin: 0 45rpx;
		display: flex;
		justify-content: space-between;
		font-weight: 400;
		font-size: 26rpx;
		color: #0E0E0E;
	}

	.tm_list_choose_wrapper {
		width: 515rpx;
		height: 94rpx;
		background: #239EA3;
		border-radius: 47rpx;
		color: #fff;
		text-align: center;
		line-height: 94rpx;
		margin: 33rpx auto;
	}

	.popupBox {
		width: 710rpx;
		height: 420rpx;
		background: #FFFFFF;
		border-radius: 15rpx;
		padding: 66rpx 0 41rpx 0;
		box-sizing: border-box;
	}

	.popupBox_text {
		margin: 0 auto 41rpx;
		text-align: center;
		padding: 66rpx 60rpx;
		box-sizing: border-box;
		width: 608rpx;
		height: 202rpx;
		background: rgba(242,242,242,0.5);

	}

	.popupBox_comfirm {
		width: 270rpx;
		height: 74rpx;
		background: #239EA3;
		border-radius: 10rpx;
		text-align: center;
		margin: 0 auto;
		line-height: 74rpx;
		color: #fff;
	}

	.doctor_name_wrapper {
		font-weight: 400;
		font-size: 24rpx;
		line-height: 1;
		color: #FFFFFF;
		border-bottom: 1rpx solid #FFFFFF;
	}

	.doctor_tip_wrapper {
		font-weight: 400;
		font-size: 22rpx;
		line-height: 1;
		color: #FFFFFF;
	}

	.doctor_wrapper {
		display: flex;
		align-items: center;
		width: 710rpx;
		height: 70rpx;
		background: #28B7C1;
		border-radius: 15rpx 15rpx 0rpx 0rpx;
		padding-left: 24rpx;
		margin: 10rpx auto 0;
	}

	.user_choose_wrapper {
		width: 50rpx;
		height: 50rpx;
		margin-left: 30rpx;
	}

	.user_choose_wrapper image {
		width: 50rpx;
		height: 50rpx;
		display: block;
		object-fit: contain;
	}

	.user_title_wrapper {
		font-weight: 400;
		font-size: 28rpx;
		color: #239EA3;
		line-height: 1;
	}

	.user_name_wrapper {
		font-weight: 400;
		font-size: 28rpx;
		color: #0d0d0d;
		line-height: 1;
	}

	.user_wrapper {
		height: 80rpx;
		padding-left: 40rpx;
		padding-right: 20rpx;
		background: #FFFFFF;
		border-radius: 40rpx 0 0 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header_wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		height: 100rpx;
		background: #D8EDF2;
		margin: 0 auto;
	}

	.hospital_wrapper {
		display: flex;
		align-items: center;
		width: 50%;
	}

	.hospital_icon_wrapper {
		width: 48rpx;
		height: 48rpx;
		margin-left: 20rpx;
	}

	.hospital_icon_wrapper image {
		width: 48rpx;
		height: 48rpx;
		display: block;
		object-fit: contain;
	}

	.hospital_name_wrapper {
		font-weight: 400;
		font-size: 28rpx;
		color: #484747;
		margin-left: 9rpx;
		line-height: 1;
	}

	.hospital_select_wrapper {
		width: 24rpx;
		height: 14rpx;
		margin-left: 19rpx;
	}

	.hospital_select_wrapper image {
		width: 24rpx;
		height: 14rpx;
		display: block;
		object-fit: contain;
	}
</style>