<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="单位名称" prop="deptName">
        <el-input
          v-model="queryParams.deptName"
          placeholder="请输入单位名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">统计</el-button>
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:salaryreport:export']">导出</el-button>
      </el-form-item>
    </el-form>

    <div id="out-table">
      <el-table ref="dataTable"
                v-loading="loading"
                :data="salaryreportList"
                border
                height="600"
                :row-style="{height: '0'}"
                :cell-style="{padding: '0'}"
                :header-cell-class-name="headerStyle"
                :summary-method="getSummaries"
                show-summary>
        <el-table-column label="序号" align="center" type="index" :index="indexFn" fixed/>
        <el-table-column label="单位ID" align="center" prop="deptId" fixed v-if="0" />
        <el-table-column label="单位名称" align="center" prop="dept_short_name" width="180" fixed/>
        <af-table-column label="员工总人数" align="right" prop="total_num">
        </af-table-column>
        <el-table-column label="员工类型"  align="center"  >

          <af-table-column label="正式员工人数" align="right" prop="zsyg_num">
          </af-table-column>
          <af-table-column label="外部用工人数" align="right" prop="wbyg_num">
          </af-table-column>
        </el-table-column>
        <el-table-column label="员工状态"  align="center"  >
          <af-table-column label="在职人数" align="right" prop="status_zz_num">
          </af-table-column>
          <af-table-column label="内退人数" align="right" prop="status_nt_num">
          </af-table-column>
          <af-table-column label="离职转岗人数" align="right" prop="status_lzzg_num">
          </af-table-column>
          <af-table-column label="病休人数" align="right" prop="status_bx_num">
          </af-table-column>
          <af-table-column label="停薪留职人数" align="right" prop="status_txlz_num">
          </af-table-column>
          <af-table-column label="离职人数" align="right" prop="status_lz_num">
          </af-table-column>
        </el-table-column>
        <el-table-column label="岗位"  align="center"  >
          <af-table-column label="管理岗人数" align="right" prop="post_glg_num">
          </af-table-column>
          <af-table-column label="业务岗人数" align="right" prop="post_ywg_num">
          </af-table-column>
        </el-table-column>
        <el-table-column label="职级"  align="center"  >
          <af-table-column label="正处人数" align="right" prop="level_zc_num">
          </af-table-column>
          <af-table-column label="副处人数" align="right" prop="level_fc_num">
          </af-table-column>
          <af-table-column label="正科人数" align="right" prop="level_zk_num">
          </af-table-column>
          <af-table-column label="副科人数" align="right" prop="level_fk_num">
          </af-table-column>
          <af-table-column label="机关科员人数" align="right" prop="level_jgky_num">
          </af-table-column>
          <af-table-column label="所属公司中层人数" align="right" prop="level_gszc_num">
          </af-table-column>
          <af-table-column label="所属公司科员人数" align="right" prop="level_gsky_num"/>
        </el-table-column>

        <el-table-column label="职务"  align="center"  >
          <af-table-column label="机关领导班子正职人数" align="right" prop="title_jgzz_num"/>
          <af-table-column label="机关领导班子副职人数" align="right" prop="title_jgfz_num"/>
          <af-table-column label="机关正科人数" align="right" prop="title_jgzk_num"/>
          <af-table-column label="机关副科人数" align="right" prop="title_jgfk_num"/>
          <af-table-column label="机关员工人数" align="right" prop="title_jgyg_num"/>
          <af-table-column label="所属公司领导班子正职人数" align="right" prop="title_gszz_num"/>
          <af-table-column label="所属公司领导班子副职人数" align="right" prop="title_gsfz_num"/>
          <af-table-column label="所属公司中层正职人数" align="right" prop="title_gszczz_num"/>
          <af-table-column label="所属公司中层副职人数" align="right" prop="title_gszcfz_num"/>
          <af-table-column label="所属公司员工人数" align="right" prop="title_gsyg_num"/>

        </el-table-column>

      </el-table>
    </div>
  </div>
