<template>
	<view>
		<view class="px-24rpx py-20rpx bg-[f2f2f2] min-h-[calc(100vh-230rpx)]">
			<view class="rounded-16rpx bg-#fff pt-24rpx pb-16rpx">
				<view class="flex items-center">
					<view
						class="relative flex-1 flex-col items-center flex"
						v-for="item in list"
						:key="item.id"
					>
						<image
							:src="
								current >= item.id
									? $assets('/step-active.png')
									: $assets('/step.png')
							"
							class="w-76rpx h-76rpx"
						/>
						<text class="text-white absolute top-18rpx z-10 text-28rpx">{{
							item.id
						}}</text>
						<view
							:class="current >= item.id ? 'text-#FF8CA6' : 'text-#999'"
							class="text-24rpx mt-12rpx"
							>{{ item.label }}</view
						>
						<view
							v-if="item.id < list.length"
							:class="current >= item.id ? 'bg-#FF8CA6' : 'bg-#999'"
							class="step-line absolute left-77% top-30% h-4rpx w-46% rounded-md"
						></view>
					</view>
				</view>
			</view>
			<view
				@click="handleShowPicker"
				class="rounded-16rpx bg-#fff pt-24rpx pr-16rpx pl-30rpx pt-36rpx pb-34rpx my-20rpx flex items-center justify-between"
			>
				<text class="text-34rpx font-bold">服务项目</text>
				<u-icon
					:label="typeVal"
					space="20rpx"
					labelColor="#FF8CA6"
					labelSize="28rpx"
					labelPos="left"
					name="arrow-right"
					width="48rpx"
					height="48rpx"
					color="#666"
					bold
				/>
			</view>
			<view class="rounded-16rpx overflow-hidden bg-#fff px-20rpx pb-20rpx">
				<u--form
					labelPosition="left"
					:model="model"
					:rules="rules"
					ref="formRef"
					borderBottom
					errorType="border-bottom"
					labelWidth="auto"
				>
					<u-form-item
						v-for="item in formList"
						:key="item.key"
						:required="item.required"
						:label="item.label"
						:prop="item.key"
					>
						<u--input
							v-if="item.type === 'string'"
							v-model="model[item.key]"
							border="none"
							inputAlign="right"
							:placeholder="item.placeholder"
							:readonly="current > 1"
							maxlength="200"
						/>
						<!-- model[item.key] ? item.type === 'date' ? $u.timeFormat(model[item.key], 'yyyy-mm-dd') : model[item.key] : item.placeholder -->
						<view
							v-else
							@click="item.show = true"
							class="w-full text-right u-line-1 pl-2"
							:class="item.val ? '' : 'text-#C0C4CC'"
							>{{ item.val || item.placeholder }}
						</view>
					</u-form-item>
				</u--form>
				<view
					v-if="[4, 5].includes(curType)"
					class="mt-32rpx mb-10rpx text-28rpx"
				>
					<view
						>{{ curType === 5 ? '挂号' : '取报告' }}凭证<text
							class="u-form-item__body__left__content__required text-#f56c6c ml-4rpx"
							>*</text
						>
					</view>
					<view class="mb-10rpx text-24rpx text-#999"
						>请勿上传与医保卡相关图片</view
					>
					<upload-img
						v-model="fileList"
						disabled
						multiple
						:maxCount="10"
					></upload-img>
				</view>
				<view class="mt-22rpx mb-20rpx text-28rpx">备注</view>
				<u--textarea
					v-model="model.remark"
					placeholder=""
					maxlength="300"
					count
					:autoHeight="false"
				/>
				<view class="text-28rpx mt-20rpx mb-8rpx">注意事项</view>
				<view class="text-24rpx text-#999">
					1. 服务项目为必填项
					<br />
					2. 服务时间为必填项
					<br />
					3. 服务地点为必填项
					<br />
				</view>
				<agreed-comp v-model:agreed="agreed" />
			</view>

			<u-picker
				:show="show"
				:columns="columns"
				keyName="serveName"
				valueName="id"
				@confirm="onPickerConfirm"
				@cancel="show = false"
				@close="handleShowPicker"
				cancelText="取消"
				confirmColor="#FF8CA6"
				closeOnClickOverlay
			></u-picker>
			<block v-for="item in dateAndSelectFormList" :key="item.key">
				<u-datetime-picker
					v-if="item.type === 'date' || item.type === 'time'"
					v-model="model[item.key]"
					:show="item.show"
					:mode="item.type"
					:minDate="item.type === 'date' ? new Date().getTime() : 0"
					:minHour="item.type === 'time' ? new Date().getHours() : 0"
					:minMinute="item.type === 'time' ? new Date().getMinutes() : 0"
					@confirm="onDatePickerConfirm($event, item)"
					@cancel="item.show = false"
					@close="item.show = false"
					confirmColor="#FF8CA6"
					closeOnClickOverlay
				/>
				<u-picker
					v-if="item.type === 'select'"
					:show="item.show"
					:columns="item.options || columns"
					keyName="label"
					@confirm="onSelectPickerConfirm($event, item)"
					@cancel="item.show = false"
					@close="item.show = false"
					cancelText="取消"
					confirmColor="#FF8CA6"
					closeOnClickOverlay
				></u-picker>
				<u-popup
					v-if="item.type === 'checkbox'"
					class="overflow-hidden"
					:show="item.show"
					round="16rpx"
					@close="item.show = false"
					closeable
				>
					<view class="h-700rpx pt-90rpx relative">
						<view
							class="text-#000 absolute left-50% translate-x-[-50%] top-30rpx"
							>护理项目</view
						>
						<view
							class="h-full w-full overflow-y-auto py-4 px-30rpx rounded-16rpx overflow-hidden"
						>
							<popup-checkbox @change="onCheckboxChange($event, item)" />
						</view>
					</view>
				</u-popup>
			</block>
		</view>
		<button-contact />
		<view
			class="bg-#fff h-150rpx w-full sticky bottom-0 flex justify-between items-center pr-24rpx pl-40rpx pb-48rpx rounded-sm"
		>
			<block v-if="true">
				<view>
					<text class="text-32rpx">￥</text>
					<text class="font-bold text-54rpx">{{
						typeSelItem.price || 198
					}}</text>
				</view>
				<view
					@click="onSubmit"
					class="text-white bg-#FF8CA6 rounded-24rpx w-240rpx h-80rpx text-center leading-80rpx hover:shadow-md"
					>立即下单</view
				>
			</block>
			<view
				v-if="false"
				class="text-white bg-#FF8CA6 rounded-24rpx w-full mx-30rpx h-80rpx text-center leading-80rpx hover:shadow-md"
				>{{ true ? '开始服务' : '订单已完成，提交工作记录' }}</view
			>
		</view>
	</view>
