<template>
    <div class="page">
        <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 type="primary" size="mini" slot="table-head-left2"
            style="margin-left: 10px" @click="formatData">生成打卡记录</el-button>
        </LayoutTable>
        <dialog-show ref="dialogform" @ok="getData" />
        <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>
        <!-- 导出记录查看 -->
        <el-drawer
        title="导出记录"
        :visible.sync="drawerhistory"
        :direction="direction">
            <div class="hisList">
                <div class="list mt10" v-for="(item,index) in exportList" :key="index" @click="changeStatus(item)">
                    <div class="flex flex-align-center flex-pack-justify">
                        <div>打卡记录汇总</div>
                        <el-button type="text">导出成功</el-button>
                    </div>
                    <div class="details" v-if="item.islook">
                        <div class="mt10" v-if="item.recordIdList">
                           选择列表id： {{item.recordIdList}}
                        </div>
                        <div class="mt10" v-if="item.deptName">
                            选择部门：{{item.deptName}}
                        </div>
                        <div class="mt10" v-if="item.groupName">
                            选择考勤组：{{item.groupName}}
                        </div>
                        <div class="mt10" v-if="item.className">
                            选择班次：{{item.className}}
                        </div>

                        <div class="mt10">
                            <el-link :href="baseUrl+item.filePath" target="_blank" type="primary">重新下载</el-link>
                        </div>
                    </div>
                    <div class="times mt10">
                        导出时间：{{item.createTime}}
                    </div>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
    /** 表单弹出框模式需引入 */
    import dialogShow from "./dialogshow";
    import table from "@/assets/mixins/table";
    import {timestampToTime} from '@/assets/utils/dateFormat'
    export default {
        name: "AttendanceRecordHikList",
        components: {
            dialogShow
},
        mixins: [table],
        created() {
        },
        methods: {
            // 生成打卡记录
            formatData(){
                let params = {}
                for(let value of this.config.search){
                    if(this.query[value.name]){
                        params[value.name] = this.query[value.name]
                    }
                }
                if(this.selection.length>0){
                    params['idList'] = this.selection
                }
                this.$post('/attendance/record/hik/addAttendanceRecord',{...params}).then(res => {
                    if(res.code == 1){

                    }
                })
            },
            // 更改状态
            changeStatus(item){
                this.$set(
                    item,
                    'islook',
                    !item.islook
                )
            },
            // 导出记录
            lookexportHis(){
                this.$post('/attendance/export/record/list',{type:1,page:1,size:-1}).then(res => {
                    if(res.code == 1){
                        let arr = res.data.data
                        this.exportList = arr.map(item => {
                            item.createTime = timestampToTime(item.createTime,6)
                            item.islook = false
                            return item
                        })
                    }
                })
                // 导出记录
                this.drawerhistory = true
            },
            /** 导入 */
            handleImport() {
                this.upload.title = "打卡记录导入";
                this.upload.open = true;
            },
                /** 下载模板操作 */
            downloadTemplate() {
                this.isExport = true;
                this.$download("/attendance/record/hik/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;
                let params = {}
                for(let value of this.config.search){
                    if(this.query[value.name]){
                        params[value.name] = this.query[value.name]
                    }
                }

                if(this.selection.length>0){
                    params['idList'] = this.selection
                }

                this.$download("/attendance/record/hik/exportExcel", {
                    ...params,
                }, { type: "excel" }).then(() => this.isExport = false).catch(error => {
                    this.isExport = false;
                    this.$message.error(error.message);
                })
            },
            /** 重写新增方法 */
            toAdd(row) {
                this.$refs.dialogform.add(row);
            },
            /** 重写编辑方法 */
            toEdit(row) {
                this.$refs.dialogform.edit(row);
            },
            /** 重写查看方法 */
            toView(row) {
                this.$refs.dialogform.view(row);
            },
            afterRender(data) {
                console.log(this.tableData.data)
            },
        },
        data() {
            return {
                upload: {
                    headers:{
                        Authorization:window.sessionStorage.getItem('token') || ''
                    },
                    // 是否显示弹出层（员工关怀信息导入）
                    open: false,
                    // 弹出层标题（员工关怀信息导入）
                    title: "导入员工关怀信息数据",
                    // 是否禁用上传
                    isUploading: false,
                    // 是否更新已经存在的数据
                    updateSupport: 0,
                    // 上传的地址
                    url: process.env.VUE_APP_API_BASE_URL +"/attendance/attendance/record/hik/importData",
                },
                config: {
                    isshowTabPane:true,
                    search: [
                        {
                            name: "staffName",
                            type: "text",
                            label: "员工姓名",
                            fuzzy: false
                        },
                        {
                            name:'workNum',
                            type:'text',
                            label:'工号',
                            fuzzy: false
                        },
                        // {
                        //     name: "deptId",
                        //     type: "select",
                        //     label: "所属部门",
                        //     fuzzy: false
                        // },
                        // {
                        //     name: "attendanceGroupId",
                        //     type: "select",
                        //     label: "所属考勤组",
                        //     fuzzy: false
                        // },
                        // {
                        //     name: "shiftsId",
                        //     type: "select",
                        //     label: "班次",
                        //     fuzzy: false
                        // },
                        {
                            name:'attendanceDateStart',
                            type: "date",
                            label: "考勤开始时间",
                            fuzzy: false
                        },
                        {
                            name:'attendanceDateEnd',
                            type: "date",
                            label: "考勤结束时间",
                            fuzzy: false
                        }
                    ],
                    columns: [
                        {type: "selection", width: 60},
                        {type: "index",label: "序号",width: 50},
                        {label: "员工姓名", prop: "staffName"},
                        {label: "工号", prop: "workNum"},
                        {label: "部门", prop: "deptName"},
                        // {label: "考勤组", prop: "attendanceGroupName"},
                        // {label: "职位", prop: "positionName"},
                        // {label: "班次", prop: "shiftsName"},
                        {label: "考勤时间", prop: "attendanceDate",formatter: this.formatterDate},
                        {label: "考勤点名称", prop: "attendanceAddress"},
                        {label: "事件源", prop: "eventSource"},
                        // {
                        //     label: "操作",
                        //     width: 240,
                        //     formatter: row => {
                        //         return (
                        //             <table-buttons noAdd noDel noEdit noView  row={row}
                        //             onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
                        //         )
                        //     }
                        // }
                    ]
                },
                drawerhistory:false,
                exportList:[],
                baseUrl:process.env.VUE_APP_API_BASE_URL+'/'
            }
        }
    };
</script>
<style scoped lang="scss">
.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;
        }
        cursor: pointer;
    }

}
.details{
    cursor: pointer;
}
</style>
