<template>
	<div>
		<div class="head">
			<div class="head">
				<el-row>
					<el-form-item>
						<el-date-picker
						        v-model="searchInfo.date"
								value-format="YYYY-MM-DD"
						        type="date"
						        placeholder="选择日期" 
						      />
					</el-form-item>
					<el-button type="primary" @click="GetList()" style="margin-left: 10px;">查 询</el-button>
					<el-button type="warning" @click="Edit()" style="margin-left: 10px;">修 改</el-button>
					<el-button type="danger" @click="Del()" style="margin-left: 10px;">删 除</el-button>
					<el-button   @click="BatchUpdate(1)" class="status_zhengchang" style="margin-left: 80px;">设为正常号</el-button>
					<el-button  @click="BatchUpdate(0)"  style="margin-left: 10px;">设为预留号</el-button>
				</el-row>
			</div>
		</div>
		<div style="display: flex;">
			<div class="status_zhengchang shili" >空余</div><div class="plan_block shili">预留</div><div class="status_zhanyong shili">已占用</div><div class="status_tingyong shili">停用</div>
		</div>
		<div style="display: flex;justify-content: space-around; flex-wrap: wrap;" v-loading="loading">
			<div :class="itemClasses(item)" v-for="(item,index) in list" :key="index" @click="TimeListClick(item,index)">
				<div style="text-align: right;">
					<el-tag v-if="item.is_vip==1" type="warning">VIP</el-tag>
					<el-tag type="success"><span v-if="item.use_type===1 || item.use_type===0">个</span><span v-if="item.use_type===0"> | </span><span v-if="item.use_type===2 || item.use_type===0">团</span></el-tag>
					<el-tag><span v-if="item.sex===1 || item.sex===0">男</span><span v-if="item.sex===0"> | </span><span v-if="item.sex===2 || item.sex===0">女</span></el-tag>
					
				</div>
				<div style="text-align: center;">{{item.time}}</div>
				<div>.</div>
			</div>
			 <el-empty v-if="list.length===0" description="暂无数据" />
		</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="是否 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 {
		PlanGetList,
		PlanGetDetail,
		CheckUpTypeGetEnableList,
		PlanSave,
		PlanBatchUpdatePlanType,
		PlanDel
	} from '@/api/api.js'
	let loading = ref(false)
	let searchInfo = ref({})
	let list = ref([]);
	const GetList = () => {
		loading.value = true
		PlanGetList({
			searchInfo: searchInfo.value,
		}).then(res => {
			loading.value = false
			if (res.status) {
				list.value = res.data.list
				searchInfo.value.date=res.data.date
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	const itemClasses=(item)=>{
		return {
		        'status_zhengchang': item.type === 1,
		        'plan_block': true,
				'status_zhanyong':item.status===2,
				'status_xuanzhong':item.selected===true,
				'status_tingyong':item.status===0,
		      }
	}
	const TimeListClick=(item,index)=>{
		list.value[index].selected=!list.value[index].selected
	}
	let Info=ref({});
	let dialogVisible=ref(false);
	const Edit=()=>{
		
		dotype.value='one'
		let selected_list=[];
		list.value.forEach((v,i)=>{
			if(v.selected!=undefined && v.selected==true){
				selected_list.push(v.id)
			}
		})
		if(selected_list.length===1){
			dialogVisible.value=true
			GetDetail(selected_list[0]); //默认修改1个
		}else{
			ElMessage.error("请勾选1个号源")
			return false
		}
		GetCheckUpTypeEnableList_Func()
		
	}
	const GetDetail=(id)=>{
		loading.value = true
		PlanGetDetail({
			id: id,
		}).then(res => {
			loading.value = false
			if (res.status) {
				 Info.value=res.data.info
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	//可用体检类型列表
	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)
			}
		})
	}
	let dotype=ref('one');
	const Save=()=>{
		if(dotype.value=='one'){
			loading.value = true
			PlanSave({
				info: Info.value,
			}).then(res => {
				loading.value = false
				if (res.status) {
					 dialogVisible.value=false
					 GetList()
				} else {
					ElMessage.error(res.msg)
				}
			})
		}
		if(dotype.value=='batch'){
			BatchUpdateFunc(1,Info.value)
		}
	}
	const BatchUpdate=(type)=>{
	
		if(type==1){
			Info.value={}
			 dialogVisible.value=true
			 dotype.value='batch'
			 GetCheckUpTypeEnableList_Func()
		}
		if(type==0){
			BatchUpdateFunc(type)
		}
		
	}
	const Del=()=>{
		ElMessageBox.confirm(
			'确认删除所选号源吗（已被占用号源不会删除）?',
			'提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'error',
		}
		)
			.then(() => {
				loading.value = true
				let selected_list=[]
				list.value.forEach((v,i)=>{
					if(v.selected!=undefined && v.selected==true){
						selected_list.push(v.id)
					}
				})
				PlanDel({
					ids: selected_list
				}).then(res => {
					loading.value = false
					if (res.status) {
						 GetList()
					} else {
						ElMessage.error(res.msg)
					}
				})
			})
		
	}
	const BatchUpdateFunc=(type,info=null)=>{
		loading.value = true
		let selected_list=[]
		list.value.forEach((v,i)=>{
			if(v.selected!=undefined && v.selected==true){
				selected_list.push(v.id)
			}
		})
		PlanBatchUpdatePlanType({
			ids: selected_list,
			type:type,
			info:info
		}).then(res => {
			loading.value = false
			if (res.status) {
				 dialogVisible.value=false
				 GetList()
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	onMounted(() => {
		GetList()
	})
</script>

<style scoped>
	.plan_block {
		border: 1px solid #ccc;
		background-color: #f5f5f5;
		width: 200px;
		height: 100px;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		cursor: pointer;
		margin: 10px;
	}
	.status_zhengchang{
		background-color: #a4d09d;
		border: 1px solid #637d60;
		color:#598b7a
	}
	.status_zhanyong{
		background-color: #d0a091;
		border: 1px solid #857467;
		color:#675546
	}
	.shili{
		width: 100px;
		height: 30px;
		margin: 0px 10px;
		border-radius: 0px;
		text-align: center;
		line-height: 30px;
		border: 0px;
	}
	.status_xuanzhong{
		border: 6px solid #ffcd9b !important;
		color:#433629
	}
	.status_tingyong{
		background-color: #5f5f5f;
		border: 1px solid #857467;
		color:#fff
	}
</style>