</template>

<script setup>
import { useRoute } from '@/utils/uni-router'

const route = useRoute()
const instance = getCurrentInstance()
const { $u, $api, $Router, $Dialog } = instance.proxy
// 填写订单 在线支付 服务中 服务完成
const list = ref([
	{ label: '填写订单', id: 1 },
	{ label: '在线支付', id: 2 },
	{ label: '服务中', id: 3 },
	{ label: '服务完成', id: 4 }
])
const current = ref(1)
const show = ref(false)
const fileList = ref([
	{
		message: '',
		size: 20042,
		// status: 'success',
		thumb: 'http://tmp/Y2K3DucvbS0Aa23b6ba2697baa86a0eb579485736a6a.jpeg',
		type: 'image',
		url: 'https://xjl559.oss-cn-shanghai.aliyuncs.com/2023/12/08/3d4a506c74a145ba_Y2K3DucvbS0Aa23b6ba2697baa86a0eb579485736a6a.jpeg'
	}
])
// 半天陪诊 全天陪诊 代办约号 取送报告 代取送药 上门护理
const columns = reactive([
	[
		{ label: '半天陪诊', id: 1 },
		{ label: '全天陪诊', id: 2 },
		{ label: '代办约号', id: 3 },
		{ label: '取送报告', id: 4 },
		{ label: '代取送药', id: 5 },
		{ label: '上门护理', id: 6 }
	]
])
// 就诊医院 请输入, 预约就诊日期 请选择就诊日期,预约就诊时间 请选择就诊时间,就诊人,请填写就诊人,联系人 请填写就诊联系人,联系人手机号 请填写就诊联系人 ,挂号科室
const formItems = [
	{
		label: '收货地址',
		placeholder: '请输入收货地址',
		key: 'deliveryAddress',
		required: true,
		type: 'string',
		trigger: ['blur', 'change'],
		message: '请填写收货地址',
		show: true,
		cur: [4, 5],
		sort: 1
	},
	{
		label: '就诊医院',
		placeholder: '请输入',
		key: 'hospitalId',
		required: true,
		type: 'select',
		trigger: ['blur', 'change'],
		message: '请填写就诊医院',
		show: false,
		cur: [1, 2, 3, 4, 5],
		sort: 2
	},
	{
		label: '上门护理',
		placeholder: '请选择上门护理类型',
		key: 'hospitalId',
		required: true,
		type: 'checkbox',
		trigger: ['blur', 'change'],
		message: '请选择上门护理类型',
		show: false,
		cur: [6],
		sort: 1
	},
	{
		label: '服务时间',
		placeholder: '请选择服务时间',
		key: 'serviceTime',
		required: true,
		type: 'date',
		trigger: ['blur', 'change'],
		message: '请选择服务时间',
		show: false,
		sort: 3,
		cur: [4, 5]
	},
	{
		label: '报告类型',
		placeholder: '请选择报告类型',
		key: 'reportType',
		required: true,
		type: 'select',
		trigger: ['blur', 'change'],
		message: '请选择报告类型',
		show: false,
		sort: 3,
		cur: [4]
	},
	{
		label: '预约就诊日期',
		placeholder: '请选择就诊日期',
		key: 'clinicDate',
		required: true,
		type: 'date',
		trigger: ['blur', 'change'],
		message: '请选择预约就诊日期',
		show: false,
		sort: 3,
		cur: [1, 2]
	},
	{
		label: '预约就诊时间',
		placeholder: '请选择就诊时间',
		key: 'clinicTime',
		required: true,
		type: 'time',
		message: '请选择预约就诊时间',
		trigger: ['blur', 'change'],
		show: false,
		sort: 4,
		cur: [1, 2]
	},
	{
		label: '上门日期',
		placeholder: '请选择上门日期',
		key: 'visitDate',
		required: true,
		type: 'date',
		trigger: ['blur', 'change'],
		message: '请选择上门日期',
		show: false,
		sort: 3,
		cur: [6]
	},
	{
		label: '上门时间',
		placeholder: '请选择上门时间',
		key: 'visitTime',
		required: true,
		type: 'time',
		message: '请选择上门时间',
		trigger: ['blur', 'change'],
		show: false,
		sort: 4,
		cur: [6]
	},
	{
		label: '就诊人',
		placeholder: '请填写就诊人',
		key: 'clinicPerson',
		required: true,
		type: 'string',
		trigger: ['blur', 'change'],
		message: '请填写就诊人',
		show: true,
		sort: 5,
		cur: [1, 2]
	},
	{
		label: '就诊人',
		placeholder: '请填写就诊人',
		key: 'treatmenter',
		required: true,
		type: 'string',
		trigger: ['blur', 'change'],
		message: '请填写就诊人',
		show: true,
		sort: 5,
		cur: [5]
	},
	{
		label: '联系人',
		placeholder: '请填写联系人',
		key: 'contact',
		required: true,
		type: 'string',
		trigger: ['blur', 'change'],
		message: '请填写联系人',
		show: true,
		sort: 6,
		cur: [1, 2, 6]
	},
	{
		label: '联系人手机号',
		placeholder: '请填写联系人手机号',
		key: 'contactPhone',
		required: true,
		type: 'string',
		trigger: ['blur', 'change'],
		message: '请填写联系人手机号',
		show: true,
		sort: 7,
		cur: [1, 2, 4, 5, 6]
	},
	{
		label: '挂号科室',
		placeholder: '请选择挂号科室',
		key: 'registrationDept',
		required: true,
		type: 'string',
		trigger: ['blur', 'change'],
		message: '请选择挂号科室',
		show: true,
		sort: 8,
		cur: [1, 2]
	}
	// {
	// 	label: '备注',
	// 	placeholder: '请输入',
	// 	key: 'remark',
	// 	type: 'textarea',
	// 	required: false,
	// 	show: true
	// }
]
const dateAndSelectFormList = ref()
const formList = ref()
const model = ref({})
const typeSelItem = ref({}) //选择的服务项目
const curType = ref(route.query.cur ? +route.query.cur : columns[0][0].id)
const typeVal = ref('')
const rules = ref({})
const agreed = ref(true)
const hospitalList = ref([])

