<template>
	<div>
		<!-- 临时任务弹窗 -->
		<el-dialog :title="showTitle" :visible.sync="dialogVisible" :close-on-click-modal="false" :before-close="closeDialog" width="600px" top="5%">
			<div>
				<el-form :model="formData" ref="formData" label-width="80px" v-loading="taskload">
					<el-form-item
						label="任务内容"
						prop="task_name"
						:rules="[{ required: true, message: '请填写任务内容', trigger: 'blur' }, { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }]"
					>
						<el-input type="textarea" rows="3" maxlength="20" show-word-limit v-model="formData.task_name" placeholder="请输入任务内容(限20字)"></el-input>
					</el-form-item>

					<el-form-item label="任务积分" prop="base_point" :rules="[{ required: true, message: '请填写任务积分', trigger: 'change' }]">
						<el-input-number v-model="formData.base_point" :min="1"></el-input-number>
					</el-form-item>

					<el-form-item label="执行人" prop="targets" :rules="[{ required: true, message: '请选择执行人', trigger: 'change' }]">
						<el-row>
							<el-col :span="18">
								<el-input auto-complete="off" v-model="executorName" placeholder="请选择执行人"></el-input>
								<div @click="show_employee_selector = true" style=" position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 9;"></div>
							</el-col>
						</el-row>

						<el-dialog title="选择执行人" width="640px" :visible.sync="show_employee_selector" append-to-body :before-close="handleClose">
							<EmployeeSelector
								v-if="show_employee_selector"
								ref="members"
								:isCreatorSelect="true"
								:employee_list="employee_list"
								:user_no_select="false"
								:multi="false"
								:selected="approval_selected"
								@confirm="approval_confirm"
							/>
							<span slot="footer" class="dialog-footer">
								<el-button @click="show_employee_selector = false">取 消</el-button>
								<el-button type="primary" @click="submitEmployee('members')">确 定</el-button>
							</span>
						</el-dialog>
					</el-form-item>
					<el-form-item label="审批人" prop="reviewer_id" :rules="[{ required: true, message: '请选择审批人', trigger: 'blur' }]">
						<el-row>
							<el-col :span="18">
								<el-input auto-complete="off" v-model="reviewerName" placeholder="请选择审批人"></el-input>
								<div @click="show_reviewer_selector = true" style=" position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 9;"></div>
							</el-col>
						</el-row>
						<el-dialog title="选择审批人" width="640px" :visible.sync="show_reviewer_selector" append-to-body :before-close="handleClose">
							<EmployeeSelector
								v-if="show_reviewer_selector"
								ref="members1"
								:isChecKedAll="false"
								:isCreatorSelect="false"
								:employee_list="reviewer_employee_list"
								:user_no_select="true"
								:multi="false"
								:use_Administrator_list="true"
								:selected="reviewer_selected"
								@confirm="reviewer_confirm"
							/>
							<span slot="footer" class="dialog-footer">
								<el-button @click="show_reviewer_selector = false">取 消</el-button>
								<el-button type="primary" @click="submitEmployee1('members1')">确 定</el-button>
							</span>
						</el-dialog>
					</el-form-item>
					<el-form-item label="截止日期" prop="expire_time" v-if="formData.task_cycle == 0" :rules="[{ required: true, message: '请选择截止日期', trigger: 'blur' }]">
						<el-date-picker
							v-model="formData.expire_time"
							type="datetime"
							placeholder="选择日期时间"
							format="yyyy-MM-dd HH:mm"
							value-format="yyyy-MM-dd HH:mm"
							default-time="18:00"
						></el-date-picker>
					</el-form-item>

					<el-form-item label="截止日期" prop="task_expire_day" v-if="formData.task_cycle == 1" :rules="[{ required: true, message: '请选择截止日期', trigger: 'blur' }]">
						<el-select v-model="formData.task_expire_day" placeholder="请选择截止日期">
							<el-option v-for="item in columns1" :key="item.value" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="截止日期" prop="task_expire_day" v-if="formData.task_cycle == 2" :rules="[{ required: true, message: '请选择截止日期', trigger: 'blur' }]">
						<el-select v-model="formData.task_expire_day" placeholder="请选择截止日期">
							<el-option v-for="item in columns2" :key="item.value" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="截止日期" prop="task_expire_day" v-if="formData.task_cycle == 3" :rules="[{ required: true, message: '请选择截止日期', trigger: 'blur' }]">
						<el-select v-model="formData.task_expire_day" placeholder="请选择截止日期">
							<el-option v-for="item in columns3" :key="item.value" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="任务描述" prop="task_remark" :rules="[{ max: 300, message: '长度不能超过 300 个字', trigger: 'blur' }]">
						<el-input type="textarea" :rows="5" maxlength="300" show-word-limit v-model="formData.task_remark" placeholder="请输入任务内容(限300字)"></el-input>
					</el-form-item>
					
					<div style="margin-left: 80px; margin-bottom: 8px;">以天为单位，每 提前/逾期 一天 加分/扣分</div>
					<el-form-item label="提前奖分" prop="ahead_award_point">
						<el-input v-model="formData.ahead_award_point" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入每日奖分" style="width: 150px;"></el-input> B分/每天，
						奖分上限 &nbsp;<el-input v-model="formData.ahead_award_point_limit" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入奖分上限" style="width: 150px;"></el-input> B分
					</el-form-item>
					<el-form-item label="逾期扣分"  prop="timeout_deduction_point" >
						<el-input v-model="formData.timeout_deduction_point" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入每日扣分" style="width: 150px;"></el-input> B分/每天，
						扣分上限 &nbsp;<el-input v-model="formData.timeout_deduction_point_limit" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入扣分上限" style="width: 150px;"></el-input> B分
					</el-form-item>
					<el-form-item v-show="false" prop="ahead_award_point_limit" ></el-form-item>
					<el-form-item v-show="false" prop="timeout_deduction_point_limit" ></el-form-item>

					<el-form-item>
						<div class="flex-box-end">
							<el-button @click="resetForm('formData')">取消</el-button>
							<el-button type="primary" @click="sub('formData')">确认修改</el-button>
						</div>
					</el-form-item>
				</el-form>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import moment from 'moment';
