<template>
    <div class="page">
        <div style="margin:10px 0">
           <tab-pane :thirdList="thirdList" :activeName="activeName" @handleClick="handleClick"></tab-pane>
        </div>
        <div class="totalNum flex">
            <div class="item flex">
              <div>需要打卡人数 <span class="num">{{1}}</span></div>
              <div>未出勤  <span class="num">{{1}}</span></div>
              <div>出勤率 <span class="num">{{1}}</span></div>              
            </div>

            <div class="item flex">
              <div>迟到 <span class="num">{{1}}</span></div>
              <div>早退  <span class="num">{{1}}</span></div>
              <div>缺卡 <span class="num">{{1}}</span></div>              
            </div>
        </div>
        <LayoutTable :data="tableData" :config="tableConfig" notDel notAdd>
            <el-button
                slot="table-head-left2"
                style="margin-left: 10px"
                icon="el-icon-tickets"
                size="mini"
                @click="handleImport"
            >导入</el-button>
            <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>
        <drawer-show ref="drawerform" @ok="getData" />
        <!-- 导出记录查看 -->
        <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>
        <!-- 表格设置 -->
        <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-dialog
            :title="upload.title"
            :visible.sync="upload.open"
            width="400px"
            append-to-body
        >
        <el-upload
            ref="upload"
            :limit="1"
            accept=".xlsx, .xls"
            :headers="upload.headers"
            :action="upload.url + '?updateSupport=' + upload.updateSupport"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :auto-upload="false"
            drag
        >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
            <el-checkbox
                v-model="upload.updateSupport"
            />是否更新已经存在的数据
            <el-link type="primary" style="font-size: 14px" @click="downloadTemplate"
            >下载模板</el-link
            >
            </div>
            <div class="el-upload__tip" style="color: red" slot="tip">
            提示：仅允许导入“xls”或“xlsx”格式文件！
            </div>
        </el-upload>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitFileForm">确 定</el-button>
            <el-button @click="upload.open = false">取 消</el-button>
        </div>
        </el-dialog>
    </div>
</template>