</template>
<style type="text/css">
  .tableStyle1 {
    background-color: #CE0000 !important;
    color: #fff !important;
    font-weight: 400;
  }
  .tableStyle2 {
    background-color: #0066CC !important;
    color: #fff !important;
    font-weight: 400;
  }
  .tableStyle3 {
    background-color: #01814A !important;
    color: #fff !important;
    font-weight: 400;
  }
  .tableStyle4 {
    background-color: #9F5000 !important;
    color: #fff !important;
    font-weight: 400;
  }
  .tableStyle5 {
    background-color: #3D7878 !important;
    color: #fff !important;
    font-weight: 400;
  }
</style>
<script>
  import {
    selectEmployeStatistics,
  } from "@/api/search/wage";

  export default {
  name: "Salaryreport",
  components: {
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 工资上报控制表格数据
      salaryreportList: [],
      // 弹出层标题
      title: "",
      summaryYear: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        deptName: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
    updated() {
      this.$nextTick(() => {
        this.$refs.dataTable.doLayout()
      })
    },
  created() {
    this.getList();
  },
  methods: {
    headerStyle({ column, rowIndex, columnIndex }) {
      console.log("columnIndex",column);
      /*  if (column.label == "员工类型") {//||column.label == "员工总人数"||column.label == "正式员工人数"||column.label == "外部用工人数"
          return 'tableStyle1';
        }else if (column.label == "员工状态") {
        return 'tableStyle2';
        }else if (column.label == "岗位") {
          return 'tableStyle3';
        }else if (column.label == "职级") {
          return 'tableStyle4';
        }else if (column.label == "职务") {
          return 'tableStyle5';
        }*/
      if(rowIndex==0) {
        var n=2;
        if (columnIndex == n+1) {
          return 'tableStyle1';
        } else if (columnIndex == n+2) {
          return 'tableStyle2';
        } else if (columnIndex == n+3) {
          return 'tableStyle3';
        } else if (columnIndex == n+4) {
          return 'tableStyle4';
        } else if (columnIndex == n+5) {
          return 'tableStyle5';
        }
      }else if(rowIndex==1){
        if(columnIndex<2){
          return 'tableStyle1';
        }else if(columnIndex<8){
          return 'tableStyle2';
        } else if(columnIndex<10){
          return 'tableStyle3';
        }else if(columnIndex<17){
          return 'tableStyle4';
        }else if(columnIndex<27){
          return 'tableStyle5';
        }
      }
    },
    addNumFn(index) {
      return 'addNum_'+index;
    },
    reduceNumFn(index) {
      return 'reduceNum_'+index;
    },
    monthFn(n) {
      return n+"月";
    },

    /** 查询工资上报控制列表 */
    getList() {
        this.loading = true;
        selectEmployeStatistics(this.queryParams).then(response => {
          this.salaryreportList = response.data;

          this.loading = false;
        });

    },
    sumHang(row, column){

    },
    /** 搜索按钮操作 */
    handleQuery() {
        this.getList();
    },
    /** 导出按钮操作 */
    handleExport() {
      var that = this;
      this.$confirm('是否确认导出所有数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        var xlsxParam = { raw: true }; // 导出的内容只做解析，不进行格式转换(添加此行代码表格中的百分比就不会再导出的时候被转换成小数点)
        let tables = document.getElementById("out-table");
        console.log("tables", tables);
        let table_book = that.$XLSX.utils.table_to_book(tables);
        var table_write = that.$XLSX.write(table_book, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
          that.$FileSaver.saveAs(
            new Blob([table_write], { type: "application/octet-stream" }),
            "员工花名册统计.xlsx"
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, table_write);
        }
        return table_write;

      }).catch(response => {

      });
    },
    indexFn(index) {
      index = (index + 1)
      return index
    },
    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (column.property === 'deptName' || column.property === 'deptShortName' ) {
          sums[index] = '合计';
          return;
        }

        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sums[index]; // 保留2位小数，解决小数列合计精度缺失的问题
        } else {
          sums[index] = '-';
        }
      });
      return sums;
    }
  }
};
</script>