<template>
	<div>
		<div class="head">
			<el-row>
				<el-form-item>
					<el-tag class="ml-2" type="success" style="margin-right: 20px;">机构名称</el-tag>
					<el-select filterable v-model="searchInfo.orgId" 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-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-row>
			<el-row>
				<el-form-item>
					<el-tag class="ml-2" type="success" style=" margin-right: 20px;">状态</el-tag>
					<el-radio-group v-model="searchInfo.status">
						<el-radio :label="99">全部</el-radio>
						<el-radio :label="1">可用</el-radio>
						<el-radio :label="0">停用</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item>
					<el-tag class="ml-2" type="success" style="margin-left: 20px; margin-right: 20px;">星期</el-tag>
					<el-checkbox-group v-model="searchInfo.xingqi">
						<el-checkbox v-for="(item, index) in xingqi" :key="index" :label="item.value">{{ item.label }}</el-checkbox>
					</el-checkbox-group>
					<el-button type="primary" style="margin-left: 20px;" @click="getList">搜索</el-button>
				</el-form-item>

			</el-row>
			<el-row>
				<el-button type="success" @click="add()">新建</el-button>
				<el-button type="danger" @click="del()">删除</el-button>
				<el-button type="primary" @click="changeClic('status')">修改状态</el-button>
				<el-button type="primary" @click="changeClic('count')">修改数量</el-button>
			</el-row>
		</div>

		<el-table :data="tableData" style="width: 100%;" row-key="id" v-loading="loading"
			@selection-change="TableSelectionChange">
			<el-table-column type="selection" width="55" />
			<el-table-column prop="id" label="Id" width="50" />
			<el-table-column prop="org_name" label="机构名称" />
			<el-table-column prop="date" label="日期" width="120">
				<template #default="scope">
					{{ scope.row.date.substr(0, 10) }}
				</template>
			</el-table-column>
			<el-table-column prop="uname" label="星期" width="100">
				<template #default="scope">
					星期{{ getDayOfWeek(scope.row.date) }}
				</template>
			</el-table-column>
			<el-table-column prop="time" label="时段" width="150" />
			<el-table-column prop="end_time" label="预约截止时间" />
			<el-table-column prop="count" label="最大预约人数" width="120" />
			<el-table-column prop="usedcount" label="已约人数" width="80" >
				<template #default="scope">
					<a :href="'./#/appointmentList?calendarId=' + scope.row.id"><span style="font-weight: 700;color: #39cc94; cursor: pointer;">{{ scope.row.usedcount }}</span></a>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="余量" width="80">
				<template #default="scope">
					<span style="font-weight: 700;">{{ scope.row.count - scope.row.usedcount }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="状态" width="80">
				<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 prop="created_at" label="创建时间" />
		</el-table>
		<div class="page">
			<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[14, 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="45%">
			<el-form :rules="rules" ref="forminfo" :model="info" label-width="120px" v-loading="loading" class="form">
				<el-form-item label="选择资源" prop="orgId">
					<el-select v-model="info.orgId" 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 label="星期" prop="xingqi">
					<el-checkbox-group v-model="info.xingqi">
						<el-checkbox v-for="(item, index) in xingqi" :key="index" :label="item.value">{{ item.label }}</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="日期" prop="dateRange">
					<div style="width:300px ;">
						<el-date-picker v-model="info.dateRange" value-format="YYYY-MM-DD" type="daterange"
							range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
					</div>
				</el-form-item>
				<el-form-item label="时间段" prop="timeRange">
					<div style="width:300px ;">
						<el-time-picker v-model="info.timeRange" value-format='HH:mm' is-range range-separator="至"
							start-placeholder="开始时间" end-placeholder="结束时间" />
					</div>
				</el-form-item>
				<el-form-item label="预约截止时间" prop="endTime">
					<el-time-picker v-model="info.endTime" value-format='HH:mm' placeholder="预约截止时间" />
				</el-form-item>
				<el-form-item label="最大预约人数" prop="count">
					<el-input v-model="info.count" type="number" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="Save(forminfo)">
						确定
					</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog v-model="dialogVisible2" title="修改" width="30%">
			<el-form-item v-if="changeInfo.type == 'status'" label="修改状态">
				<el-radio-group v-model="changeInfo.status">
					<el-radio :label="1">可用</el-radio>
					<el-radio :label="0">停用</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item v-if="changeInfo.type == 'count'" label="修改数量">
				<el-input v-model="changeInfo.count" type="number" />
			</el-form-item>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible2 = false">取消</el-button>
					<el-button type="primary" @click="SaveChange()">
						确定
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import {
	ref,
	onMounted
} from 'vue'
import {
	ElMessage,
	ElMessageBox
} from 'element-plus'
import {
	CreateCalendar,
	CalendarGetList,
	CalendarDel,
	CalendarChangeInfo
} from '@/api/api.js'
let loading = ref(false)
let forminfo = ref('');
let changeInfo = ref({
	type: '',
	count: '',
	status: '',
	list: [],
})
let searchInfo = ref({
	dateRange: [],
	orgId: '',
	status: 99,
	xingqi: []
})
let rules = ref({
	orgId: [{
		required: true,
		message: '请选择体检机构',
		trigger: 'change',
	}],
	xingqi: [{
		type: 'array',
		required: true,
		message: '请勾选星期',
		trigger: 'change',
	}],
	dateRange: [{
		required: true,
		message: '请选择日期范围',
		trigger: 'change',
	}],
	timeRange: [{
		required: true,
		message: '预约时间段',
		trigger: 'change',
	}],
	endTime: [{
		required: true,
		message: '请选择预约截止时间',
		trigger: 'change',
	}],
	count: [{
		required: true,
		message: '请输入最多预约人数',
		trigger: 'change',
	}]

})
let xingqi = ref([{
	label: '星期一',
	value: 1
}, {
	label: '星期二',
	value: 2
}, {
	label: '星期三',
	value: 3
}, {
	label: '星期四',
	value: 4
}, {
	label: '星期五',
	value: 5
}, {
	label: '星期六',
	value: 6
}, {
	label: '星期日',
	value: 7
}])
let tableData = ref([])
let currentPage = ref(1) //当前页码
let pageSize = ref(14) //每页数量
let total = 0 //总数量
let dialogVisible = ref(false)
let dialogVisible2 = ref(false)
let tableSelectedValue = ref([]) //表格多选选中的数据
let info = ref({
	orgId: '',
	xingqi: [],
	dateRange: '',
	timeRange: '',
	endTime: '',
	count: ''
})
let org_list = ref([]) //机构列表

const add = () => {
	dialogVisible.value = true
}
const PageSizeChange = (e) => { // 修改每页数量
	pageSize.value = e
	getList()
}
const PageCurrentChange = (e) => { //切换页码
	currentPage.value = e
	getList()
}
const TableSelectionChange = (rows) => { //表格多选
	console.log(rows)
	let list1 = []
	if (rows) {
		for (let selectedItem of rows) {
			list1.push(selectedItem.id)
		}
		tableSelectedValue.value = list1
	}


}
const del = () => {
	if (!tableSelectedValue.value.length > 0) return false
	ElMessageBox.confirm(
		'确认删除所选日历吗?',
		'提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'error',
	}
	)
		.then(() => {
			loading.value = true
			CalendarDel({
				list: tableSelectedValue.value
			}).then(res => {
				loading.value = false
				if (res.status) {
					getList()
				} else {
					ElMessage.error(res.msg)
				}

			})
		})


}

//创建体检日历
const Save = (forminfo) => {
	forminfo.validate((v) => {
		if (v) {
			ElMessageBox.confirm(
				'确认创建体检日历吗?',
				'提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}
			)
				.then(() => {
					CreateCalendar({
						info: info.value
					}).then(res => {
						if (res.status) {
							ElMessage({
								message: res.msg,
								type: 'success',
							})
							dialogVisible.value = false
							getList()
						} else {
							ElMessage.error(res.msg)
						}
					})
				})


		}
	})

}

//获取日历列表
const getList = () => {
	loading.value = true
	CalendarGetList({
		page: currentPage.value,
		pageSize: pageSize.value,
		searchInfo: searchInfo.value,
	}).then(res => {
		loading.value = false
		tableData.value = res.data.list
		total = res.data.count
	})
}
//判断是星期几
const getDayOfWeek = (dateString) => {
	const days = ['日', '一', '二', '三', '四', '五', '六'];
	const date = new Date(dateString);
	const dayOfWeek = date.getDay();
	return days[dayOfWeek];
}
const changeClic = (type) => {
	if (!tableSelectedValue.value.length > 0) return false
	dialogVisible2.value = true
	changeInfo.value.count = ''
	changeInfo.value.status = ''
	changeInfo.value.type = type
	changeInfo.value.list = tableSelectedValue.value


}
const SaveChange = () => {
	CalendarChangeInfo({ changeInfo: changeInfo.value }).then(res => {
		let msgtype = 'error'
		if (res.status) {
			msgtype = 'success'
			dialogVisible2.value = false
			getList()
		}
		ElMessage({
			message: res.msg,
			type: msgtype,
		})
	})
}
onMounted(() => {
	getList()
})
</script>

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

.form .el-input {
	width: 300px;
}

.head {
	margin-bottom: 10px;
	margin-top: 10px;
}

.head .el-row {
	margin-top: -8px;
}
</style>