import EmployeeSelector from '@/components/EmployeeSelector.vue';
export default {
	name: 'temporaryTask',
	props: {
		modifyData: {
			type: Object
		},
		employee_not_select: {
			type: Array,
			default: () => {
				return [];
			}
		},
		dialogVisible: {
			type: Boolean,
			default: false
		},
		showTitle: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			taskload: false,
			formData: {
				id: 0,
				task_name: '',
				base_point: '',
				task_remark: '',
				pt_id: 3,
				task_expire_day: 1,
				expire_time: moment().format('YYYY-MM-DD 18:00'),
				weight: 0,
				package_id: 0,
				targets: [],
				reviewer_id: '',
				task_cycle: 0,
				timeout_deduction_point: null,
				timeout_deduction_point_limit: null,
				ahead_award_point: null,
				ahead_award_point_limit: null,
			},
			point_types: [],
			// 执行者
			executorName: null,
			show_employee_selector: false,
			approval_selected: { dept: [], employee: [] },
			approval_not_select: [],
			employee_list: this.$getUserData().employee_detail.manage_scope,
			// 审批人
			reviewerName: null,
			reviewer_not_select: [],
			reviewer_employee_list: [],
			reviewer_selected: { dept: [], employee: [] },
			show_reviewer_selector: false,

			// 重复周期
			task_cycle_arr: [{ value: 0, name: '不重复' }, { value: 1, name: '每天重复' }, { value: 2, name: '每周重复' }, { value: 3, name: '每月重复' }],
			// 周期时间
			columns1: [
				{ name: '01:00', value: 1 },
				{ name: '02:00', value: 2 },
				{ name: '03:00', value: 3 },
				{ name: '04:00', value: 4 },
				{ name: '05:00', value: 5 },
				{ name: '06:00', value: 6 },
				{ name: '07:00', value: 7 },
				{ name: '08:00', value: 8 },
				{ name: '09:00', value: 9 },
				{ name: '10:00', value: 10 },
				{ name: '11:00', value: 11 },
				{ name: '12:00', value: 12 },
				{ name: '13:00', value: 13 },
				{ name: '14:00', value: 14 },
				{ name: '15:00', value: 15 },
				{ name: '16:00', value: 16 },
				{ name: '17:00', value: 17 },
				{ name: '18:00', value: 18 },
				{ name: '19:00', value: 19 },
				{ name: '20:00', value: 20 },
				{ name: '21:00', value: 21 },
				{ name: '22:00', value: 22 },
				{ name: '23:00', value: 23 },
				{ name: '24:00', value: 24 }
			],
			columns2: [
				{ name: '周一', value: 1 },
				{ name: '周二', value: 2 },
				{ name: '周三', value: 3 },
				{ name: '周四', value: 4 },
				{ name: '周五', value: 5 },
				{ name: '周六', value: 6 },
				{ name: '周日', value: 7 }
			],
			columns3: [
				{ name: '1号', value: 1 },
				{ name: '2号', value: 2 },
				{ name: '3号', value: 3 },
				{ name: '4号', value: 4 },
				{ name: '5号', value: 5 },
				{ name: '6号', value: 6 },
				{ name: '7号', value: 7 },
				{ name: '8号', value: 8 },
				{ name: '9号', value: 9 },
				{ name: '10号', value: 10 },
				{ name: '11号', value: 11 },
				{ name: '12号', value: 12 },
				{ name: '13号', value: 13 },
				{ name: '14号', value: 14 },
				{ name: '15号', value: 15 },
				{ name: '16号', value: 16 },
				{ name: '17号', value: 17 },
				{ name: '18号', value: 18 },
				{ name: '19号', value: 19 },
				{ name: '20号', value: 20 },
				{ name: '21号', value: 21 },
				{ name: '22号', value: 22 },
				{ name: '23号', value: 23 },
				{ name: '24号', value: 24 },
				{ name: '25号', value: 25 },
				{ name: '26号', value: 26 },
				{ name: '27号', value: 27 },
				{ name: '28号', value: 28 },
				{ name: '29号', value: 29 },
				{ name: '30号', value: 30 },
				{ name: '31号', value: 31 }
			]
		};
	},
	components: { EmployeeSelector },
	watch: {
		dialogVisible() {
			if (this.dialogVisible) {
				this.Datas();
			}
		},
		'formData.task_cycle'(val) {
			if (val) {
				this.formData.task_expire_day = 1;
			} else {
				this.formData.expire_time = moment().format('YYYY-MM-DD 18:00');
			}
		},
		modifyData() {
			// this.Datas()
		}
	},
	mounted() {
		this.point_types = JSON.parse(localStorage.getItem('types'));
	},
	methods: {
		submitEmployee(name) {
			this.$refs[name].confirm(); //调用组件的confirm（）；
		},
		submitEmployee1(name) {
			this.$refs[name].confirm(); //调用组件的confirm（）；
		},
		//关闭
		handleClose(done) {
			done();
		},
		Datas() {
			this.formData.id = this.modifyData.id;
			this.formData.task_name = this.modifyData.task_name;
			this.formData.base_point = this.modifyData.point_config.base_point;
			this.formData.task_remark = this.modifyData.task_remark;
			this.formData.pt_id = this.modifyData.pt_id;
			this.formData.expire_time = this.modifyData.expire_time;
			this.executorName = this.modifyData.employee_name;
			this.reviewerName = this.modifyData.reviewer_name;

			// this.formData.targets.push(this.modifyData.employee_id)//执行者
			this.formData.targets.push(this.modifyData.employee_id); //执行者
			this.approval_selected.employee = [{ id: this.modifyData.employee_id, img_url: this.modifyData.img_url, name: this.modifyData.employee_name }];

			this.formData.reviewer_id = this.modifyData.reviewer_id;
			this.reviewer_selected.employee = [{ id: this.modifyData.reviewer_id, img_url: this.modifyData.img_url, name: this.modifyData.reviewer_name }];
			// if (this.modifyData.point_config.timeout_deduction_point != '0') {
			// 	this.formData.timeout_deduction_point = this.modifyData.point_config.timeout_deduction_point;
			// } else {
			// 	this.formData.timeout_deduction_point = '';
			// }
			
			let add = ['ahead_award_point', 'ahead_award_point_limit', 'timeout_deduction_point', 'timeout_deduction_point_limit']
			add.forEach(item =>{
				this.deductionPoint(item)
			})

		},
		deductionPoint(item){
			if (this.modifyData.point_config[item] != '0') {
				this.formData[item] = this.modifyData.point_config[item];
			} else {
				this.formData[item] = '';
			}
		},
		sub(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.saveFun(formName);
				}
			});
		},
		resetForm(formName) {
			this.$emit('update:dialogVisible', false);
			this.$refs[formName].resetFields();
			this.executorName = '';
			this.reviewerName = '';
		},
		ahead_timeout(item,arr,codes,code){
			if(item){
				if(arr){
					if(Number(item) > Number(arr)){
						this.$message.warning(code +'上限不能小于每日'+ code)
						return true
					}
				}else{
					this.$message.warning( codes + '不为0时，'+ code +'上限不能为空')
					return true
				}
			}
		},
		deletedata(data,arr){
			data[arr] && data[arr] != 0 ?  '' : delete data[arr]
		},
		// 提交
		saveFun(formName) {
			let self = this;
			let data = JSON.parse(JSON.stringify(self.formData));
			if (data.timeout_deduction_point == '') {
				data.timeout_deduction_point = 0;
			}
			
			if(!data.ahead_award_point && data.ahead_award_point_limit){
				this.$message.warning('奖分上限不为0时每日奖分不能为空')
				return
			}else if(data.ahead_award_point && !data.ahead_award_point_limit){
				this.$message.warning('每日奖分不为0时奖分上限不能为空')
				return
			}
			if(!data.timeout_deduction_point && data.timeout_deduction_point_limit){
				this.$message.warning('扣分上限不为0时每日扣分不能为空')
				return
			}else if(data.timeout_deduction_point && !data.timeout_deduction_point_limit){
				this.$message.warning('每日扣分不为0时扣分上限不能为空')
				return
			}
			if(this.ahead_timeout(data.ahead_award_point,data.ahead_award_point_limit,'提前奖分','奖分')) return
			if(this.ahead_timeout(data.timeout_deduction_point,data.timeout_deduction_point_limit,'逾期扣分','扣分')) return
			if(!this.$getIsCreator('creator')||this.$getUserData().point_config.point_limit.length!=0){
				let entry_limit =  Number(this.$getUserData().point_config.point_limit[1].point)
				if(entry_limit > 0){
					if(data.ahead_award_point > entry_limit || data.timeout_deduction_point > entry_limit ){
						this.$message.warning('每日奖扣分 不能超过您的奖扣分权限（您的奖扣分权限：' + entry_limit + '分）')
						return
					}
					if(data.ahead_award_point_limit > entry_limit*10 || data.timeout_deduction_point_limit > entry_limit*10 ){
						this.$message.warning('奖扣分上限不能超过' + entry_limit*10 + '分（您的奖扣分权限' + entry_limit + '分*10）')
						return
					}
				}
			}
			let add = ['ahead_award_point', 'ahead_award_point_limit', 'timeout_deduction_point', 'timeout_deduction_point_limit']
			add.forEach(item =>{
				this.deletedata(data,item)
			})
			this.taskload = true;
			self.$axios('post', '/api/integral/work/update', data)
				.then(res => {
					if (res.data.code == 1) {
						this.$parent.get_list();
						self.$emit('update:dialogVisible', false);
						self.$refs[formName].resetFields();
						self.executorName = '';
						self.reviewerName = '';
						self.$message.success(res.data.msg);
					} else {
						self.$message.error(res.data.msg);
					}
				})
				.finally(() => {
					this.taskload = false;
				});
		},
		// 执行者
		approval_confirm(data) {
			this.approval_selected = { dept: [], employee: [] };
			this.formData.targets = [];
			this.executorName = '';
			if (data.employee !== null && data.employee.length != 0) {
				this.approval_selected = data;
				data.employee.forEach(element => {
					this.formData.targets.push(element.id);
					this.executorName += element.name + ',';
				});
			}
			this.show_employee_selector = false;
		},
		// 执行者 end
		// 审核人
		reviewer_confirm(data) {
			this.reviewer_selected = { dept: [], employee: [] };
			this.formData.reviewer_id = '';
			this.reviewerName = '';
			if (data.employee !== null && data.employee.length != 0) {
				this.reviewer_selected = data;
				this.formData.reviewer_id = data.employee[0].id;
				this.reviewerName = data.employee[0].name;
			}
			this.show_reviewer_selector = false;
		},
		closeDialog() {
			this.$emit('update:dialogVisible', false);
		}
	}
};
</script>
