{extend name="common/common2" /}
{block name="main"}
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <!--<div class="ibox-title">-->
                <!--<h5>{$title}</h5>-->
                <!--<div class="ibox-tools">-->
                    <!--<a class="toback" href="{:url('index')}">-->
                        <!--返回上一页-->
                    <!--</a>-->
                <!--</div>-->
            <!--</div>-->
            <div class="ibox-content">
                <div id="vueapp">
                    <div style="overflow: auto;padding: 15px 20px;">
                        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                            <el-form-item label="名称" prop="name">
                                <el-input v-model="form.name" maxlength="50" show-word-limit placeholder="请输入" />
                            </el-form-item>
                            <el-form-item label="参与考勤人员" prop="selectUser">
                                <el-select
                                        v-model="selectUser"
                                        placeholder="请选择"
                                        multiple
                                        collapse-tags
                                        filterable
                                >
                                <el-option
                                        v-for="item in users"
                                        :key="item.id"
                                        :label="item.real_name"
                                        :value="item.id">
                                </el-option>
<!--                                    <el-option-group-->
<!--                                            v-for="group in users"-->
<!--                                            :key="group.name"-->
<!--                                            :label="group.name"-->
<!--                                    >-->
<!--                                        <el-option-->
<!--                                                v-for="item in group.sub"-->
<!--                                                :key="item.USER_ID"-->
<!--                                                :label="item.REAL_NAME"-->
<!--                                                :value="item.USER_ID">-->
<!--                                        </el-option>-->
<!--                                    </el-option-group>-->
                                </el-select>
                            </el-form-item>
                            <el-form-item label="类型" prop="type">
                                <el-radio v-if="info" v-model="form.type" disabled label="1">
                                    固定班制
                                </el-radio>
                                <el-radio v-if="info" v-model="form.type" disabled label="2">
                                    排班制
                                </el-radio>
                                <el-radio v-if="!info" v-model="form.type" label="1">
                                    固定班制
                                </el-radio>
                                <el-radio v-if="!info" v-model="form.type" label="2">
                                    排班制
                                </el-radio>
                            </el-form-item>

                            <el-form-item v-if="Number(form.type) === 2" label="考勤班次">
                                <el-select
                                        v-if="classload"
                                        v-model="checkClass"
                                        multiple
                                        placeholder="请选择"
                                        style="width:100%;"
                                        @change="changePbClass"
                                >
                                    <el-option
                                            v-for="item in classes"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id.toString()"
                                    />
                                </el-select>
                            </el-form-item>

                            <el-form-item v-if="Number(form.type) === 2 && checkClass.length" label="排班周期">
                                <table border="0" style="width:100%;">
                                    <tr>
                                        <th>周期名称</th>
                                        <th>周期天数</th>
                                        <th>操作</th>
                                    </tr>
                                    <tr v-for="item in [circle]">
                                        <td>{{item.title}}</td>
                                        <td>{{item.days}}</td>
                                        <td>
                                            <el-link type="primary" :underline="false" @click="setCircle()">
                                                设置排班周期
                                            </el-link>
                                        </td>
                                    </tr>
                                </table>
                            </el-form-item>

                            <el-form-item v-if="Number(form.type) === 1" label="工作日设置">
                                <table border="0" style="width:100%;text-align: center;">
                                    <tr>
                                        <th style="width:120px">工作日</th>
                                        <th>班次时间段</th>
                                    </tr>
                                    <tr v-for="item in tableData">
                                        <td>{{item.text}}</td>
                                        <td>
                                            <el-select v-if="classload" v-model="item.class_id" size="small" clearable placeholder="请选择" style="width:100%">
                                                <el-option
                                                        v-for="item in classes"
                                                        :key="item.id"
                                                        :label="item.name"
                                                        :value="item.id"
                                                />
                                            </el-select>
                                        </td>
                                    </tr>
                                </table>

                            </el-form-item>

                            <el-form-item v-if="Number(form.type) === 1" label="特殊日期" >
                                <div>
                                    <el-button size="small" @click="handleClass(1,null)">
                                        添加
                                    </el-button> <span> 必须打卡的日期</span>
                                </div>

                                <table v-if="signTable.length > 0" border="0" style="width:100%;">
                                    <tr>
                                        <th>日期</th>
                                        <th>考勤时间</th>
                                        <th>操作</th>
                                    </tr>
                                    <tr v-for="item in signTable" >
                                        <td>{{item.day}}</td>
                                        <td>
                                            {{item.class_name}}
                                        </td>
                                        <td>
                                            <el-link type="primary" :underline="false" @click="handleClass(1, item)">
                                                编辑
                                            </el-link>
                                            <el-link type="danger" :underline="false" @click="delClass(1,item)">
                                                删除
                                            </el-link>
                                        </td>
                                    </tr>
                                </table>

                                <div>
                                    <el-button size="small" @click="handleClass(2,null)">
                                        添加
                                    </el-button> <span> 不用打卡的日期</span>
                                </div>
                                <table v-if="unsignTable.length > 0" border="0" style="width:100%;">
                                    <tr>
                                        <th>日期</th>
                                        <th>考勤时间</th>
                                        <th>操作</th>
                                    </tr>
                                    <tr v-for="item in unsignTable">
                                        <td>{{item.day}}</td>
                                        <td>
                                            休息
                                        </td>
                                        <td>
                                            <el-link type="danger" :underline="false" @click="changeClass(item)">
                                                删除
                                            </el-link>
                                        </td>
                                    </tr>
                                </table>
                            </el-form-item>

                            <el-form-item label="考勤方式">
                                <el-checkbox-group v-model="checkWay">
                                    <el-checkbox label="1" >
                                        地点打卡
                                    </el-checkbox>
                                    <el-checkbox label="2">
                                        考勤机打卡
                                    </el-checkbox>
                                </el-checkbox-group>
                                <!--                    <span class="text-danger">物业人员仅支持考勤机打卡</span>-->
                            </el-form-item>

                            <el-form-item label="考勤地点">
                                <el-select
                                        v-if="addrload"
                                        v-model="checkAddr"
                                        multiple
                                        collapse-tags
                                        placeholder="请选择"
                                >
                                    <el-option
                                            v-for="item in addr"
                                            :key="item.id"
                                            :label="item.title"
                                            :value="item.id.toString()"
                                    />
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" :loading="flag" @click="submitbtn('form')">
                                    确定
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </div>


                    <el-dialog
                            v-if="classVisible"
                            :title="title1"
                            :visible.sync="classVisible"
                            width="600px"
                            @close="handleCancelModal"
                    >
                        <el-form ref="classForm" :model="classForm" :rules="rules" label-position="right" label-width="120px">
                            <el-form-item label="日期">
                                <el-date-picker
                                        v-model="classForm.day"
                                        type="date"
                                        placeholder="请选择日期"
                                        :editable="false"
                                        value-format="yyyy-MM-dd"
                                        :clearable="true"
                                        @change="changeDate(classForm.type,classForm.edit)"
                                />
                                <div class="text-danger">
                                    {{ errormsg }}
                                </div>
                            </el-form-item>
                            <el-form-item v-if="classForm.type === 1" label="考勤班次">
                                <el-select v-if="classload" v-model="classForm.class_id" clearable placeholder="请选择">
                                    <el-option
                                            v-for="item in classes"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id"
                                    />
                                </el-select>
                            </el-form-item>
