<template>
	<el-dialog
		title="新增"
		v-if="isAuth(['ROOT', 'SCHEDULE:INSERT'])"
		:close-on-click-modal="false"
		v-model="visible"
		width="550px"
	>
		<el-scrollbar height="500px">
			<el-form :model="dataForm" ref="dataForm" :rules="dataRule" label-width="80px">
				<el-form-item label="科室部门" prop="deptSub">
					<el-cascader
						v-model="dataForm.deptSub"
						:options="dept"
						style="width:60%"
						@change="deptSubChangeHandle"
					/>
				</el-form-item>
				<el-form-item label="出诊医生" prop="doctorId">
					<el-select v-model="dataForm.doctorId">
						<el-option v-for="one in doctorList" :label="one.name" :value="one.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="出诊日期" prop="date">
					<el-date-picker
						v-model="dataForm.date"
						type="date"
						placeholder="选择日期"
						:editable="false"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						style="width: 100%;"
						:clearable="false"
					/>
				</el-form-item>
				<el-form-item label="出诊时间">
					<div style="width: 100%;">
						<el-checkbox v-model="checkAll" @change="checkAllChangeHandle">全选</el-checkbox>
					</div>
					<div style="width: 100%;">
						<el-checkbox-group v-model="checkedSlot">
							<el-checkbox v-for="(one, index) in slotList" :label="one" />
						</el-checkbox-group>
					</div>
				</el-form-item>
				<el-form-item label="时段人数">
					<el-slider v-model="dataForm.slotMaximum" :min="1" :max="10" show-input />
				</el-form-item>
			</el-form>
		</el-scrollbar>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="visible = false">取消</el-button>
				<el-button type="primary" @click="dataFormSubmit">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script>
// import dayjs from 'dayjs';
import { dayjs } from 'element-plus'
import { ElMessage } from 'element-plus';
export default {
	data: function() {
		return {
			visible: false,
			dept: [],
			doctorList: [],
			checkAll: false,
			slotList: [
				'08:00~08:30',
				'08:30~09:00',
				'09:00~09:30',
				'09:30~10:00',
				'10:00~10:30',
				'10:30~11:00',
				'11:00~11:30',
				'11:30~12:00',
				'13:00~13:30',
				'13:30~14:00',
				'14:00~14:30',
				'14:30~15:00',
				'15:00~15:30',
				'16:00~16:30',
				'16:30~17:00'
			],
			checkedSlot: [],

			dataForm: {
				deptSub: null,
				deptSubId: null,
				doctorId: null,
				date: new dayjs().format('YYYY-MM-DD'),
				slots: [],
				slotMaximum: 3
			},
			dataRule: {
				deptSub: [
					{
						required: true,
						message: '科室部门不能为空'
					}
				],
				doctorId: [
					{
						required: true,
						message: '出诊医生不能为空'
					}
				]
			}
		};
	},
	methods: {
		loadDeptAndSub: function() {
			let that = this;
			that.$http('/medical/dept/searchDeptAndSub', 'GET', {}, false, function(resp) {
				let result = resp.result;
				let dept = [];
				for (let one in result) {
					let array = [];
					for (let sub of result[one]) {
						array.push({
							value: sub.subId,
							label: sub.subName
						});
					}
					dept.push({
						value: one,
						label: one,
						children: array
					});
				}
				that.dept = dept;
			});
		},
		reset: function() {
			this.checkAll = false;
			this.checkedSlot = [];
			let dataForm = {
				deptSub: null,
				deptSubId: null,
				doctorId: null,
				date: new dayjs().format('YYYY-MM-DD'),
				slots: [],
				slotMaximum: 3
			};
			this.dataForm = dataForm;
		},
		init: function() {
			let that = this;
			that.reset();
			that.visible = true;
			that.$nextTick(() => {
				that.$refs['dataForm'].resetFields();
				that.loadDeptAndSub();
			});
		},
		deptSubChangeHandle: function(e) {
			let that = this;
			that.dataForm.deptSubId = e[1];
			let data = {
				deptSubId: that.dataForm.deptSubId
			};
			that.$http('/doctor/searchByDeptSubId', 'POST', data, false, function(resp) {
				that.doctorList = resp.result;
				that.dataForm.doctorId = null;
			});
		},
		checkAllChangeHandle: function(val) {
			this.checkedSlot = val ? this.slotList : [];
		},
		dataFormSubmit:function(){
			let that=this
			that.$refs['dataForm'].validate(function(valid) {
				if(valid){
					if(that.checkedSlot.length==0){
						ElMessage({
						    message: '出诊时间段没有选择',
						    type: 'warning'
						});
						return;
					}
					that.dataForm.slots.length=0
					for(let one of that.checkedSlot){
						let index=that.slotList.indexOf(one)+1
						that.dataForm.slots.push(index)
					}
					let data={
						deptSubId: that.dataForm.deptSubId,
						doctorId: that.dataForm.doctorId,
						date: that.dataForm.date,
						slotMaximum: that.dataForm.slotMaximum,
						totalMaximum: that.checkedSlot.length * that.dataForm.slotMaximum,
						slots: that.dataForm.slots
					}
					that.$http('/medical/dept/sub/work_plan/insert','POST',data,true,function(resp){
						let result=resp.result
						if(result==""){
							ElMessage({
							    message: '操作成功',
							    type: 'success'
							});
							that.visible=false
							that.$emit('refreshDataList');
						}
						else{
							ElMessage({
							    message: result,
							    type: 'warning'
							});
						}
					})
				}
			})
		}
	}
};
</script>

<style lang="less" scoped="scoped"></style>
