<template>
	<div>
		<div class="head">
			<el-row>
				<el-form-item>
					<el-date-picker style="margin-left: 8px; width: 300px" v-model="searchInfo.dateRange"
						type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
						value-format="YYYY-MM-DD" />
				</el-form-item>
				<el-form-item>
					<el-select :filterable="true" clearable v-model="searchInfo.list_status" placeholder="状态"
						style="margin-left: 8px;width: 150px;">
						<el-option label="申请中" value="0" />
						<el-option label="已预约" value="1" />
						<el-option label="已报道" value="2" />
						<el-option label="已结束" value="3" />
					</el-select>
				</el-form-item>

				<el-form-item>
					<el-select :filterable="true" clearable v-model="searchInfo.patient_type" placeholder="患者类型"
						style="margin-left: 8px;width: 150px;">
						<el-option label="住院" value="0" />
						<el-option label="门诊" value="1" />
						<el-option label="急诊" value="2" />
						<el-option label="体检" value="3" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select :filterable="true" clearable v-model="searchInfo.department_id" placeholder="选择科室"
						@change="DepartmentChange()" style="margin-left: 8px;width: 150px;">
						<el-option v-for="(item,index) in EnableDepartmentList" :key="index"
							:label="item.department_name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select multiple :filterable="true" clearable v-model="searchInfo.resources" placeholder="资源"
						style="margin-left: 8px;width: 250px;">
						<el-option v-for="(item,index) in enableResourceList" :key="index"
							:label="item.department_resources_name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select :filterable="true" clearable v-model="searchInfo.services_group" placeholder="服务组"
						style="margin-left: 8px;width: 150px;">
						<el-option v-for="(item,index) in EnableDeviceList" :key="index" :label="item.device_name"
							:value="item.id" />
					</el-select>
				</el-form-item>


				<el-form-item>
					<el-input v-model="searchInfo.reg_num" placeholder="登记号" style="width: 200px;margin-left: 8px;" />
				</el-form-item>
				<el-form-item>
					<el-input v-model="searchInfo.user_name" placeholder="患者姓名"
						style="width: 200px;margin-left: 8px;" />
				</el-form-item>
				<el-form-item>
					<el-input v-model="searchInfo.apply_department" placeholder="申请科室"
						style="width: 200px;margin-left: 8px;" />
				</el-form-item>
				<el-form-item>
					<el-input v-model="searchInfo.doctor" placeholder="医生" style="width: 200px;margin-left: 8px;" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="GetList()" style="margin-left: 10px;">查询</el-button>
				</el-form-item>

			</el-row>


			<!-- <el-row style="margin: 0px 0px 8px 8px; border-top: 1px solid #ccc;padding-top: 8px">
				<el-button type="success" @click.prevent="openIframe(1)">预 约</el-button>
				<el-button type="danger" @click="cancel()">取消预约</el-button>
				<el-button type="warning" @click="openIframe(2)">更改预约时间</el-button>
				<el-button type="primary" @click="SignInFunc()" style="margin-left: 40px;">报到</el-button>
				<el-button type="danger" @click="CancelSignFunc()">取消报到</el-button>
				<el-button  style="display: none;" ref="print_shenqingdan_button" v-print="'#shenqingdan'">打印申请单隐藏按钮</el-button>
				<el-button  @click="print_shenqingdan()" >打印申请单</el-button>
				<el-button  v-print="'#tablelist'" >打印表格</el-button>
			</el-row> -->
		</div>
		<el-table :data="tableData" id="tablelist" style="width: 100%;" row-key="id" v-loading="loading" ref="tableref"
			@select="handleSelect">
			<el-table-column type="selection" width="50" />
			<el-table-column prop="list_status" label="状态" width="80">
				<template #default="scope">
					<el-tag v-if="scope.row.list_status===0" class="ml-2" type="info">申请中</el-tag>
					<el-tag v-if="scope.row.list_status===1" class="ml-2" type="success">已预约</el-tag>
					<el-tag v-if="scope.row.list_status===2" class="ml-2">登记</el-tag>
					<el-tag v-if="scope.row.list_status===3" class="ml-2" type="warning">完成</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="reg_num" label="登记号" width="100" />
			<el-table-column prop="user_name" label="姓名" />
			<el-table-column prop="user_sex" label="性别" width="60">
				<template #default="scope">
					<span v-if="scope.row.user_sex==1">男</span>
					<span v-if="scope.row.user_sex==2">女</span>
				</template>
			</el-table-column>
			<el-table-column prop="age" label="年龄" width="115" />
			<el-table-column prop="entrust" label="医嘱" width="200" />
			<el-table-column prop="is_pay" label="是否交费" width="80">
				<template #default="scope">
					<span v-if="scope.row.is_pay==1">是</span>
					<span v-if="scope.row.is_pay==0">否</span>
				</template>
			</el-table-column>
			<el-table-column prop="reservation_date" label="预约日期" width="120" />
			<el-table-column prop="check_begin_time" label="预约时间" width="120">
				<template #default="scope">
					<span
						v-if="scope.row.period_begin_time  && scope.row.period_end_time ">{{scope.row.period_begin_time.substring(0, 5)}}~{{scope.row.period_end_time.substring(0, 5)}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="implement_department" label="预约科室" width="120" />
			<el-table-column prop="department_resources_name" label="预约资源" width="120" />
			<el-table-column prop="devices" label="服务组">
				<template #default="scope">
					<div style="white-space: nowrap;">
						<span v-for="(item,index) in scope.row.devices" :key="index">
							{{ item.device_name+ ' ' }}
						</span>
					</div>
			
				</template>
			</el-table-column>
			<el-table-column prop="reservation_department" label="申请科室" width="120" />
			<el-table-column prop="" label="医嘱时间" width="160">
				<template #default="scope">
					{{scope.row.entrust_date}} {{scope.row.entrust_time}}
				</template>
			</el-table-column>
			<el-table-column prop="docotr" label="申请医生" width="80" />
			<el-table-column prop="patient_type" label="病人类型" width="80">
				<template #default="scope">
					<span v-if="scope.row.patient_type==0">住院</span>
					<span v-if="scope.row.patient_type==1">门诊</span>
					<span v-if="scope.row.patient_type==2">急诊</span>
					<span v-if="scope.row.patient_type==3">体检</span>
				</template>
			</el-table-column>
			<el-table-column prop="user_phone" label="电话" width="120" />
			<!-- <el-table-column prop="implement_department" label="执行科室" width="120" /> -->

			<el-table-column prop="department_resources_name" label="操作" width="120">
				<template #default="scope">
					<el-button @click="showLog(scope.row)" size="small">查看日志</el-button>
				</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="LogShow" title="变更记录" width="50%">
			<div>
				<el-table :data="LogList" style="width: 100%;" row-key="id">
					<el-table-column prop="list_status" label="状态" width="100">
						<template #default="scope">
							<el-tag v-if="scope.row.new_status==0" class="ml-2" type="info">申请中</el-tag>
							<el-tag v-if="scope.row.new_status==1" class="ml-2" type="success">已预约</el-tag>
							<el-tag v-if="scope.row.new_status==2" class="ml-2">登记</el-tag>
							<el-tag v-if="scope.row.new_status==3" class="ml-2" type="warning">完成</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="reg_num" label="登记号" />
					<el-table-column prop="note" label="说明" />
					<el-table-column prop="created_at" label="记录时间" />
					<el-table-column prop="data" label="状态" width="100">
						<template #default="scope">
							<el-button @click="showLogJson(scope.row.data)" size="small">查看data</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</el-dialog>
		<el-dialog v-model="LogDataShow" title="查看dataJson" width="40%">
			<div style="word-break: break-all">
				{{LogDataJson}}
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue'

	import {
		EntrustGetList,
		GetEnableDepartmentList,
		CancelYuYue,
		GetEnableDeviceList,
		DepartmentResourceGetEnableList,
		GetServiceDateTime,
		GetLoglist,
		CheckEntrstItemGroup,
		getMainDetail,
		SignIn,
		CancelSign
	} from '@/api/api.js'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	let AutoGroup = ref(true); //自动分组是否开启
	let shenqingdan_show = ref(false);
	let do_type = ref(0) //按钮操作类型1预约2改约
	let loading = ref(false)
	let searchInfo = ref({})
	let tableData = ref([])
	let tableref = ref(null)
	let currentPage = ref(1) //当前页码
	let pageSize = ref(15) //每页数量
	let total = 0 //总数量
	const GetList = () => {
		loading.value = true
		EntrustGetList({
			searchInfo: searchInfo.value,
			page: currentPage.value,
			pageSize: pageSize.value
		}).then(res => {
			loading.value = false
			if (res.status) {
				tableData.value = res.data.list
				total = res.data.count
			} else {
				ElMessage.error(res.msg)
			}

		})
	}
	const PageSizeChange = (e) => { // 修改每页数量
		pageSize.value = e
		GetList()
	}
	const PageCurrentChange = (e) => { //切换页码
		currentPage.value = e
		GetList()
	}
	let tableSelected = ref([])
	const handleSelect = (e) => {
		//console.log('取消前：', tableSelected.value)
		let select_qian = tableSelected.value ? tableSelected.value.length : 0
		SelectClear();
		//	console.log(e)
		autoSeleted([e[e.length - 1]])
		//	console.log('取消后：', tableSelected.value)
		if (select_qian > tableSelected.value.length) {

		} else {
			FindMatchItem()
		}

	}
	const DepartmentChange = () => {
		enableResourceList.value = []
		if (searchInfo.value.department_id > 0)
			getEnableResource()
	}
	//查看日志
	let LogShow = ref(false);
	let LogList = ref(null);
	let LogDataShow = ref(false);
	const showLog = (row) => {
		LogShow.value = true
		GetLoglist({
			id: row.id
		}).then(res => {
			if (res.status) {
				LogList.value = res.data
			}
		})
	}
	let LogDataJson = ref('');
	const showLogJson = (data) => {
		LogDataShow.value = true
		LogDataJson.value = data
	}
	//获取可用服务组
	let EnableDeviceList = ref([])
	const GetEnableDeviceListFunc = () => {
		loading.value = true
		GetEnableDeviceList().then(res => {
			loading.value = false
			if (res.status) {
				EnableDeviceList.value = res.data
			} else {
				ElMessage.error(res.msg)
			}

		})
	}
	//获取服务器时间
	const GetServiceDate = () => {
		GetServiceDateTime().then(res => {
			if (res.status) {
				let datetime = res.data.datetime.substr(0, 10)
				searchInfo.value.dateRange = [datetime, datetime]
				GetList()
			}
		})
	}
	//获取可用资源列表
	let enableResourceList = ref([])
	const getEnableResource = () => {
		DepartmentResourceGetEnableList({
			department_id: searchInfo.value.department_id
		}).then(res => {
			if (res.status) {
				enableResourceList.value = res.data
			} else {
				ElMessage.error(res.msg)
			}

		})
	}
	//获取全部可用科室
	let EnableDepartmentList = ref([])
	const GetDepartmentEnableList = () => {
		loading.value = true
		GetEnableDepartmentList({
			is_all: true
		}).then(res => {
			loading.value = false
			if (res.status) {
				EnableDepartmentList.value = res.data.list
			} else {
				ElMessage.error(res.msg)
			}

		})
	}
	onMounted(() => {

		GetDepartmentEnableList()
		GetEnableDeviceListFunc()
		GetServiceDate()


	})
</script>

<style>
</style>