<!--                            <span slot="footer" class="dialog-footer">-->
                    <el-button type="primary" style="margin-left: 200px" @click="handleClassForm('classForm')">确 定</el-button>
                </span>
                        </el-form>

                    </el-dialog>

                    <el-dialog
                            v-if="circleVisible"
                            title="设置排班周期"
                            :visible.sync="circleVisible"
                            width="600px"
                            @close="handleCancelModal2"
                    >
                        <el-form v-if="circle" ref="circleForm" :model="circle" :rules="rules" label-position="right" label-width="120px">
                            <el-form-item label="周期名称">
                                <el-input v-model="circle.title" maxlength="10" show-word-limit placeholder="请输入名称" />
                            </el-form-item>
                            <el-form-item label="周期天数">
                                <el-input-number v-model="circle.days" :min="2" :max="31" :step="1" @change="changeDays" />
                            </el-form-item>
                            <el-form-item v-if="circle.class.length > 0" label="周期排班">
                                <div v-for="item in circle.class" :key="item.id">
                                    <span>第{{ item.id }}天: </span>
                                    <span v-if="selectClasses.length > 0">
                            <el-select v-model="item.class_id" size="small" clearable placeholder="请选择(不选即为休息)">
                                <el-option
                                        v-for="item2 in selectClasses"
                                        :key="item2.id"
                                        :label="item2.name"
                                        :value="item2.id"
                                />
                            </el-select>
                        </span>
                                </div>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                <el-button @click="handleCancelModal2">取 消</el-button>
                <el-button type="primary"  @click="handleCircleForm('circleForm')">确 定</el-button>
            </span>
                    </el-dialog>

                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>

    $(document).ready(function(){
        formSetValue("type", {$info.type|default=1});
    });

</script>