const getPzList = async () => {
	const res = await $api.fetchPzServerList()
	columns[0] = res?.page?.list || []
}

const getPzHospitalList = async () => {
	const res = await $api.fetchPzHospitalList()
	hospitalList.value = (res?.page?.list || []).map((item) => ({
		label: item.name,
		id: item.id
	}))
}

getPzList()
getPzHospitalList()

const onSubmit = () => {
	console.log('submit', fileList.value)
}

watchEffect(() => {
	const item = columns[0].find((item) => item.id === curType.value)
	typeVal.value = item?.serveName
	dateAndSelectFormList.value = []
	formList.value = []
	formItems.forEach((item) => {
		const { required, key, message, trigger, type } = item
		if (item.cur.includes(curType.value)) {
			if (item.key === 'hospitalId') item.options = [hospitalList.value]
			formList.value.push(item)
			// if (['date', 'time', 'select'].includes(type)) {
			if (item.type !== 'string') {
				dateAndSelectFormList.value.push(item)
			}
		}
		rules.value[item.key] = { required, message, trigger }
		model.value[key] = ''
	})
})

const handleShowPicker = () => {
	if (current.value > 1) {
		return
	}
	show.value = !show.value
}
const onPickerConfirm = ({ value: [val] }) => {
	show.value = false
	typeVal.value = val.serveName
	curType.value = val.id
	typeSelItem.value = val
}
// 列表选择器
const onSelectPickerConfirm = ({ value: [val] } = { value: [] }, item) => {
	item.show = false
	model.value[item.key] = val?.id
	item.val = val?.label
}
const onDatePickerConfirm = ({ value }, item) => {
	item.show = false
	if (item.type === 'date') {
		item.val = model.value[item.key] = $u.timeFormat(value, 'yyyy-mm-dd')
	} else item.val = model.value[item.key] = value
}
// 护理项目点击
const onCheckboxChange = (val, item) => {
	model.value[item.key] = val
	item.val = val.join(',')
}
</script>

<style lang="scss" scoped>
:deep {
	.u-form-item__body {
		border-bottom: 2rpx solid #f2f2f2;
		padding: 32rpx 0 !important;
	}
	.u-form-item__body__left__content__required {
		// margin-left: 6rpx;
		font-size: 24rpx !important;
		top: 0rpx !important;
		right: -6rpx !important;
		left: auto !important;
	}
	.u-popup__content {
		border-radius: 16rpx 16rpx 0 0;
	}
	.u-textarea,
	.u-textarea__count {
		background-color: #f2f2f2 !important;
	}
	.u-popup__content {
		overflow: hidden;
	}
}
</style>
