<template>
	<div>
		<div class="head">
			<el-row :gutter="10">
				<el-form-item>
					<el-input v-model="searchInfo.name" placeholder="姓名" clearable />
				</el-form-item>
				<el-form-item>
					<el-input v-model="searchInfo.id_card_num" placeholder="身份证号" clearable />
				</el-form-item>
				<el-form-item>
					<el-input v-model="searchInfo.operator_name" placeholder="操作人" clearable />
				</el-form-item>
				<el-form-item>
					<el-select v-model="searchInfo.table_name" placeholder="表名" clearable>
						<el-option label="预约记录" value="appointment_record" />
						<el-option label="体检记录" value="examination_records" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select v-model="searchInfo.type" placeholder="类型" clearable>
						<el-option label="健康证体检" value="1" />
						<el-option label="老年人体检" value="2" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-date-picker v-model="searchInfo.dateRange" value-format="YYYY-MM-DD" type="daterange"
						range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
				</el-form-item>
				<el-form-item v-if="org_list.length > 0">
					<el-select filterable clearable v-model="searchInfo.org_id" placeholder="请选择体检机构">
						<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-button type="primary" @click="Search">搜索</el-button>
					<el-button type="success" @click="ExportExcel" :loading="exportLoading">导出Excel</el-button>
				</el-form-item>
			</el-row>
		</div>
		<el-table border :data="tableData" style="width: 100%;" row-key="id" v-loading="loading">
			<el-table-column prop="id" label="ID" width="80" />
			<el-table-column prop="table_name" label="表名" width="120">
				<template #default="scope">{{ tableNameMap[scope.row.table_name] || scope.row.table_name }}</template>
			</el-table-column>
			<el-table-column prop="record_id" label="记录ID" width="80" />
			<el-table-column prop="name" label="姓名" width="100" />
			<el-table-column prop="id_card_num" label="身份证号" width="180" />
			<el-table-column prop="operator_name" label="操作人" width="100" />
			<el-table-column prop="reason" label="原因" />
			<el-table-column prop="current_org_name" label="机构名称" />
			<el-table-column prop="type" label="类型" width="100">
				<template #default="scope">{{ typeMap[scope.row.type] || scope.row.type }}</template>
			</el-table-column>
			<el-table-column prop="created_at" label="创建时间" width="180" />
		</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 { DeleteOperationLogGetList, DeleteOperationLogExport, GetHealthOrganizationEnableList } from '@/api/api.js'
	import * as XLSX from 'xlsx'

	let typeMap = { '1': '健康证体检', '2': '老年人体检' }
	let tableNameMap = { 'appointment_record': '预约记录', 'examination_records': '体检记录' }

	let loading = ref(false)
	let exportLoading = ref(false)
	let tableData = ref([])
	let currentPage = ref(1)
	let pageSize = ref(15)
	let total = ref(0)
	let searchInfo = ref({
		name: '',
		id_card_num: '',
		operator_name: '',
		table_name: '',
		type: '',
		dateRange: [],
		org_id: null,
	})

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

	const PageSizeChange = (e) => {
		pageSize.value = e
		GetList()
	}
	const PageCurrentChange = (e) => {
		currentPage.value = e
		GetList()
	}
	const Search = () => {
		currentPage.value = 1
		GetList()
	}
	const GetList = () => {
		loading.value = true
		DeleteOperationLogGetList({
			page: currentPage.value,
			pageSize: pageSize.value,
			searchInfo: searchInfo.value,
		}).then(res => {
			loading.value = false
			if (res.status) {
				tableData.value = res.data.list
				total.value = res.data.count
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	const ExportExcel = () => {
		exportLoading.value = true
		DeleteOperationLogExport({
			searchInfo: searchInfo.value,
		}).then(res => {
			exportLoading.value = false
			if (res.status) {
				const exportData = res.data.list.map(item => ({
					'ID': item.id,
					'表名': tableNameMap[item.table_name] || item.table_name,
					'记录ID': item.record_id,
					'姓名': item.name,
					'身份证号': item.id_card_num,
					'操作人': item.operator_name,
					'原因': item.reason,
					'机构名称': item.current_org_name,
					'类型': typeMap[item.type] || item.type,
					'创建时间': item.created_at,
				}))
				const ws = XLSX.utils.json_to_sheet(exportData)
				const wb = XLSX.utils.book_new()
				XLSX.utils.book_append_sheet(wb, ws, '取消操作日志')
				XLSX.writeFile(wb, '取消操作日志_' + new Date().getTime() + '.xlsx')
				ElMessage.success('导出成功')
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	onMounted(() => {
		getHealthOrganizationEnableList()
		GetList()
	})
</script>

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