<template>
    <div class="page">
        <LayoutTable :data="tableData" :config="tableConfig" notAdd notDel>
            <el-button
                slot="table-head-left2"
                style="margin-left: 10px"
                icon="el-icon-tickets"
                size="mini"
                type="primary"
                @click="doExport"
                :disabled="isExport"
            >导出</el-button>
            <el-button
                slot="table-head-left2"
                style="margin-left: 10px"
                icon="el-icon-tickets"
                size="mini"
                type="success"
                @click="lookexportHis"
            >导出记录</el-button>
            <el-button
                slot="table-head-left2"
                style="margin-left: 10px"
                icon="el-icon-tickets"
                size="mini"
                @click="setdialog"
            >表格设置</el-button>
        </LayoutTable>
        <dialog-show ref="dialogform" @ok="getData" />
        <!-- 表格设置 -->
        <el-dialog :visible.sync="isdialog" title="导出表格设置">
            <div class="tipsword">请选择表格展示字段，导出的表格中的内容选中的字段将保持一致。</div>
            <el-checkbox-group v-model="checkList">
                <el-checkbox v-for="(item,index) in setcolum" :key="index" :label="item.label">
                </el-checkbox>
            </el-checkbox-group>
            <div class="mt20" style="text-align:right">
                <el-button>取消</el-button>
                <el-button type="primary">确定</el-button>
            </div>
        </el-dialog>
        <!-- 导出记录查看 -->
        <el-drawer
        title="导出记录"
        :visible.sync="drawerhistory"
        :direction="direction">
            <div class="hisList">
                <div class="list mt10" v-for="item in 10" :key="item">
                    <div class="flex flex-align-center flex-pack-justify">
                        <div>打卡记录汇总</div>
                        <el-button type="text">导出成功</el-button>
                    </div>
                    <div class="times">
                        导出时间：2020-08-13
                    </div>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
    /** 表单弹出框模式需引入 */
    import dialogShow from "./dialogshow";
    import table from "@/assets/mixins/table";
    export default {
        name: "AttendanceStatList",
        components: {
            dialogShow
},
        mixins: [table],
        created() {
        },
        methods: {
            /** 重写新增方法 */
            toAdd(row) {
                this.$refs.dialogform.add(row);
            },
            /** 重写编辑方法 */
            toEdit(row) {
                this.$refs.dialogform.edit(row);
            },
            /** 重写查看方法 */
            toView(row) {
                this.$refs.dialogform.view(row);
            },
            setdialog(){
                this.isdialog = true
                this.setcolum = this.config.columns.filter(item => item.label&&item.prop)
            },
            lookexportHis(){
                this.drawerhistory = true
            },
            /** 导出Excel */
            doExport() {
                this.isExport = true;
                this.$download("/attendance/stat/exportExcel", {
                    "idList": this.selection,
                }, { type: "excel" }).then(() => this.isExport = false).catch(error => {
                    this.isExport = false;
                    this.$message.error(error.message);
                })
            }
        },
        data() {
            return {
                config: {
                    isshowTabPane:true,
                    search: [
                         {
                            name: "deptId",
                            type: "select",
                            label: "全部部门",
                            fuzzy: true
                        },
                        {
                            name: "deptId",
                            type: "select",
                            label: "全部考勤组",
                            fuzzy: true
                        },
                        {
                            name: "deptId",
                            type: "select",
                            label: "全部班次",
                            fuzzy: true
                        },
                        {
                            name:'startTime',
                            type: "date",
                            valueFormat:'YYYY-dd-MM',
                            label: "考勤开始时间",
                            fuzzy: true
                        },
                        {
                            name:'endTime',
                            type: "date",
                            valueFormat:'YYYY-dd-MM',
                            label: "考勤结束时间",
                            fuzzy: true
                        },
                        {
                            name: "staffName",
                            type: "text",
                            label: "员工姓名",
                            fuzzy: true
                        },
                        {
                            name: "phoneNumber",
                            type: "text",
                            label: "手机号",
                            fuzzy: true
                        }
                    ],
                    columns: [
                        {type: "selection", width: 60},
                        {type: "index",label: "序号",width: 50},

                        {label: "窗口类别", prop: "windowCategory"},

                        {label:"部门",prop:"bumentId"},

                        {label: "员工姓名", prop: "staffName"},

                        {label: "回单位（天）", prop: "backToUnit", formatter: this.formatterMoney},

                        {label: "因公请假（天）", prop: "onDutyLeave", formatter: this.formatterMoney},

                        {label: "外出勘验（天）", prop: "outOfOffice", formatter: this.formatterMoney},

                        {label: "值班补班（天）", prop: "shiftCompensation", formatter: this.formatterMoney},

                        {label: "体检（天）", prop: "physicalExamination", formatter: this.formatterMoney},

                        {label: "隔离（天）", prop: "quarantine", formatter: this.formatterMoney},

                        {label: "因公外出（与窗口工作无关/天）", prop: "businessTrip", formatter: this.formatterMoney},

                        {label: "公休（天）", prop: "publicHoliday", formatter: this.formatterMoney},

                        {label: "病假（天）", prop: "sickLeave", formatter: this.formatterMoney},

                        {label: "丧假（天）", prop: "funeralLeave", formatter: this.formatterMoney},

                        {label: "婚假（天）", prop: "marriageLeave", formatter: this.formatterMoney},

                        {label: "育儿假（天）", prop: "childRearingLeave", formatter: this.formatterMoney},

                        {label: "产假（陪护假/天）", prop: "maternityLeave", formatter: this.formatterMoney},

                        {label: "调回单位（或离职/天）", prop: "transferBack", formatter: this.formatterMoney},

                        {label: "探亲假（天）", prop: "homeLeave", formatter: this.formatterMoney},

                        {label: "事假（天）", prop: "personalLeave", formatter: this.formatterMoney},

                        {label: "旷工（天）", prop: "absenteeismDays", formatter: this.formatterMoney},

                        {label: "其他（天）", prop: "otherDays", formatter: this.formatterMoney},

                        {label: "出勤率%", prop: "attendanceRate", formatter: this.formatterMoney},

                        {label: "未按规定打卡（含忘记打卡）", prop: "nonCompliancePunch", formatter: this.formatterMoney},

                        {label: "迟到（次）", prop: "lateTimes",formatter: this.formatter},

                        {label: "上网耍手机（次）", prop: "surfingMobileTimes",formatter: this.formatter},

                        {label: "溜班（次）", prop: "overtimeTimes",formatter: this.formatter},

                        {label: "空岗（次）", prop: "vacancy", formatter: this.formatterMoney},

                        {label: "未规范着装（次）", prop: "nonStandardDressTimes",formatter: this.formatter},

                        {label: "无故缺席会议（次）", prop: "unexcusedMeetingAbsence", formatter: this.formatterMoney},

                        {label: "会议早退", prop: "earlyLeaveMeeting", formatter: this.formatterMoney},

                        // {label: "创建用户", prop: "createUserId", formatter: this.formatter},
                        {
                            label: "操作",
                            width: 240,
                            formatter: row => {
                                return (
                                    <table-buttons noAdd noEdit noView noDel row={row} onEdit={this.toEdit} 
                                    onView={this.toView} onDel={this.toDel} />
                            );
                            }
                        }
                    ]
                },
                setcolum:[],
                isdialog:false,
                checkList:[],
                drawerhistory:false
            };
        }
    };
</script>
<style scoped lang="less">
.hisList{
    padding: 15px;
    .list{
        background-color: rgba(64, 158, 255, 0.1);
        font-size: 14px;
        border-radius: 10px;
        padding: 10px;
        .times{
            font-size: 12px;
            color: #999;
        }
    }
}
.tipsword{
    margin: 20px 0;
    color: #999;
}
</style>