<template>
	<div>
		<div class="head">
			<el-row>
				<el-form-item v-if="org_list">
					<el-tag class="ml-2" type="success" style="margin-right: 20px;">机构名称</el-tag>
					<el-select filterable v-model="searchInfo.hospitalCode" placeholder="请选择体检机构" clearable>
						<el-option v-for="(item, index) in org_list" :key="index" :label="item.hospitalName"
							:value="item.hospitalCode" />
					</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-input v-model="searchInfo.userinfo" placeholder="姓名/身份证/手机号" />
					</div>
				</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="healthExaminationId" label="体检号" />
			<el-table-column prop="hospitalName" label="体检机构名称" />
			<el-table-column prop="name" label="体检人姓名" />
			<el-table-column prop="tel" label="电话" />
			<el-table-column prop="genderName" label="性别" />
			<el-table-column prop="examTypeName" label="体检类型" />
			<el-table-column prop="created_at" label="创建时间" />
			<el-table-column label="报告" width="100">
				<template #default="scope">
					<span v-if="scope.row.pdf_url">
						<a target="_blank" :href="scope.row.pdf_url">查看报告</a>
					</span>
					<span v-else style="color: #ccc;">暂无报告</span>
				</template>
			</el-table-column>
			<el-table-column label="详情" width="100">
				<template #default="scope">
					<el-button type="primary" style="margin-left: 20px;" size="small"
						@click="GetDetail(scope.row.id)">查看详情</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="detailDialogVisible" title="详情" width="60%">
			<el-form status-icon class="demo-ruleForm erweima">
				<div v-for="(value, label) in Info" :key="label" class="row">
					<el-form-item :label="label" v-if="label=='照片'">
						 <el-image :src="value"></el-image>
					</el-form-item>
					<el-form-item :label="label" v-else>
						<span class="el-form-item__content">{{ value || '——' }}</span>
					</el-form-item>
				</div>

			</el-form>

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

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'
	import {
		GetHealthOrganizationEnableList,
		PingTaiPushGetList,
		PingTaiPushGetDetail,GetPingTaiOrgList
	} 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(5) //每页数量
	let total = 0 //总数量
	let searchInfo = ref({
		dateRange: [],
		hospitalCode: '',
	})
	let Info = ref({});
	let detailDialogVisible = ref(false)
	const PageSizeChange = (e) => { // 修改每页数量
		pageSize.value = e
		GetList()
	}
	const PageCurrentChange = (e) => { //切换页码
		currentPage.value = e
		GetList()
	}

	//获取列表
	const GetList = () => {
		loading.value = true
		PingTaiPushGetList({
			page: currentPage.value,
			pageSize: pageSize.value,
			searchInfo: searchInfo.value,
		}).then(res => {
			loading.value = false
			if (res.status) {
				tableData.value = res.data.list
				if(BaseFileUrl.includes('172.31.68.39')){
					 const oldIp = '192.168.50.123';
					    const newIp = '172.31.68.39';
					    
					    tableData.value.forEach(item => {
					      if (typeof item.pdf_url === 'string') {
					        item.pdf_url = item.pdf_url.replace(new RegExp(oldIp, 'g'), newIp);
					      }
					    });
				}
				
				total = res.data.count
			} else {
				ElMessage.error(res.msg)
			}

		})
	}
	const GetDetail = (id) => {
		loading.value = true
		PingTaiPushGetDetail({
			id: id,
		}).then(res => {
			loading.value = false
			if (res.status) {
				detailDialogVisible.value = true
				Info.value = res.data.info
			} else {
				ElMessage.error(res.msg)
			}

		})
	}
	let org_list = ref([]) //机构列表
	const getHealthOrganizationEnableList = () => {
		GetPingTaiOrgList().then(res => {
			if (res.status) {
				org_list.value = res.data.list
				 
			} else {
				ElMessage.error(res.msg)
			}

		})
	}
	onMounted(() => {
		getHealthOrganizationEnableList()
		GetList()
	})
</script>

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

	.row {
		border-bottom: 1px solid #ccc;
		padding-top: 20px;
		padding-left: 8px;
	}

	.el-form-item__content {
		color: #818181
	}
</style>