<template>
    <!-- 班次表单 -->
    <el-drawer :title="title" :visible.sync="open" size="55%">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-row>
                <Field label="班次名称" prop="className" v-model="form.className" placeholder="请输入班次名称"/>
                <Field label="班次负责人" prop="classResponsiblePersonId" type="select" :enumData="dict.workManId" 
                v-model="form.classResponsiblePersonId" placeholder="请选择班次负责人"/>
            </el-row>
            <el-form-item label="上下班时间" prop="attendanceClassDetailList">
                <el-button type="text" @click="handleAddAttendanceClassDetail">添加</el-button>
                <div class="bancifor" v-for="(item,index) in attendanceClassDetailList" :key="index">
                    <div class="title flex flex-align-center flex-pack-justify">
                        <span>
                            第{{index+1}}次上班
                        </span>
                        <el-button type="danger" size="mini" @click="handleDeleteAttendanceClassDetail(index)">删除</el-button>
                    </div>
                    <div>
                        <span>上班时间</span>
                        <el-time-picker
                            size="mini"
                            style="width:150px"
                            class="ml20"
                            value-format="HH:mm"
                            format="HH:mm"
                            v-model="item.goWorkDate"
                            placeholder="上班时间">
                        </el-time-picker>
                    </div>
                    <div>
                        <span>打开时段： </span>
                        <span>上班前</span>
                            <el-time-picker
                            size="mini"
                            style="width:150px"
                            class="ml20"
                            v-model="item.goWorkDateBefore"
                            value-format="H:mm"
                            format="H小时mm分钟"
                            placeholder="未设置">
                            </el-time-picker>
                        <span class="ml20">——</span>
                        <span class="ml20">上班后</span>
                        <el-time-picker
                            size="mini"
                            style="width:150px"
                            class="ml20"
                            v-model="item.goWorkDateAfter"
                            value-format="HH:mm"
                            format="H小时mm分钟"
                            placeholder="未设置">
                        </el-time-picker>
                    </div>
                    <div>
                        <span>下班时间</span>
                        <el-time-picker
                            size="mini"
                            style="width:150px"
                            class="ml20"
                            format="HH:mm"
                            value-format="HH:mm"
                            v-model="item.offWorkDate"
                            placeholder="下班时间">
                        </el-time-picker>
                    </div>
                    <div>
                        <span>打开时段：</span>
                        <span>下班前</span>
                        <el-time-picker
                            size="mini"
                            style="width:150px"
                            class="ml20"
                            v-model="item.offWorkDateBefore"
                            value-format="H:mm"
                            format="H小时mm分钟"
                            placeholder="未设置">
                        </el-time-picker>
                        <span class="ml20">——</span>
                        <span class="ml20">下班后</span>
                        <el-time-picker
                            size="mini"
                            style="width:150px"
                            class="ml20"
                            v-model="item.offWorkDateAfter"
                            value-format="H:mm"
                            format="H小时mm分钟"
                            placeholder="未设置">
                        </el-time-picker>
                    </div>
                </div>
            </el-form-item>
        </el-form>
        <div class="dialog-footer ml20">
            <!-- submitForm -->
            <el-button type="primary" size="mini" v-if="pageInfo.type !== 'view'" @click="formatData">确 定</el-button>
            <el-button @click="cancel" size="mini">取 消</el-button>
        </div>
    </el-drawer>
