<template>
	<div>
		<!--增、查交易记录的按钮-->
		<el-button type="primary" round @click="openAddDialog" size="small">添加</el-button>
		<el-row>
			<el-col :span="24">
				<el-form :inline="true" :model="state.query" class="demo-form-inline">
					<el-form-item label="医生名称：">
						<el-input v-model="state.query.userName" placeholder="请输入医生名称" clearable @input="init" />
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<!--表格-->
		<el-row>
			<el-col :span="24">
				<el-tabs v-model="state.query.audit"  @tab-click="handleClick">
					<el-tab-pane v-for="item in state.getStatus" :label="item.name" :name="item.status">
						<el-table v-loading="loading"  :data="state.getList">
							<!--					列表结开始-->
							<el-table-column prop="nickName" label="医生编号" align="center"/>
							<el-table-column prop="userName" label="姓名" align="center"/>
							<el-table-column prop="yearsExperience" label="工作经验" align="center"/>
							<el-table-column prop="graduationSchool" label="毕业学校" align="center"/>
							<el-table-column prop="phone" label="联系电话" width="120" align="center"/>
							<el-table-column prop="sex" label="性别" align="center">
								<template #default="{ row }">
									{{ row.sex === 1? '男' : '女' }}
								</template>
							</el-table-column>
							<el-table-column prop="amount" label="挂号费用" align="center" />
							<el-table-column prop="departmentName" label="所属科室" align="center"/>
							<el-table-column prop="img" label="医生图片">
								<template #default="{ row }">
									<!-- 点击图片后显示弹框预览 -->
									<el-image
										style="width: 50px;height: 50px"
										:src="row.img"
										fit="cover"
										:preview-src-list="[row.img]"
										:preview-teleported="true"
									/>
								</template>
							</el-table-column>
							<el-table-column prop="intro" label="简介" align="center"  width="220"/>
							<el-table-column prop="position" label="职称" align="center"/>
							<el-table-column prop="amount" label="挂号费用" align="center"/>
							<el-table-column prop="aptitude" label="医生资质" align="center">
								<template #default="{ row }">
									<!-- 点击图片后显示弹框预览 -->
									<el-image
										style="width: 50px;height: 50px"
										:src="row.aptitude"
										fit="cover"
										:preview-src-list="[row.aptitude]"
										:preview-teleported="true"
									/>
								</template>
							</el-table-column>
							<!--列表结束-->
							<el-table-column label="操作" align="center"  width="260">
								<template #default="scope">
									<el-button @click="edit(scope.row)" size="small">编辑</el-button>
									<el-button v-if="scope.row.audit == 0 " @click="edit(scope.row)" size="small">审核资质</el-button>
									<el-button @click="del(scope.row.id)" type="danger" size="small">删除</el-button>
								</template>
							</el-table-column>
							<template v-slot:empty>
								<el-empty description="数据去外太空了~" />
							</template>
						</el-table>
					</el-tab-pane>
				</el-tabs>
				<!-- 分页控件 -->
				<el-pagination
					v-if="state.query.total > 0"
					:current-page="state.query.page"
					:page-size="state.query.limit"
					:total="state.query.total"
					background layout="prev, pager, next"
					@current-change="handlePageChange"
				/>
			</el-col>
		</el-row>
		<!-- 新增/编辑对话框 -->
		<el-dialog v-model="state.dialogVisible" title="新增" width="50%">
			<el-form
				:model="state.formData"
				ref="formRef"
				label-width="100px"
			>
				<!--				表单开始===============================================================================================================================-->
				<el-form-item label="登录账号" prop="nickName" :rules="[{ required: true, message: '请输入登录账号', trigger: 'blur' }]">
					<el-input v-model.number="state.formData.nickName"/>
				</el-form-item>
				<el-form-item label="登录密码" >
					<el-input v-model.number="state.formData.password" type="password" clearable/>
				</el-form-item>
				<el-form-item label="姓名" prop="userName" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
					<el-input v-model="state.formData.userName"/>
				</el-form-item>
				<el-form-item label="医生照片" prop="img" :rules="[{ required: true, message: '请插入图片', trigger: 'blur' }]">
						<image-upload @update:imageUrl="handleImageUrl"  :image-url="state.formData.img"></image-upload>
				</el-form-item>
				<el-form-item label="工作经验" prop="yearsExperience" :rules="[{ required: true, message: '请输入工作经验', trigger: 'blur' }]">
					<el-input v-model.number="state.formData.yearsExperience"/>
				</el-form-item>
				<el-form-item label="毕业学校" prop="graduationSchool" :rules="[{ required: true, message: '请输入毕业学校', trigger: 'blur' }]">
					<el-input v-model="state.formData.graduationSchool"/>
				</el-form-item>
				<el-form-item label="联系电话" prop="phone" :rules="[{ required: true, message: '请输入联系电话', trigger: 'blur' }]">
					<el-input v-model.number="state.formData.phone"/>
				</el-form-item>
				<el-form-item label="性别" prop="sex" :rules="[{ required: true, message: '请输入性别', trigger: 'blur' }]">
					<el-select v-model="state.formData.sex" placeholder="请选择性别">
						<el-option label="男" :value=1></el-option>
						<el-option label="女" :value=2></el-option>
						<el-option label="其他" :value=0></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="所属科室" prop="departmentId" :rules="[{ required: true, message: '请输入所属科室', trigger: 'blur' }]">
					<el-select v-model="state.formData.departmentId" placeholder="请选择所属科室">
						<el-option
							v-for="item in state.getDepart"
							:label="item.name"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="简介" prop="intro" :rules="[{ required: true, message: '请输入简介', trigger: 'blur' }]">
					<el-input v-model="state.formData.intro"  :rows="4"
										type="textarea"/>
				</el-form-item>
				<el-form-item label="职称" prop="position" :rules="[{ required: true, message: '请输入职称', trigger: 'blur' }]">
					<el-select v-model="state.formData.position" placeholder="请选择所属科室">
						<el-option
							v-for="item in state.getPosition"
							:label="item.name"
							:value="item.name">
						</el-option>

					</el-select>
				</el-form-item>
				<el-form-item label="挂号费用" prop="amount" :rules="[{ required: true, message: '请输入简介', trigger: 'blur' }]">
					<el-input v-model.number="state.formData.amount"  placeholder="挂号费用"/>
				</el-form-item>
				<el-form-item label="医生资质" prop="aptitude" :rules="[{ required: true, message: '请插入医生资质', trigger: 'blur' }]">
					<image-upload @update:imageUrl="handleImageUrlaptitude"  :image-url="state.formData.aptitude"></image-upload>
				</el-form-item>
				<el-form-item label="是否通过" prop="sex" :rules="[{ required: true, message: '请选择', trigger: 'blur' }]">
					<el-select v-model="state.formData.audit" placeholder="请选择">
						<el-option label="通过"   :value=1></el-option>
						<el-option label="未审核" :value=0></el-option>
						<el-option label="不通过" :value=2></el-option>
					</el-select>
				</el-form-item>

				<!--表单结束===============================================================================================================================-->
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="state.dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveTransaction(formRef)">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script setup lang="ts">
// 交易记录数据
import type { FormInstance, TabsPaneContext } from 'element-plus'
const formRef = ref<FormInstance>()
const loading = ref(true)
const state = reactive(<any>{
	route:"sys/doctors",
	dialogVisible:false,
	getStatus:[
		{name:"已审核",status:1},
		{name:"未审核",status:0},
		{name:"不通过",status:2},
	],
	getList: [],//获取数据
	getDepart: [],
	getPosition: [],
	query:{
		total: 0, // 总记录数
		page: 1, // 当前页码
		limit: 5, // 每页显示的记录数
		userName: "",
		audit: 1,
	},
	formData:{}
})