<script>
    var users = <?=json_encode($users)?>;
    var classes = <?=json_encode($classes)?>;
    var addrs = <?=json_encode($addrs)?>;
    var info = <?=json_encode($info)?>;
    console.log(info);

    new Vue({
    el: '#vueapp',
    data: function() {
    return {
        form : {
            id: 0,
                name: '',
                type: '1',
        },
        rules : {
            name: [
                { required: true, message: '请输入名称', trigger: 'blur' },
            ],
        },
        selectUser: [],
        users: users, // 所有用户
        checkClass:[], // 选择的考勤班次
        classload:true,
        // info: null,
        info: info?info:null,
        flag: false,
        tableData:[
            {
                week: 1, text: '周一', class_id: '', class_name: '',
            },
            {
                week: 2, text: '周二', class_id: '', class_name: '',
            },
            {
                week: 3, text: '周三', class_id: '', class_name: '',
            },
            {
                week: 4, text: '周四', class_id: '', class_name: '',
            },
            {
                week: 5, text: '周五', class_id: '', class_name: '',
            },
            {
                week: 6, text: '周六', class_id: '', class_name: '',
            },
            {
                week: 0, text: '周日', class_id: '', class_name: '',
            },
        ],
            signTable : [],
            unsignTable : [],
            circle : {
            title: '',
                days: 0,
                class: [
                {
                    id: 1,
                    class_id: '',
                },
                {
                    id: 2,
                    class_id: '',
                },
            ],
        },
        checkWay:['1', '2'],
            circleVisible:false,
            selectClasses : [],
            checkAddr:[],
            addr:addrs,
            addrload:true,
            classes:classes,
            title1: '必须打卡日期',
            errormsg:'',
            classForm:{
                day: '',
                class_id: '',
                type: 1,
                edit: 0,
        },
        oldday : '', // 编辑用
            classVisible:false,
            dataload:true,

    }
        },
    watch: {

    },

    created(){
        if(info){
            this.form = {
                id: info.id,
                    name: info.name,
                    type: info.type.toString(),
            };
            this.selectUser = info.userIds;
            this.users = users; // 所有用户
            this.checkClass = info.class_id?info.class_id.split(','):[]; // 选择的考勤班次
            this.checkAddr = info.addr?info.addr.split(','):[];
            this.addr = addrs;
            this.classes = classes;
            const content = JSON.parse(this.info.content);
            const way = this.info.cate ? this.info.cate.split(',') : [];
            this.checkWay = way ;
            const classs = this.info.classId ? this.info.classId.split(',') : [];
            classs.forEach((item) => {
                this.checkClass.push(item.toString());
            });
            if (this.info.type === 1) {
                this.tableData = content.week;
                this.signTable = content.sign;
                this.unsignTable = content.unsign;
            } else {
                this.circle = content.circle;

                this.selectClasses = [];
                this.classes.forEach((item) => {
                    if (this.checkClass.includes(item.id.toString())) {
                        this.selectClasses.push(item);
                    }
                });
            }
       }

    },

    methods: {
        changePbClass() {
            this.selectClasses = [];
            this.classes.forEach((item) => {
                if (this.checkClass.includes(item.id.toString())) {
                    this.selectClasses.push(item);
                }
            });

            this.circle = {
                title: '',
                days: 2,
                class: [
                    {
                        id: 1,
                        class_id: '',
                    },
                    {
                        id: 2,
                        class_id: '',
                    },
                ],
            };
        },
        handleClass(type, obj) {
            this.oldday = '';
            if (obj) {
                this.classForm = {
                    day: obj.day,
                    class_id: obj.class_id,
                    type,
                    edit: 1,
                };
                this.oldday = obj.day;
            } else {
                this.classForm = {
                    day: '',
                    class_id: '',
                    type,
                    edit: 0,
                };
            }

            if (type === 1) {
                this.title1 = '必须打卡的日期';
            } else {
                this.title1 = '不用打卡的日期';
            }
            this.classVisible = true;
        },
        delClass(type,obj){
            if (type === 1) {
                this.signTable = this.signTable.filter(item => item.day !== obj.day);
            } else {
                this.unsignTable = this.unsignTable.filter(item => item.day !== obj.day);
            }
        },
        changeClass(obj){
            this.unsignTable = this.unsignTable.filter(item => item.day !== obj.day);
        },

        handleCancelModal() {
            this.classVisible = false;
        },
        handleClassForm(formName) { // eslint-disable-line
            console.log(formName, this.classForm);
            if (this.errormsg) {
                return false;
            }

            if (!this.classForm.day) {
                this.$message.error('未选择日期');
                return false;
            } if (this.classForm.type === 1 && !this.classForm.class_id) {
                this.$message.error('未选择班次');
                return false;
            }

            if (this.classForm.type === 1) {
                let ff = false;
                this.signTable.forEach((item) => {
                    const info = item;
                    if (item.day === this.oldday && this.classForm.edit) { // 编辑
                        info.class_id = this.classForm.class_id;
                        info.day = this.classForm.day;
                        ff = true;
                    }

                });
                if (!ff) {
                    this.signTable.push({
                        day: this.classForm.day,
                        class_id: this.classForm.class_id,
                        class_name: '',
                    });
                }

                this.signTable.forEach((item) => {
                    const info = item;
                    this.classes.forEach((item2) => {
                        if (item2.id === info.class_id) {
                            info.class_name = item2.name;
                        }
                    });
                });

                const nsignTable = JSON.parse(JSON.stringify(this.signTable));
                this.signTable = [];
                this.signTable = JSON.parse(JSON.stringify(nsignTable));
            } else {
                this.unsignTable.push({
                    day: this.classForm.day,
                });

                const nunsignTable = JSON.parse(JSON.stringify(this.unsignTable));
                this.unsignTable = [];
                this.unsignTable = JSON.parse(JSON.stringify(nunsignTable));
            }
            console.log(this.signTable, this.unsignTable);
            this.classVisible = false;
        },

        goBack() {
            this.$router.go(-1);
        },

        changeDate(type, edit) {
            this.errormsg = '';
            if (this.classForm.day) {
                if(edit === 1){  // eslint-disable-line
                    if (type === 1) {
                        this.unsignTable.forEach((item) => {
                            if (item.day === this.classForm.day) {
                                this.errormsg = '该日期已被指定为不需要打卡';
                            }
                        });
                    } else {
                        this.signTable.forEach((item) => {
                            if (item.day === this.classForm.day) {
                                this.errormsg = '该日期已被指定为必须打卡';
                            }
                        });
                    }
                } else {
                    this.signTable.forEach((item) => {if (item.day === this.classForm.day) {
                        this.errormsg = '该日期已被指定为必须打卡';
                    }
                    });

                    this.unsignTable.forEach((item) => {
                        if (item.day === this.classForm.day) {
                            this.errormsg = '该日期已被指定为不需要打卡';
                        }
                    });
                }
            } else {
                this.errormsg = '';
            }
        },

        setCircle() {
            console.log('sss',this.selectClasses,this.checkClass);
            this.circleVisible = true;
        },
        handleCircleForm() {
            this.circleVisible = false;
        },
        handleCancelModal2() {
            this.circleVisible = false;
        },
        changeDays() {
            console.log('circle', this.circle);
            const newclass = [];
            for(let i=1;i<=this.circle.days;i++){ // eslint-disable-line
                newclass.push({
                    id: i,
                    class_id: '',
                });
            }
            newclass.forEach((item) => {
                const info = item;
                this.circle.class.forEach((item2) => {
                    if (item.id === item2.id) {
                        info.class_id = item2.class_id;
                    }
                });
            });

            this.circle.class = [];

            this.circle.class = JSON.parse(JSON.stringify(newclass));
        },
        submitbtn(formName){
            this.$refs[formName].validate((valid) => { // eslint-disable-line
                if (valid) {
                    this.flag = true;
                    let content = {};
                    if (Number(this.form.type) === 1) {
                        content = {
                            week: this.tableData,
                            sign: this.signTable,
                            unsign: this.unsignTable,
                        };
                    } else {
                        content = {
                            circle: this.circle,
                        };
                    }
                    let param = {
                        id: this.form.id,
                        name: this.form.name,
                        type: this.form.type,
                        cate: this.checkWay ? this.checkWay.join(',') : '',
                        classId: this.checkClass.length > 0 ? this.checkClass.join(',') : '',
                        addr: this.checkAddr.length > 0 ? this.checkAddr.join(',') : '',
                        content: JSON.stringify(content),
                        users: this.selectUser.join(','),
                    };
                    let that = this;
                    $.ajax({
                        url: 'add',
                        type: 'POST',
                        data: param,
                        success: function(data){
                            if(data.code == '1'){
                                layer.msg('操作成功',{time:2000})
                                parent.layer.closeAll();
                               // window.location.href = "{:url('AttendanceGroup/index')}"
                                // parent.window.location.reload();
                            }else{
                                layer.msg('操作失败')
                            }
                            that.flag = false;
                        },
                        error: function (){
                            that.flag = false;
                        }
                    });
                }
            });


        }
    }
    })
</script>
{/block}