<template>
	<el-row :gutter="20" class="info">
		<el-col :span="5">
			<!-- Doctor Image -->
			<el-image :src="state.info.img" fit="contain" class="doctor-image" />
		</el-col>
		<el-col :span="14">
			<!-- Doctor Name and Graduation School -->
			<h1 class="doctor-name">{{ state.info.userName }} ({{ state.info.graduationSchool }})</h1>
			<!-- Introduction and Details -->
			<div class="introduction" v-if="state.info.position">
				<span class="label">职称:</span> {{ state.info.position }}
			</div>
			<div class="introduction" v-if="state.info.specialty">
				<span class="label">专业领域: </span>{{ state.info.specialty }}
			</div>
			<div class="introduction" v-if="state.info.phone">
				<span class="label">联系电话: </span>{{ state.info.phone }}
			</div>
			<div class="introduction" v-if="state.info.yearsExperience">
				<span class="label">临床经验: </span>{{ state.info.yearsExperience }}年
			</div>
			<div class="introduction" v-if="state.info.yearsExperience">
				<span class="label">挂号费用: </span><span style="color: #FF0000">{{ state.info.amount }}</span>元
			</div>

			<!-- Doctor Introduction -->
			<div class="tag">
				<span class="label">简介: {{ state.info.intro }}</span>
			</div>

			<!-- Action Buttons -->
			<div class="operate">

				<el-button type="primary" @click="handleBuy" class="action-button">预约挂号</el-button>
				<el-button type="primary" @click="dialogVisible = true" class="action-button">电话联系</el-button>
			</div>
		</el-col>
	</el-row>

	<!-- Drawer for Purchase -->
	<el-drawer
		v-model="buyDrawer"
		title="预约"
		size="50%">
		<el-form ref="formRef"
						 :model="state.buyForm"
						 label-width="auto"
						 label-position="top">
			<el-form-item label="医生姓名">
				<el-input disabled v-model="state.buyForm.userName" />
			</el-form-item>
			<el-form-item label="医生联系电话">
				<el-input disabled v-model="state.buyForm.phone" />
			</el-form-item>
			<el-form-item label="预约时间"
										prop="appointmentTime"
										:rules="[
        {
          required: true,
          message: '请选择预约时间',
          trigger: 'blur',
        }
      ]">
				<el-date-picker
					v-model="state.buyForm.appointmentTime"
					type="datetime"
					placeholder="请选择"
					format="YYYY-MM-DD HH:mm:ss"
					value-format="YYYY-MM-DD HH:mm:ss"
					:disabled-date="disabledDate"
					:disabled-time="disabledTime"
					:style="{ width: '100%' }"
				/>
			</el-form-item>

			<el-form-item label="支付金额">
				<el-link type="danger">{{ state.buyForm.amount }} 元</el-link>
			</el-form-item>

			<el-form-item label="患者备注">
				<el-input v-model="state.buyForm.remark" :rows="2"
									type="textarea" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="buySubmitForm(formRef)">立即预约</el-button>
			</el-form-item>
		</el-form>
	</el-drawer>

	<el-dialog
		v-model="dialogVisible"
		title="电话联系"
		width="500"
	>
		<span>{{ state.info.phone }}</span>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" @click="dialogVisible = false">
					确定
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
import { reactive } from 'vue'
import type { FormInstance } from 'element-plus'
const dialogVisible = ref(false)
const buyDrawer = ref(false)
const formRef = ref<FormInstance>()

import { useRoute } from 'vue-router'
const route = useRoute()
const itemId:number = route.params.id
const state = reactive(<any>{
	info: {},
	buyForm: {
		id: null,
		title: '',
		appointmentTime: 1,
		total: 0
	}
})

// 深度监听 route.params.id
watch(() => route.params.id,
	(newId) => {
		window.location.href = `/info/${newId}`
	},
	{ deep: true }
)
/**
 * 跳转
 */
const to = (id:number) => {
	router.push(`/medic/${id}`)
}
function init() {
	frontRequest.get(`/api/doctors/${itemId}`).then(response => {
		state.info = response.data
	})
}

onMounted(() => {
	init()
})

// Function to disable dates before today
const disabledDate = (current) => {
	// Disable previous dates (cannot select yesterday or earlier)
	return current && current < new Date().setHours(0, 0, 0, 0)
}

// Function to disable times outside 8:00 AM to 5:00 PM
const disabledTime = () => {
	return {
		// Disable hours before 8 AM or after 5 PM
		disabledHours: () => {
			let hours = []
			for (let i = 0; i < 8; i++) hours.push(i) // Disable hours before 8
			for (let i = 18; i < 24; i++) hours.push(i) // Disable hours after 5
			return hours
		},
		// Disable minutes and seconds (optional, can be modified to your needs)
		disabledMinutes: (hour) => {
			if (hour < 8 || hour > 17) return [] // Disable minutes for disabled hours
			return []
		},
		disabledSeconds: () => {
			return [] // Optionally disable seconds (if you want precision control)
		}
	}
}

/**
 * 预约按钮提交
 * @param formEl
 */
const buySubmitForm = (formEl: FormInstance | undefined) => {
	state.buyForm.itemId = itemId
	if (!formEl) return
	formEl.validate((valid) => {
		if (valid) {
			delete  state.buyForm.id
			state.buyForm.pay = "save"
			// frontRequest.get('/api/alipay/pay',{params: state.buyForm, responseType: 'text/html'}).then(res => {
			// 	// 3. 在新窗口打开支付页面
			// 	const newWindow = window.open('', '_blank');
			// 	newWindow.document.write(res);
			// })
			frontRequest.post('api/order', state.buyForm).then(res => {
				router.push("/order")
			})
		}
	})
}
/**
 * 预约按钮
 */
const handleBuy = () => {
	buyDrawer.value = true
	state.buyForm = state.info

	console.log(	state.buyForm)
}

</script>

<style scoped>
.info {
	background-color: #f5f8fa;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

.doctor-image {
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.doctor-name {
	font-size: 36px;
	font-weight: 700;
	color: #2d3748;
	margin-bottom: 20px;
}

.introduction {
	font-size: 16px;
	color: #555;
	margin-bottom: 12px;
}

.introduction .label {
	font-weight: 700;
	color: #2d3748;
}

.tag {
	margin-top: 20px;
	font-size: 16px;
	color: #2d3748;
}

.operate {
	margin-top: 30px;
	display: flex;
	gap: 10px;
}

.action-button {
	width: 150px;
	padding: 12px;
	font-size: 16px;
	text-align: center;
}

.el-drawer {
	padding: 20px;
	background-color: #fff;
}

.el-drawer__header {
	background-color: #3b82f6;
	color: white;
}

.el-form-item {
	margin-bottom: 20px;
}

.el-input,
.el-input-number {
	width: 100%;
}

.el-button {
	width: 100%;
	padding: 10px;
	font-size: 16px;
	border-radius: 6px;
	background-color: #3b82f6;
	color: white;
}

.el-button:hover {
	background-color: #2563eb;
}
</style>

