{extend name="common/common2" /}
{block name="main"}
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-content">
                <div id="vueapp">
                    <div style="min-height:500px;overflow: auto;padding: 15px 20px;">
                        <h4>打卡记录</h4>
                        <p v-if="info && info.classId === 0">
                            未安排考勤
                        </p>

                        <el-timeline v-if="info">
                            <template v-for="(item,index) in info.content">
                                <el-timeline-item :key="index" :timestamp="`第${Number(index) + 1}次上班 ${item.stime}`" placement="top">
                                    <div>
                                        <div v-if="item.slist && item.slist.length > 0">
                                            <div v-for="(item2,index2) in item.slist" :key="index2">
                                                <h4>
                                                    {{ item2.create_time }} ~~
                                                    <span>
                                            {{ item2.result }}
                                            <el-link v-if="info.status === 1 && item2.effective === 1 && (item2.status === 1||item2.status === 2)" type="warning" @click="changeAttendance(info.id,item.stime,1,item2.status)">
                                                修改
                                            </el-link>
                                        </span>
                                                </h4>
                                            </div>
                                        </div>
                                        <div v-if="info.status === 1 && !item.slist || item.slist.length === 0">
                                            <el-link type="warning" @click="changeAttendance(info.id,item.stime,1,0)">
                                                缺卡
                                            </el-link>
                                        </div>
                                    </div>
                                </el-timeline-item>
                                <el-timeline-item :key="`aa${index}`" :timestamp="`第${Number(index) + 1}次下班 ${item.etime}`" placement="top">
                                    <div>
                                        <div v-if="item.elist && item.elist.length > 0">
                                            <div v-for="(item2,index2) in item.elist" :key="index2">
                                                <h4>
                                                    {{ item2.create_time }} ~~
                                                    <span>
                                            {{ item2.result }}
                                            <el-link v-if="info.status === 1 && item2.effective === 1 && (item2.status === 1||item2.status === 2)" type="warning" @click="changeAttendance(info.id,item.etime,2,item2.status)">
                                                修改
                                            </el-link>
                                        </span>
                                                </h4>
                                            </div>
                                        </div>
                                        <div v-if="info.status === 1 && !item.elist || item.elist.length === 0">
                                            <el-link type="warning" @click="changeAttendance(info.id,item.etime,2,0)">
                                                缺卡
                                            </el-link>
                                        </div>
                                    </div>
                                </el-timeline-item>
                            </template>
                        </el-timeline>

                        <div v-if="info && info.leave.length > 0">
                            <h4>请假记录</h4>
                            <el-table :data="info.leave" style="width: 100%">
                                <el-table-column prop="leaveType" label="请假类型" />
                                <el-table-column prop="curDays" label="请假天数" />
                                <el-table-column prop="startTime" label="开始时间" />
                                <el-table-column prop="endTime" label="结束时间" />
                            </el-table>
                        </div>

                        <el-dialog
                                v-if="2"
                                title="修改打卡信息"
                                width="400px"
                                :visible.sync="dialogFormVisible2"
                                :append-to-body="true"
                                center
                                @close="handleCloseDialog2"
                        >
                            <el-form ref="form" :model="form" label-width="100px">
                                <el-form-item label="操作" prop="enable">
                                    <el-radio v-model="form.type" label="1">
                                        正常
                                    </el-radio>
                                    <el-radio v-model="form.type" label="2">
                                        <span v-if="form.cate === 1">迟到</span>
                                        <span v-if="form.cate === 2">早退</span>
                                    </el-radio>
                                </el-form-item>
                                <el-form-item label="分钟" prop="min">
                                    <el-input v-model="form.min" type="number" min="0" placeholder="" />
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" :loading="flag" @click="submitbtn('form')">
                                        确定
                                    </el-button>
                                </el-form-item>
                            </el-form>
                        </el-dialog>

                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    var info = <?=json_encode($info)?>;

    new Vue({
    el: '#vueapp',
    data: function() {
    return {
        info: info,
            dialogFormVisible2:false,
            form : {
            type: '1',
                time: '',
                min: 0,
                id: 0,
                cate: 1,
                status: 0,
        },
        flag:false
    }
        },
    watch: {

    },

    methods: {
        // 修改打卡结果
        changeAttendance(id, time, cate, status) {
            console.log(id, time, cate, status);
            this.form = {
                type: '1',
                time,
                min: 0,
                id,
                cate,
                status,
            };
            this.dialogFormVisible2 = true;
        },
        handleCloseDialog2() {
            this.dialogFormVisible2 = false;
        },
        submitbtn() { //eslint-disable-line
            if (Number(this.form.type) === 2 && Number(this.form.min) <= 0) {
                layer.msg('分钟数必须大于0')
                return false;
            }
            // this.flag = true;
            let that = this;
            $.ajax({
                url: "{:url('AttendanceRecord/changeAttendance')}",
                type: 'POST',
                data: this.form,
                success: function(data){
                    console.log(data);
                    if(data.code == 1){
                        this.flag = false;
                        this.dialogFormVisible2 = false;
                        window.location.reload();
                    }else{
                        layer.msg('操作失败')
                    }
                    that.flag = false;
                },
                error: function (){
                    that.flag = false;
                }
            });
        }

    }
    })

</script>
{/block}