</template>
<script>
    import form from "@/assets/mixins/formdialog";
    import dialogShow from "./dialogshow";
    import {transFormMinut,transFormTime} from '@/assets/utils/dateFormat.js'
    export default {
        mixins: [form],
        components: {
            dialogShow ,
        },
        data() {
            return {
                // 子表选中数据
                checkedAttendanceClassDetail: [],
                // 考勤班次详细信息表格数据
                attendanceClassDetailList: [],
                // 遮罩层
                loading: true,
                // 弹出层标题
                title: "考勤班次信息",
                // 是否显示弹出层
                open: false,
                toString:[
                ],
                // 表单校验
                rules: {
                    className: [
                        {required: true,message: "请输入班次名称" },
                    ],
                    classResponsiblePersonId:[
                        {required: true,message: "请选择班次负责人" },
                    ],
                    attendanceClassDetailList:[
                        {required: true,message: "请添加" }
                    ]
                },
                currentIndex:0//当前索引值
            }
        },
        created(){
        },
        methods: {
            formatData(){
                let value = true

                if(this.attendanceClassDetailList.length < 1){
                    this.$message.error('请完整打卡时间填写')
                    value = false
                    return
                }else{
                    console.log(this.attendanceClassDetailList.length,'执行了')
                    this.attendanceClassDetailList.forEach((item,index) => {
                        let valueres = this.judgeStatus(this.attendanceClassDetailList,index)
                        if(!valueres){
                            value = false
                            return
                        }
                    })
                }

                if(value){
                    console.log('测试')
                    this.attendanceClassDetailList.forEach(item => {
                        item.goWorkDateBefore =  transFormMinut(item.goWorkDateBefore)
                        item.goWorkDateAfter =  transFormMinut(item.goWorkDateAfter)
                        item.offWorkDateBefore = transFormMinut(item.offWorkDateBefore)
                        item.offWorkDateAfter = transFormMinut(item.offWorkDateAfter)
                    })
                    this.submitForm()
                }else{
                    
                    this.$message.error('打卡时间填写有误')
                }
                
            },
            /** 考勤班次详细信息序号 */
            rowAttendanceClassDetailIndex({ row, rowIndex }) {
                row.index = rowIndex + 1;
            },
            /** 考勤班次详细信息添加按钮操作 */
            handleAddAttendanceClassDetail() { 
                let obj = {};
                obj.goWorkDate = "";
                obj.goWorkDateBefore = "";
                obj.goWorkDateAfter = "";
                obj.offWorkDate = "";
                obj.offWorkDateBefore = "";
                obj.offWorkDateAfter = "";
                obj.remark = "";
                this.attendanceClassDetailList.push(obj);                    
                
            },
            // 判断添加上下班时间
            judgeStatus(arr,index){
                console.log(arr,index,'ces')
                let status = true
                if(arr.length == 0){  
                }else{
                    if(arr[index].goWorkDate === ''){
                        this.$message.error('请选择上班时间')
                        status = false
                        return
                    }
                    if(arr[index].goWorkDateBefore === ''){
                        this.$message.error('请选择允许上班前打卡时间')
                        status = false
                        return
                    }
                    if(arr[index].goWorkDateAfter === ''){
                        this.$message.error('请选择允许上班后打卡时间')
                        status = false
                        return
                    }

                    if(arr[index].offWorkDate === ''){
                        this.$message.error('请选择下班时间')
                        status = false
                        return
                    }
                    if(arr[index].offWorkDateBefore === ''){
                        this.$message.error('请选择允许下班前打卡时间')
                        status = false
                        return
                    }
                    if(arr[index].offWorkDateAfter === ''){
                        this.$message.error('请选择允许下班后打卡时间')
                        status = false
                        return
                    }
                    //当前比较下班和上班
                    let workTime = transFormMinut(arr[index].goWorkDate)+
                    transFormMinut(arr[index].goWorkDateAfter)

                    let offworkTime = transFormMinut(arr[index].offWorkDate)-
                    transFormMinut(arr[index].offWorkDateBefore)

                    if(offworkTime <= workTime){
                        this.$message.error('下班打卡时间不能小于上班打卡时间')
                        status = false
                        return
                    }
                    if(arr.length > 1 && index>0){
                        console.log(11111)
                        // 上一次比较
                        let lastoffTime = transFormMinut(arr[index-1].offWorkDate) +
                        transFormMinut(arr[index - 1 ].offWorkDateAfter)

                        let currentwokeTime = transFormMinut(arr[index].goWorkDate) - 
                        transFormMinut(arr[index].goWorkDateBefore)

                        if(currentwokeTime <= lastoffTime){
                            this.$message.error(`第${index}上班时间需大于第${index-1}上班时间`)
                            status = false
                            return
                        }
                    }                    
                }
                return status
            },
            /** 考勤班次详细信息删除按钮操作 */
            handleDeleteAttendanceClassDetail(index) {
                this.$alert('确定要删除这条设置吗', '删除提醒', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.attendanceClassDetailList.splice(index,1)
                        this.currentIndex --
                    }
                })
            },
            /** 单选框选中数据 */
            handleAttendanceClassDetailSelectionChange(selection) {
                if (selection.length > 1) {
                    this.$refs.attendanceClassDetail.clearSelection();
                    this.$refs.attendanceClassDetail.toggleRowSelection(selection.pop());
                } else {
                    this.checkedAttendanceClassDetail = selection;
                }
            },
            // 渲染前置处理
            beforeRender(data) {
                if(data.entity.attendanceClassDetailList) {
                    this.attendanceClassDetailList = data.entity.attendanceClassDetailList;
                }
                return data
            },
            /** 编辑 */
            edit(row) {
                this.reset()
                this.query = { id: row.id };
                this.urls.currUrl ="attendance/class/edit";
                this.getData();  
                this.pageInfo.type="edit"
                this.title = "修改考勤班次信息";

            },
            /** 新增 */
            add(row) {
                this.reset()
                this.urls.currUrl = "attendance/class/add";
                this.getData();
                this.pageInfo.type="add"
                this.title = "新增考勤班次信息";
            },
            /** 查看*/
            view(row) {
                this.reset()
                this.query = { id: row.id };
                this.urls.currUrl ="attendance/class/view";
                this.getData();
                this.pageInfo.type="view"
                this.title = "考勤班次信息详细";
            },
            /**取消按钮 */
            cancel() {
                this.open = false;
            },
            /**获取数据后弹框 */
            afterRender(data) {
                if(this.attendanceClassDetailList.length>0){
                    this.attendanceClassDetailList.forEach(item => {
                        item.goWorkDateBefore =  transFormTime(item.goWorkDateBefore)
                        item.goWorkDateAfter =  transFormTime(item.goWorkDateAfter)
                        item.offWorkDateBefore = transFormTime(item.offWorkDateBefore)
                        item.offWorkDateAfter = transFormTime(item.offWorkDateAfter)
                    })
                    this.currentIndex = this.attendanceClassDetailList.length - 1
                    this.form.classResponsiblePersonId = this.form.classResponsiblePersonId.toString()
                    console.log(this.currentIndex,'执行了')
                }
                this.open = true;
            },

            afterSubmit(data) {
                this.open = false;
                this.$emit("ok");
            },

            // 表单重置
            reset() {
                this.form = {
                    className : "",
                    classResponsiblePersonId : null,
                    classResponsiblePersonName : "",
                    remark : "",
                };
                this.resetForm("form");
            },
            resetForm(refName) {
                if (this.$refs[refName]) {
                    this.$refs[refName].resetFields();
                }
            },
        },
    };
</script>
<style scoped lang="less">
.bancifor{
    background-color: #f5f5f5;
    padding: 10px;
    margin-bottom: 15px;
    .title{
        border-bottom: 1px solid rgb(206, 206, 206);
    }
}
</style>