// 医生照片
function handleImageUrl(path: string) {
	state.formData.img = path
}
function handleImageUrlaptitude(path: string) {
	state.formData.aptitude = path
}

const handleClick = (tab: TabsPaneContext, event: Event) => {
	const selectedStatus = state.getStatus[tab.index].status;
	state.query.audit = selectedStatus;
	init()
}

// 获取交易记录
const init = () => {
	adminRequest.get(`${state.route}/page`, {
		params: state.query
	}).then((res:any) => {
		state.getList = res.data.list
		state.query.total = res.data.total
	}).finally(() => {
		loading.value = false
	})
	adminRequest.get(`sys/departments/list`).then((res:any) => {
		state.getDepart = res.data
	})

	adminRequest.get(`sys/position/page?limit=9999`).then((res:any) => {
		state.getPosition = res.data.list
	})


}
// 新增交易记录
const openAddDialog = () => {
	state.formData = {
		sort:1
	}
	state.dialogVisible = true
}
// 编辑交易记录
const edit = (row: any) => {
	state.formData = row
	delete  state.formData.password
	state.dialogVisible = true
}
// 保存记录
const saveTransaction = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate((valid) => {
		if (valid) {
			if (state.formData.id) {
				// 更新交易记录
				  adminRequest.put(`${state.route}`, state.formData).then(() =>{
						init()
						state.dialogVisible = false
						ElMessage.success("提交成功~")
					})
			} else {
				// 新增交易记录
				adminRequest.post(`${state.route}`, state.formData).then(() =>{
					init()
					state.dialogVisible = false
					ElMessage.success("提交成功~")
				})
			}

		}
	})
}
// 删除交易记录
const del = async (id: number) => {
	try {
		await adminRequest.delete(`${state.route}/${id}`)
		init()
		ElMessage.success("删除成功~")
	} catch (error) {
		ElMessage.error("删除失败~")
	}
}

// 页码改变时的处理函数
const handlePageChange = (page: number) => {
	state.query.page = page
	init()
}
// 页面加载时获取交易记录
onMounted(() => {
	init()
})
</script>
<style scoped>
.dialog-footer {
	text-align: right;
}
:deep(.el-upload) {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

:deep(.el-upload:hover) {
	border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
.avatar{
	width: 178px;
  height: 178px;
  object-fit: cover;
}

</style>
<route lang="json">
{
"meta": {
"layout": "admin"
}
}
</route>