<script>
    /** 表单弹出框模式需引入 */
    import drawerShow from "./drawershow";
    import table from "@/assets/mixins/table";
    import TabPane from "@/components/tabPane.vue"
    export default {
        name: "AttendanceRecordList",
        components: {
            drawerShow,
            TabPane,
        },
        mixins: [table],
        computed:{
          thirdList(){
              if(!this.$store.state.CurrentThirdArr) return []
              return this.$store.state.CurrentThirdArr
          },
          activeName(){
              return this.$store.state.ThirdPath
          }
        },
        created() {
        },
        methods: {
            /** 导入 */
            handleImport() {
                this.upload.title = "打卡记录导入";
                this.upload.open = true;
            },
                /** 下载模板操作 */
            downloadTemplate() {
                this.isExport = true;
                this.$download("/attendance/record/downloadTemplate", {}, { type: "excel" })
                    .then(() => (this.isExport = false))
                    .catch((error) => {
                        this.isExport = false;
                        this.$message.error(error.message);
                    })
            },
            /** 文件上传中处理 */
            handleFileUploadProgress(event, file, fileList) {
                this.upload.isUploading = true;
            },
                /** 文件上传成功处理 */
            handleFileSuccess(response, file, fileList) {
                this.upload.open = false;
                this.upload.isUploading = false;
                this.$refs.upload.clearFiles();
                this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
                this.getData();
            },
                /** 提交上传文件 */
            submitFileForm() {
                this.$refs.upload.submit();
            },
            /** 导出Excel */
            doExport() {
                this.isExport = true;
                this.$download("/attendance/record/exportExcel", {
                    "idList": this.selection,
                }, { type: "excel" }).then(() => this.isExport = false).catch(error => {
                    this.isExport = false;
                    this.$message.error(error.message);
                })
            },
            setdialog(){
                this.isdialog = true
                this.setcolum = this.config.columns.filter(item => item.label&&item.prop)
            },
            lookexportHis(){
                this.drawerhistory = true
            },
            renderTable(tableData) {
                return (
                    <el-table stripe data={tableData} class="total-table">
                    {this.columnSet.map((item) => this.renderTableColumn(item))}
                    </el-table>
                );
            },
            renderTableColumn(options) {
                return (
                    <el-table-column
                        prop={options.prop}
                        label={options.label}
                        width={options.width}
                    >
                    </el-table-column>
                 );
            },
            /** 重写新增方法 */
            toAdd(row) {
                this.$refs.drawerform.add(row);
            },
            /** 重写编辑方法 */
            toEdit(row) {
                this.$refs.drawerform.edit(row);
            },
            /** 重写查看方法 */
            toView(row) {
                this.$refs.drawerform.view(row);
            },
            handleClick(key){
                console.log(key)
                this.$store.commit('setThirdPath',key)
                this.$router.push({
                    path:key
                })
            }
        },
        data() {
            return {
                upload: {
                    // 是否显示弹出层（员工关怀信息导入）
                    open: false,
                    // 弹出层标题（员工关怀信息导入）
                    title: "每日打卡记录",
                    // 是否禁用上传
                    isUploading: false,
                    // 是否更新已经存在的数据
                    updateSupport: 0,
                    // 上传的地址
                    url: "/attendance/record/importData",
                },
                /** 子表列元素 */
                columnSet:[
                    {prop:"recordId",label:"考勤记录ID",width:100},
                    {prop:"shiftsId",label:"班次ID",width:100},
                    {prop:"shiftsName",label:"班次名称",width:100},
                    {prop:"goWorkDate",label:"上班打卡时间",width:100},
                    {prop:"goWorkResult",label:"上班打卡结果",width:100},
                    {prop:"offWorkDate",label:"下班打卡时间",width:100},
                    {prop:"offWorkResult",label:"下班打卡结果",width:100},
                    {prop:"remark",label:"备注",width:100},
                ],
                config: {
                    search: [
                        {
                            name: "staffName",
                            type: "text",
                            label: "员工姓名",
                            fuzzy: true
                        },
                        {
                            name: "phone",
                            type: "text",
                            label: "手机号",
                            fuzzy: true
                        },
                        {
                            name: "deptId",
                            type: "select",
                            label: "所属部门",
                            fuzzy: true
                        },
                        {
                            name: "attendanceGroupId",
                            type: "select",
                            label: "所属考勤组",
                            fuzzy: true
                        },
                        {
                            name: "shiftsId",
                            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
                        }
                    ],
                    columns: [
                        {type: "selection", width: 60},
                        {type: "index",label: "序号",width: 50},
                        {label: "打卡日期", prop: "attendanceDate", formatter: this.formatterDate},
                        {label: "员工姓名", prop: "staffName"},
                        {label: "考勤组", prop: "attendanceGroupName"},
                        {label: "部门", prop: "deptName"},
                        {label: "职位", prop: "positionName"},
                        {label: "班次", prop: "shiftsName"},
                        {label: "考勤打卡记录详细信息",
                          width: 120,
                          prop: "subColumns",
                          formatter: (row) => {
                              let widthsize = this.columnSet.reduce((pre, cur) => {
                                  return pre + Number(cur.width);
                              }, 50);
                              return (
                                  <el-popover placement="right" width={widthsize} trigger="click">
                                      {this.renderTable(row.attendanceRecordDetailList)}
                                      <el-button type="text" slot="reference">详细</el-button>
                                  </el-popover>
                              );
                          },
                        },
                        {
                            label: "操作",
                            width: 240,
                            formatter: row => {
                                return (
                                    <table-buttons noAdd noEdit noView noDel
                                    row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
                            );
                            }
                        }
                    ]
                },
                drawerhistory:false,
                isdialog:false,
                setcolum:[],
                checkList:[]
            }
        }
    };
</script>
<style scoped lang="less">
.totalNum{
  background: rgba(64, 158, 255,0.2);
  padding: 15px;
  border-left: 4px solid rgb(20, 134, 248);
  color: rgb(100, 100, 100);
  .item{
    padding: 0 10px;
    border-right: 1px solid gray;
  }
  .item:last-child{
    border: none;
  }
  .num{
    color: #409EFF;
    margin-left: 10px;
    margin-right: 20px;
  }
}
.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>