<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" 
                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="HH: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="HH:mm"
                            format="H小时mm分钟"
                            placeholder="未设置">
                        </el-time-picker>
                    </div>
                </div>
            </el-form-item>
        </el-form>
        <div class="dialog-footer ml20">
            <el-button type="primary" size="mini" v-if="pageInfo.type !== 'view'" @click="submitForm">确 定</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";
    export default {
        mixins: [form],
        components: {
            dialogShow ,
        },
        data() {
            var validteList = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请添加上班时间'))
                }else if(!this.judgeStatus(value) ){
                    callback(new Error('请完成输入'))
                }else{
                    callback()
                }
            }
            return {
                // 子表选中数据
                checkedAttendanceClassDetail: [],
                // 考勤班次详细信息表格数据
                attendanceClassDetailList: [],
                // 遮罩层
                loading: true,
                // 弹出层标题
                title: "考勤班次信息",
                // 是否显示弹出层
                open: false,
                toString:[
                ],
                // 表单校验
                rules: {
                    className: [
                        {required: true,message: "请输入班次名称" },
                    ],
                    classResponsiblePersonId:[
                        {required: true,message: "请选择班次负责人" },
                    ],
                    attendanceClassDetailList:[
                        {required: true,message: "请添加" },
                        { validator:validteList,trigger:'change'}
                    ]
                },
                currentIndex:0//当前索引值
            };
        },
        created(){
            // this.transFormMinut('09:03')
        },
        methods: {
            // 时间转分钟
            transFormMinut(String){
                if(!String){
                    return 0
                }
                let arr = String.split(':')
                let hour = arr[0].indexOf('0') === 0? arr[0].substring(1,arr[0].length):arr[0]
                let minu = arr[1].indexOf('0') === 0? arr[1].substring(1,arr[1].length):arr[1]
                return hour*60 + minu*1
            },
            /** 考勤班次详细信息序号 */
            rowAttendanceClassDetailIndex({ row, rowIndex }) {
                row.index = rowIndex + 1;
            },
            /** 考勤班次详细信息添加按钮操作 */
            handleAddAttendanceClassDetail() {
                let value = this.judgeStatus(this.attendanceClassDetailList)
                if(value){
                    if(this.attendanceClassDetailList.length == 0){
                        this.currentIndex = 0
                    }else{
                        this.currentIndex ++
                    }
                    let obj = {};
                    obj.goWorkDate = "";
                    obj.goWorkDateBefore = "";
                    obj.goWorkDateAfter = "";
                    obj.offWorkDate = "";
                    obj.offWorkDateBefore = "";
                    obj.offWorkDateAfter = "";
                    this.attendanceClassDetailList.push(obj);                    
                }else{
                    this.$message.error("请完成当前设置再添加")
                }
            },
            // 判断添加上下班时间
            judgeStatus(arr){
                let status = true
                if(arr.length == 0){  

                }else if(arr.length == 1){
                    console.log(arr[this.currentIndex])
                    for(let key in arr[this.currentIndex]){
                        if(!arr[this.currentIndex][key]){
                            status = false
                            return
                        }
                    }
                    //比较下班和上班
                    let workTime = this.transFormMinut(arr[this.currentIndex].goWorkDate)+
                    this.transFormMinut(arr[this.currentIndex].goWorkDateAfter)

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

                    if(offworkTime <= workTime){
                        this.$message.error('下班打卡时间不能小于上班打卡时间')
                        status = false
                        return
                    }
                }
                else{
                    for(let key in arr[this.currentIndex]){
                        if(!this.arr[this.currentIndex][key]){
                            status = false
                            return
                        }
                    }
                    // 上一次比较
                    let lastworkTime = this.transFormMinut(arr[this.currentIndex-1].goWorkDate) +
                    this.transFormMinut(arr[this.currentIndex - 1 ].goWorkDateAfter)

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

                    //当前
                    let workTime = this.transFormMinut(arr[this.currentIndex].goWorkDate)+
                    this.transFormMinut(arr[this.currentIndex].goWorkDateAfter)

                    let offworkTime = this.transFormMinut(arr[this.currentIndex].offWorkDate)-
                    this.transFormMinut(arr[this.currentIndex].offWorkDateBefore) 
                    if(currentwokeTime<=lastworkTime){
                        this.$message.error(`第${this.currentIndex}上班时间需大于第${this.currentIndex-1}上班时间`)
                        status = false
                        return
                    }
                    if(offworkTime <= workTime){
                        this.$message.error('下班打卡时间不能小于上班打卡时间')
                        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) {
                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>