<template>
	<div>
		<div class="head">
			<div class="head">
				<el-row>
					<el-form-item>
						<el-input v-model="searchInfo.name" placeholder="请输入类型名称" style="margin-left: 10px;" />
					</el-form-item>
					<el-button type="primary" @click="GetList()" style="margin-left: 10px;">查询</el-button>
					<el-button type="success" @click="Add()" style="margin-left: 10px;">添加</el-button>
				</el-row>
			</div>
		</div>
		<el-table :data="tableData" style="width: 100%;" row-key="id" v-loading="loading">
			<el-table-column prop="id" label="Id" width="100" v-if="false" />
			<el-table-column prop="name" label="类型名称" />
			<el-table-column prop="is_vip" label="Vip">
				<template #default="scope">
					<el-tag v-if="scope.row.is_vip==0" class="ml-2" type="info">否</el-tag>
					<el-tag v-if="scope.row.is_vip==1" class="ml-2" type="warning">VIP</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="use_type" label="个检/团检">
				<template #default="scope">
					<el-tag v-if="scope.row.use_type==0" class="ml-2">个检、团检</el-tag>
					<el-tag v-if="scope.row.use_type==1" class="ml-2" type="info">个检</el-tag>
					<el-tag v-if="scope.row.use_type==2" class="ml-2" type="warning">团检</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="sex" label="性别">
				<template #default="scope">
					<el-tag v-if="scope.row.sex==0" class="ml-2">全部</el-tag>
					<el-tag v-if="scope.row.sex==1" class="ml-2" type="info">男</el-tag>
					<el-tag v-if="scope.row.sex==2" class="ml-2" type="warning">女</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="" label="体检类型"  show-overflow-tooltip>
				<template #default="scope">
					<el-tag type="info" v-for="(item,index) in  scope.row.check_type_name" :key="index"  class="ml-2">{{item}}</el-tag> 
				</template>
			</el-table-column>
			<el-table-column prop="limosis" label="状态" width="100">
				<template #default="scope">
					<el-tag v-if="scope.row.status==0" class="ml-2" type="danger">停用</el-tag>
					<el-tag v-if="scope.row.status==1" class="ml-2" type="success">正常</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="" label="更新时间">
				<template #default="scope">
					<span v-if="scope.row.updated_at">{{scope.row.updated_at}}</span>
					<span v-else>{{scope.row.created_at}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="" label="操作" width="150">
				<template #default="scope">
					<el-button type="primary" @click="Edit(scope.row)" size="small">修改</el-button>
					<el-button type="danger" @click="Del(scope.row.id)" 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="dialogVisible" title="号源类型设置">
			<div class="chuansuokuang" v-loading="loading">
				<el-form :model="Info" label-width="150" style="max-width: 600px">
					<el-form-item label="名称">
						<el-input v-model="Info.name" />
					</el-form-item>
					<el-form-item label="是否 VIP">
						<el-radio-group v-model="Info.is_vip">
							<el-radio :label="1">是</el-radio>
							<el-radio :label="0">否</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="个检/团检">
						<el-select :filterable="true" clearable v-model="Info.use_type" 
							placeholder="选择个检/团检"  >
							<el-option label="不限" :value="0" />
							<el-option label="个检" :value="1" />
							<el-option label="团检" :value="2" />
						</el-select>
					</el-form-item>
					<el-form-item label="性别">
						<el-select :filterable="true" clearable v-model="Info.sex" placeholder="选择性别"
							 >
							<el-option label="不限" :value="0" />
							<el-option label="男" :value="1" />
							<el-option label="女" :value="2" />
						</el-select>
					</el-form-item>
					<el-form-item label="体检类型" >
						<el-checkbox-group v-model="Info.checkup_type_id">
							<el-checkbox v-for="(item,index) in CheckUpTypeEnableList" :label="item.id">
								{{item.name}}
							</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="体检金额限制" v-if="Info.use_type===0 || Info.use_type===1 ||Info.use_type===2">
						<el-form-item v-if="Info.use_type===0 || Info.use_type===1" label="个检限额 0为不限">
							<el-input v-model="Info.amount_limit1" placeholder="0" />
						</el-form-item>
						<el-form-item v-if="Info.use_type===0 || Info.use_type===2" label="团检限额 0为不限" placeholder="0">
							<el-input v-model="Info.amount_limit2" placeholder="0" />
						</el-form-item>
					</el-form-item>
					<el-form-item label="状态">
						<el-switch v-model="Info.status" size="large" active-text="正常" inactive-text="停用"
							:active-value="1" :inactive-value="0" />
					</el-form-item>
				</el-form>
			</div>
			<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,
		ElMessageBox
	} from 'element-plus'
	import {
		PlanTypeGetList,
		CheckUpTypeGetEnableList,
		PlanTypeSave,
		PlanTypeGetDetail,
		PlanTypeDel
	} from '@/api/api.js'
	let loading = ref(false)
	let searchInfo = ref({})
	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 CheckUpTypeEnableList = ref([]);
	const GetCheckUpTypeEnableList_Func = () => {
		loading.value = true
		CheckUpTypeGetEnableList().then(res => {
			loading.value = false
			if (res.status) {
				CheckUpTypeEnableList.value = res.data.list
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	const GetList = () => {
		loading.value = true
		PlanTypeGetList({
			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)
			}
		})
	}
	let Info = ref({});
	let dialogVisible = ref(false);
	const Add = () => {
		Info.value = {}
		Info.value.id = 0
		Info.value.status = 1
		dialogVisible.value = true
		
	}
	const Save = () => {
		loading.value = true
		PlanTypeSave({
			Info: Info.value
		}).then(res => {
			loading.value = false
			if (res.status) {
				dialogVisible.value = false
				GetList()
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	const Edit=(row)=>{
		dialogVisible.value = true
		Info.value = {}
		GetDetailFunc(row.id)
	}
	//获取详情
	const GetDetailFunc=(id)=>{
		loading.value = true
		PlanTypeGetDetail({
			id: id
		}).then(res => {
			loading.value = false
			if (res.status) {
			  Info.value=res.data
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	const Del=(id)=>{
		loading.value = true
		PlanTypeDel({
			id: id
		}).then(res => {
			loading.value = false
			if (res.status) {
			  GetList()
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	onMounted(() => {
		GetList()
		GetCheckUpTypeEnableList_Func()
	})
</script>

<style>
</style>