<template>
	<div>
		<div class="head">
			<el-row>
				<el-form-item>
					<el-tag class="ml-2" type="success" style="margin-right: 20px;">机构名称</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-tag class="ml-2" type="success" style=" margin-left: 20px;margin-right: 20px;">时间段</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-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="100" />
			<el-table-column prop="tijian_num" label="体检流水号" />
			<el-table-column prop="org_name" label="体检机构名称" />
			<el-table-column prop="name" label="体检人姓名" />
			<el-table-column prop="tel" label="电话" />
			<el-table-column prop="id_card_num" label="证件号" />
			<el-table-column prop="type" label="体检类型">
			<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="created_at" label="创建时间" />
			<el-table-column label="报告" width="100">
				<template #default="scope">
					 <span v-if="scope.row.report_file">
						 <a target="_blank" :href="BaseFileUrl+scope.row.report_file">查看报告</a>
					 </span>
					 <span v-else style="color: #ccc;">暂无报告</span>
				</template>
			</el-table-column>
			<!-- <el-table-column label="操作" >
				<template #default="scope">
					<div style="display: flex;"> 
						<el-button type="primary" @click="del(scope.row.id)">删除</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>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'
	import {
		GetHealthOrganizationEnableList,
		 GetCheckUpList
	} from '@/api/api.js'
	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: '',
	})
	const PageSizeChange = (e) => { // 修改每页数量
		pageSize.value = e
		GetList()
	}
	const PageCurrentChange = (e) => { //切换页码
		currentPage.value = e
		GetList()
	}
	
	//获取列表
	const GetList=()=>{
		loading.value = true
		GetCheckUpList({
		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)
			}
	
		})
	}
	onMounted(() => {
		getHealthOrganizationEnableList()
		GetList()
	})
</script>

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