<template>
	<div>
		<div class="head">
			<el-row>
				<el-form-item>
					<el-tag class="ml-2" type="success" style="margin-right: 8px;">类型</el-tag>
					<el-select filterable v-model="searchInfo.type" placeholder="体检类型" clearable style="width:130px; margin-right: 8px;">
						<el-option  label="健康证" value="1" />
						<el-option  label="老年人" value="2" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-tag class="ml-2" type="success" style="margin-right: 8px;">机构名称</el-tag>
					<el-select filterable v-model="searchInfo.orgId" placeholder="请选择体检机构" clearable>
						<el-option v-for="(item, index) in org_list" :key="index" :label="item.org_name"
							:value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input v-model="searchInfo.userinfo" placeholder="姓名/身份证" />
				</el-form-item>
				<el-form-item>
					<el-tag class="ml-2" type="success" style=" margin-left: 8px;margin-right: 8px;">时间段</el-tag>
					<div>
						<el-date-picker v-model="searchInfo.dateRange" value-format="YYYY-MM-DD" type="daterange"
							range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
					</div>
				</el-form-item>

				<!-- <el-form-item>
					<el-tag class="ml-2" type="success" style=" margin-right: 20px;">体检状态</el-tag>
					<el-radio-group v-model="searchInfo.status">
						<el-radio :label="1">待检</el-radio>
						<el-radio :label="2">已检</el-radio>
					</el-radio-group>
				</el-form-item> -->
				<el-form-item>

					<el-button type="primary" style="margin-left: 20px;" @click="GetList">搜索</el-button>
				</el-form-item>

			</el-row>

		</div>
		<el-table :data="tableData" style="width: 100%;" row-key="id" v-loading="loading">
			<el-table-column prop="id" label="Id" width="80" />
			<el-table-column prop="org_name" label="体检机构名称">
				<template #default="scope">
					<span v-if="scope.row.org_name">{{scope.row.org_name}}</span>
					<span v-else style="color: #ccc;">暂无</span>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="体检人姓名"  width="100"/>
			<el-table-column prop="id_card_num" label="证件号" />
			<el-table-column prop="type" label="体检类型"  width="100">
				<template #default="scope">
					<el-tag v-if="scope.row.type==1" class="ml-2" type="success">健康证</el-tag>
					<el-tag v-if="scope.row.type==2" class="ml-2" type="warning">老年人</el-tag>
				</template>
			</el-table-column>
			<!-- <el-table-column prop="status" label="预约状态" width="100">
			<template #default="scope">
				 <el-tag v-if="scope.row.status==0" class="ml-2" type="info">取消</el-tag>
				 <el-tag v-if="scope.row.status==1"  class="ml-2" type="success">待检</el-tag>
				 <el-tag v-if="scope.row.status==2"  class="ml-2" type="warning">已体检</el-tag>
			</template>
			</el-table-column> -->
			<el-table-column prop="fee_type" label="收费状态" width="100">
				<template #default="scope">
					<el-tag v-if="scope.row.fee_type==0" class="ml-2" type="success">免费</el-tag>
					<el-tag v-if="scope.row.fee_type==1" class="ml-2" type="info">收费</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="created_at" label="创建时间" />
			<el-table-column label="操作" >
				<template #default="scope">
					<div style="display: flex;"> 
						<el-button type="primary" @click="del(scope.row.id)">删除</el-button>
						<el-button v-if="scope.row.type==1" @click="ShowPic(scope.row)">查看附件</el-button>
					</div>

				</template>
			</el-table-column>
		</el-table>
		<div class="page">
			<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
				:page-sizes="[15, 50, 100, 200]" layout="total,sizes, prev, pager, next" :total="total"
				@size-change="PageSizeChange" @current-change="PageCurrentChange" />
		</div>

		<el-dialog v-model="dialogVisible" title="查看附件" width="60%">
			<div v-loading="loading">
				<div v-if="pic_list.length>0" style="display: flex; justify-content: space-around; flex-wrap: wrap;">
					<div v-for="(item,index) in pic_list" :key="index"  >
						<el-image style="width: 200px; height: 200px"   :preview-src-list="picSrcList" :src="BaseFileUrl+item.imgurl" />
					</div>


				</div>
				<div v-else style="text-align: center;color: #999;">
					暂无附件
				</div>

			</div>

		</el-dialog>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import {
		GetHealthOrganizationEnableList,
		GetAppointmentList,
		DelAppointment,
		AppointmentGetPicList
	} from '@/api/api.js'
	import {
		useRoute
	} from 'vue-router'
	const route = useRoute()
	const calendarId = route.query.calendarId //预约的体检日历id
	let BaseFileUrl = import.meta.env.VITE_APP_FILE
	let loading = ref(false)
	let tableData = ref([])
	let currentPage = ref(1) //当前页码
	let pageSize = ref(15) //每页数量
	let total = 0 //总数量
	let searchInfo = ref({
		dateRange: [],
		orgId: '',
		status: '',
		userinfo: '',
		calendarId: calendarId ? calendarId : ''
	})
	const PageSizeChange = (e) => { // 修改每页数量
		pageSize.value = e
		GetList()
	}
	const PageCurrentChange = (e) => { //切换页码
		currentPage.value = e
		GetList()
	}

	//获取列表
	const GetList = () => {
		loading.value = true
		GetAppointmentList({
			page: currentPage.value,
			pageSize: pageSize.value,
			searchInfo: searchInfo.value,
		}).then(res => {
			loading.value = false
			if (res.status) {
				tableData.value = res.data.list
				total = res.data.count
			} else {
				ElMessage.error(res.msg)
			}

		})
	}
	let org_list = ref([]) //机构列表
	const getHealthOrganizationEnableList = () => {
		GetHealthOrganizationEnableList().then(res => {
			if (res.status) {
				org_list.value = res.data
				if (res.data.length == 1) {
					searchInfo.value.orgId = res.data[0].id
				}
			} else {
				ElMessage.error(res.msg)
			}

		})
	}
	const del = (id) => {
		ElMessageBox.confirm('确认删除此记录吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
			.then(() => {
				loading.value = true
				DelAppointment({
					id: id
				}).then(res => {
					loading.value = false
					if (res.status) {
						GetList()
					} else {
						ElMessage.error(res.msg)
					}

				})
			})

	}
	let dialogVisible = ref(false);
	let pic_list = ref([]);
	let picSrcList=ref([]);
	const ShowPic = (row) => {
		dialogVisible.value = true
		loading.value = true
		AppointmentGetPicList({
			yuyue_id: row.id
		}).then(res => {
			loading.value = false
			if (res.status) {
				pic_list.value = res.data.list
				pic_list.value.forEach((v,i)=>{
					picSrcList.value.push(BaseFileUrl+v.imgurl)
				})
				
			} else {
				ElMessage.error(res.msg)
			}

		})
	}
	let userinfo = ref('');
	onMounted(() => {
		getHealthOrganizationEnableList()
		GetList()
		userinfo.value = JSON.parse(sessionStorage.getItem('userinfo'))
		console.log(userinfo.value);
	})
</script>

<style scoped>
	.page {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
	}
</style>