<template>
    <fullscreen :fullscreen.sync="fullscreen" class="container" style="margin: 0;">
        <div class="container-box">
            <div class="search" v-if="!provincialCompany">
                <mySearch :searchList="searchList" @searchInfo="searchInfo"></mySearch>
                <div>
                    <el-button class="btn-check" plain size="medium" type="primary" @click="downloadTemplate">下载模板
                    </el-button>
                    <myUpload style="display:inline-block;" :fileInfo="fileInfo" @onSuccess="onSuccess"
                              :fileList="fileInfo.fileList"></myUpload>
                </div>
            </div>
            <div class="tabbox">
                <el-table v-loading="loading" :key="key" :height="height" class="com-table" ref="multipleTable" :data="tableData"
                          tooltip-effect="dark" size="small" border style="width: 100%" :header-cell-style="headerStyleFun" :cell-style="cellStyle">
                    <el-table-column align="center" :label="toolTit">
                        <el-table-column prop="cityName" align="center" label="地市" >
                        </el-table-column>
                        <el-table-column prop="jobNumber" align="center" label="工号" >
                        </el-table-column>
                        <el-table-column prop="userName" align="center" label="人员姓名" >
                        </el-table-column>
                        <el-table-column prop="post" align="center" label="职务" >
                        </el-table-column>
                        <el-table-column prop="year" align="center" label="扣罚年份" >
                            <template slot-scope="scope">
                                {{$formatDate(scope.row.yearMonth, "YYYY-MM").split("-")[0]}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="month" align="center" label="扣罚月份" >
                            <template slot-scope="scope">
                                {{$formatDate(scope.row.yearMonth, "YYYY-MM").split("-")[1]}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="deductPoints" align="center" label="扣绩效（分）" >
                        </el-table-column>
                        <el-table-column prop="fineMoney" align="center" label="罚款" >
                        </el-table-column>
                        <el-table-column prop="notification"  align="center" label="通报" width="300">
                        </el-table-column>
                    </el-table-column>
                </el-table>
                <el-pagination class="pageBox" @current-change="currchange" layout="prev, pager, next" background
                               :total="total">
                </el-pagination>
            </div>
        </div>
    </fullscreen>
</template>
<script>
    import mySearch from "../../../components/search.vue";
    import toolList from "../../../components/toolList.vue";
    import myUpload from '../../../components/upload';


    export default {
        components: {
            mySearch,
            toolList,
            myUpload
        },
        data() {

            return {
                toolTit: '人员考核报表',
                searchList: [{
                    type: 'month',
                    tit: '月份',
                    value: '',
                    width: '100%',
                }
                ],
                fullscreen: false,
                total: 0,
                pageSize: 1,
                tableData: [],
                params: {},
                fileInfo: {
                    type: 'btn',
                    typename: '导入',
                    btntype: 'primary',
                    limit: 1,
                    url: '/market/antiSpoofing/importPersonnelTemplate',
                    fileList: [],
                    typexz:"xlsx"
                },
                provincialCompany:false,
                height:'calc(100% - 40px)',
                key:0,
                loading:false
            }
        },
        methods: {
            onSuccess(file){
                this.searchInfo([this.searchList[0].value], 1);
            },
            headerStyleFun({row, column, rowIndex, columnIndex}){
                if (rowIndex === 0){
                    return "background-color:#d8e4bc;font-size:14px;font-weight:bold;color:black;"
                }else if (rowIndex === 1){
                    return "background-color:#d8e4bc;font-size:12px;font-weight:bold;color:black;"
                }
            },
            cellStyle({row, column, rowIndex, columnIndex}){
                if (columnIndex === 0){
                    return "font-weight:bold;"
                }else {
                    return "";
                }
            },
            downloadTemplate(){
                let param = new FormData();
                param.append("type", 'personnel');
                this.$http({
                    url: '/market/antiSpoofing/excelExport',
                    method: "post",
                    responseType: 'blob',
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: param,
                }).then((response) => {
                    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                        let blob = new Blob([response.data], {
                            type: response.data.type
                        });
                        window.navigator.msSaveOrOpenBlob(blob, '人员考核模板.xlsx');
                    } else {
                        /* 火狐谷歌的文件下载方式 */
                        var blob = new Blob([response.data])
                        var downloadElement = document.createElement('a')
                        var href = window.URL.createObjectURL(blob);
                        downloadElement.href = href;
                        downloadElement.download = '人员考核模板.xlsx';
                        document.body.appendChild(downloadElement);
                        downloadElement.click();
                        document.body.removeChild(downloadElement);
                        window.URL.revokeObjectURL(href);
                    }
                })
            },
            //搜索数据
            searchInfo(v) {
                this.params = new FormData();
                this.params.append("date", v[0] ?  this.$formatDate(v[0], "YYYY-MM") + '-01'  : '');
                this.getList(this.params, this.pageSize);
            },
            //获取列表
            getList(v, n) {
                this.loading = true
                this.pageSize = n;
                v.append("type",'personnel');
                let item = window.sessionStorage.getItem("antiSpoofingSearchParams");
                if (item){
                    let parse = JSON.parse(item);
                    v.append("cityName", parse.city)
                    if (!v.get('date')){
                        v.append("startDate", parse.queryTime[0])
                        v.append("endDate", parse.queryTime[1])
                    }
                }
                this.$http({
                    url: "/market/antiSpoofing/getImportData",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                        "page": '{"pageNo":"' + n + '","pageSize":"10"}'
                    },
                    data: v,
                }).then((res) => {
                    if (res.data.retCode === '1'){
                        this.$message.error(res.data.retMsg);
                    }else {
                        this.tableData = res.data.data;
                        this.total = res.data.totalRecord;
                        this.loading = false;
                    }
                }).catch(() => {
                    this.tableData = []
                    this.total = 0
                    this.loading = false;
                });
            },
            // 分页
            currchange(v) {
                this.pageSize = v;
                this.searchInfo([this.searchList[0].value], this.pageSize);
            },
            getUser() {
                let menus = JSON.parse(window.sessionStorage.childrenMenus);
                let flag = false
                for(let n=0;n<menus.length;n++){
                    if (menus[n].jspUrl === "/antiSpoofingCityScreen") {
                        flag = true
                    }
                }
                if (!flag){
                    this.provincialCompany = true
                    this.height = "calc(100%)"
                    this.key += 1
                }
            }
        },
        mounted() {
            this.getUser()
            let param = JSON.parse(window.sessionStorage.getItem("antiSpoofingSearchParams"));
            if (param){
                this.searchInfo([], 1);
            }else {
                this.searchList[0].value = new Date()
                this.searchInfo([this.searchList[0].value], 1);
            }
        },
        created() {

        },
    }
</script>
<style scoped lang="scss">
    .onetab {
        margin-bottom: 20px;
        padding: 0 20px;
    }

    .titbox {
        div {
            float: right;

            i {
                font-size: 22px;
                margin-left: 20px;
                cursor: pointer;
            }
        }
    }

    .tabbox {
        margin-top: 15px;
    }

    .pageBox {
        text-align: right;
        margin-top: 10px;
    }

    .info-line {
        width: 100%;
        display: block;
        padding-left: 20px;

        div {
            width: 50%;
            display: inline-block;
        }

        span {
            width: 80px;
            display: inline-block;
            text-align: left;

            i {
                color: red;
                display: inline-block;
                padding-right: 5px;
            }
        }

        .el-select,
        .el-input {
            width: calc(100% - 100px);
        }
    }

    .online {
        width: 100%;

        .el-select {
            width: calc(100% - 100px);
        }

        span {
            vertical-align: top;
        }

        .el-textarea {
            width: calc(100% - 100px);
        }
    }
</style>
