<template>
	<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="名称" />
			<el-table-column prop="sn" label="Code" />
			<el-table-column prop="username" label="关联的账号" />
			<el-table-column prop="enable_yuyue" label="是否开启预约">
				<template #default="scope">
					<el-tag v-if="scope.row.enable_yuyue == 1" class="ml-2" type="success">正常</el-tag>
					<el-tag v-if="scope.row.enable_yuyue == 0" class="ml-2" type="danger">停用</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="enable_laonianren_mf" label="开启老年人免费预约">
				<template #default="scope">
					<el-tag v-if="scope.row.enable_laonianren_mf == 1" class="ml-2" type="success">正常</el-tag>
					<el-tag v-if="scope.row.enable_laonianren_mf == 0" class="ml-2" type="danger">停用</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="enable_jiankangzheng_mf" label="开启健康证免费预约">
				<template #default="scope">
					<el-tag v-if="scope.row.enable_jiankangzheng_mf == 1" class="ml-2" type="success">正常</el-tag>
					<el-tag v-if="scope.row.enable_jiankangzheng_mf == 0" class="ml-2" type="danger">停用</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="状态">
				<template #default="scope">
					<el-tag v-if="scope.row.status == 1" class="ml-2" type="success">正常</el-tag>
					<el-tag v-if="scope.row.status == 0" class="ml-2" type="danger">停用</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template #default="scope">
					<el-button round type="primary" size="small" @click="seting(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="dialogVisible" title="机构配置" width="50%">
			<el-form :model="SetingInfo" v-loading="loading" label-width="150px">
				<el-form-item label="是否开启预约">
					<el-switch v-model="SetingInfo.enable_yuyue" size="large" active-text="开启" inactive-text="关闭"
						:active-value="1" :inactive-value="0" /> （开启后，此机构才能进行预约）
				</el-form-item>
				<el-form-item label="老年人免费体检">
					<div class="bigClassDiv">
						<el-switch v-model="SetingInfo.enable_laonianren_mf" size="large" active-text="开启"
							inactive-text="关闭" :active-value="1" :inactive-value="0" />
						<div v-if="SetingInfo.enable_laonianren_mf===1">
							<div v-for="(item,index) in SetingInfo.laonianren_mf.fenlei" :key="index">
								<div>分类：{{item.name}}</div>
								<el-form-item class="bindinput" label="绑定体检类型:">
									<el-input v-model="SetingInfo.laonianren_mf.fenlei[index].bind_check_type" />
								</el-form-item>
								<el-form-item class="bindinput" label="绑定单位id:">
									<el-input v-model="SetingInfo.laonianren_mf.fenlei[index].bind_unit_id" />
								</el-form-item>
								<el-form-item class="bindinput" label="绑定分组id:">
									<el-input v-model="SetingInfo.laonianren_mf.fenlei[index].bind_group_id" />
								</el-form-item>
								<el-form-item class="bindinput" label="绑定批次id:">
									<el-input v-model="SetingInfo.laonianren_mf.fenlei[index].bind_batch_id" />
								</el-form-item>
								<el-form-item class="bindinput" label="绑定体检用户类型:">
									<el-input v-model="SetingInfo.laonianren_mf.fenlei[index].bind_user_type" />
								</el-form-item>
							</div>
						</div>


					</div>
				</el-form-item>
				<el-form-item label="健康证免费体检">
					<div class="bigClassDiv">
						<el-switch v-model="SetingInfo.enable_jiankangzheng_mf" size="large" active-text="开启"
							inactive-text="关闭" :active-value="1" :inactive-value="0" />
						<div v-if="SetingInfo.enable_jiankangzheng_mf===1">
							<div style="margin-top: 20px;" v-for="(item,index) in SetingInfo.jiankangzheng_mf.fenlei"
								:key="index">
								<div>分类：{{item.name}}
									<el-switch style="margin-left: 20px;"
										v-model="SetingInfo.jiankangzheng_mf.fenlei[index].enable_yuyue" size="large"
										active-text="开启" inactive-text="关闭" :active-value="1" :inactive-value="0" />
								</div>
								<div v-show="SetingInfo.jiankangzheng_mf.fenlei[index].enable_yuyue===1">
									<el-form-item class="bindinput" label="绑定体检类型:">
										<el-input v-model="SetingInfo.jiankangzheng_mf.fenlei[index].bind_check_type" />
									</el-form-item>
									<el-form-item class="bindinput" label="绑定单位id:">
										<el-input v-model="SetingInfo.jiankangzheng_mf.fenlei[index].bind_unit_id" />
									</el-form-item>
									<el-form-item class="bindinput" label="绑定分组id:">
										<el-input v-model="SetingInfo.jiankangzheng_mf.fenlei[index].bind_group_id" />
									</el-form-item>
									<el-form-item class="bindinput" label="绑定批次id:">
										<el-input v-model="SetingInfo.jiankangzheng_mf.fenlei[index].bind_batch_id" />
									</el-form-item>
									<el-form-item class="bindinput" label="绑定体检用户类型:">
										<el-input v-model="SetingInfo.jiankangzheng_mf.fenlei[index].bind_user_type" />
									</el-form-item>
								</div>

							</div>
						</div>

					</div>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="Save">
						确定
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'
	import {
		InstitutionGetList,
		InstitutionSavdSeting,
		InstitutionGetSetingDetail
	} from '@/api/api.js'


	let loading = ref(false)
	let tableData = ref([])
	let currentPage = ref(1) //当前页码
	let pageSize = ref(15) //每页数量
	let total = 0 //总数量
	const PageSizeChange = (e) => { // 修改每页数量
		pageSize.value = e
		GetList()
	}
	const PageCurrentChange = (e) => { //切换页码
		currentPage.value = e
		GetList()
	}

	let searchInfo = ref({

	})

	const GetList = () => {
		loading.value = true
		InstitutionGetList({
			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 dialogVisible = ref(false);
	let SetingInfo = ref({
		institution_id: 0,
		enable_yuyue: 0,
		enable_laonianren_mf: 0,
		enable_jiankangzheng_mf: 0,
		laonianren_mf: {
			fenlei: [{
				enable_yuyue: 1,
				name: '全部',
				bind_check_type: '',
				bind_unit_id: '',
				bind_group_id: '',
				bind_batch_id:'',
				bind_user_type:'',
			}]
		},
		jiankangzheng_mf: {
			fenlei: [{
				enable_yuyue: 0,
				name: '食品类',
				bind_check_type: '',
				bind_unit_id: '',
				bind_group_id: '',
				bind_batch_id:'',
				bind_user_type:'',
			}, {
				enable_yuyue: 0,
				name: '化妆品类',
				bind_check_type: '',
				bind_unit_id: '',
				bind_group_id: '',
				bind_batch_id:'',
				bind_user_type:'',
			}, {
				enable_yuyue: 0,
				name: '公共场所类',
				bind_check_type: '',
				bind_unit_id: '',
				bind_group_id: '',
				bind_batch_id:'',
				bind_user_type:'',
			}, {
				enable_yuyue: 0,
				name: '生活饮用水类',
				bind_check_type: '',
				bind_unit_id: '',
				bind_group_id: '',
				bind_batch_id:'',
				bind_user_type:'',
			}, {
				enable_yuyue: 0,
				name: '消毒产品生产类',
				bind_check_type: '',
				bind_unit_id: '',
				bind_group_id: '',
				bind_batch_id:'',
				bind_user_type:'',
			}]
		},
	})
	const seting = (id) => {
		dialogVisible.value = true
		SetingInfo.value.institution_id = id
		GetDetail()
	}
	const Save = () => {
		loading.value = true
		console.log(SetingInfo.value);
		InstitutionSavdSeting({
			SetingInfo: SetingInfo.value
		}).then(res => {
			loading.value = false
			if (res.status) {
				dialogVisible.value = false
				GetList()
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	const GetDetail = () => {
		loading.value = true
		InstitutionGetSetingDetail({
			institution_id: SetingInfo.value.institution_id
		}).then(res => {
			loading.value = false
			if (res.status) {
				SetingInfo.value.enable_yuyue = res.data.info[0].enable_yuyue
				SetingInfo.value.enable_laonianren_mf = res.data.info[0].enable_laonianren_mf
				SetingInfo.value.enable_jiankangzheng_mf = res.data.info[0].enable_jiankangzheng_mf
				if(res.data.seting.length>0){
					SetingInfo.value.laonianren_mf.fenlei = []
					SetingInfo.value.jiankangzheng_mf.fenlei = []
				}
				
				res.data.seting.forEach(function(v, i) {
					if (v.big_check_type == '老年人免费体检') {
						v.name = v.small_check_type
						SetingInfo.value.laonianren_mf.fenlei.push(v);
					}
					if (v.big_check_type == "健康证免费体检") {
						v.name = v.small_check_type
						SetingInfo.value.jiankangzheng_mf.fenlei.push(v);
					}
				})
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	onMounted(() => {
		GetList()
	})
</script>

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

	.bindinput {
		margin-top: 8px;
	}
</style>