<template>
  <div class="main">
    <div class="top">
      <div>
        <span style="margin-left: 10px">查询日期：</span>
        <el-date-picker
          v-model="selectDate"
          size="small"
          type="month"
          align="center"
          format="yyyy-MM"
          value-format="yyyy-MM"
          placeholder="选择查询日期"
          @change="getTableData()"/>
      </div>
      <div class="item">
        <span style="margin-left: 10px">导出Excel：</span>
        <el-button type="info" size="small" icon="el-icon-download" @click="handleDownload()">Excel</el-button>
      </div>
    </div>
    <div
      style="height: 750px;overflow-y: auto;">
      <table class="select-table">
        <tr class="table-row">
          <th rowspan="2">序号</th>
          <th rowspan="2" class="date">日期</th>
          <th rowspan="2">人员</th>
          <th rowspan="2">总工时</th>
          <th v-for="item in objectNameList" :key="item" colspan="2" class="head-name-th">{{ item }}</th>
        </tr>
        <tr class="table-row">
          <template v-for="item in objectNameList">
            <th>工时</th>
            <th>占有率</th>
          </template>
        </tr>
        <!--人员工时部分-->
        <tr v-for="(item,index) in tableDataList" :key="index" class="table-row">
          <td>{{ index +1 }}</td>
          <td>{{ item.月份 }}</td>
          <td>{{ item.姓名 }}</td>
          <td>{{ item['0000总工时'] }}</td>
          <template v-for="(j,key) in item">
            <td v-if="key !== '姓名' && key !== '月份' && key !== '0000总工时'">{{ item[key] }}</td>
            <td v-if="key !== '姓名' && key !== '月份' && key !== '0000总工时'" style="color: #8d8d8d">{{ item[key] == 0 || item['0000总工时'] == 0 ? 0 : (item[key] / item['0000总工时']).toFixed(2) }}</td>
          </template>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { export_json_to_excel_workTimeCount } from '../../vendor/Export2Excel'

export default {
  name: 'WorkTimeCount',
  components: {
  },
  data() {
    return {
      // 人员数据对象
      tableDataList: [],
      // 名称列表
      objectNameList: ['北汽福田', '上海思源', '其他工作'],
      // 查询日期
      selectDate: ''
      //
    }
  },
  computed: {
    ...mapGetters(['id', 'token', 'name', 'clickItemData', 'personList'])
  },
  created() {
    this.date = new Date() // 修改数据date
    const year = new Date().getFullYear()
    const month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
    const audiTime = year + '-' + month
    this.selectDate = audiTime
    this.getTableData()
  },
  mounted() {

  },
  methods: {
    exportExcel() {

    },
    getTableData() {
      this.objectNameList = []
      var param = []
      param[0] = ['月份', this.selectDate]
      var Data = this.CreateData('11', '项目管理_日报填写_工时统计', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.tableDataList = response.data
          for (const key in response.data[0]) {
            if (key !== '姓名' && key !== '月份' && key !== '0000总工时') {
              this.objectNameList.push(key)
            }
          }
          console.log(this.tableDataList)
        } else {
          this.$message.warning('本月暂无统计数据!')
        }
      })
    },
    // 导出excel
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        // 将前四列固定表头占两行  后面项目标题占两列
        // 被合并的单元格内容为空
        const tHeader = ['序号', '日期', '人员', '总工时']
        const tHeader2 = ['', '', '', '']

        // 需要导出的数据  动态将项目名称加到filterVal中
        const filterVal = ['序号', '月份', '姓名', '0000总工时']

        // excel合并规则数组 例子
        //   [
        //     {  //合并第四行（C4）第三列到第五列
        //       s: {//s为开始
        //         c: 2,//开始列
        //         r: 3//开始取值范围
        //       },
        //       e: {//e结束
        //         c: 4,//结束列
        //         r: 3//结束范围
        //       }
        //     }, {  //合并A1A2单元格
        //       s: {//s为开始
        //         c: 0,//开始列
        //         r: 0//开始取值范围
        //       },
        //       e: {//e结束
        //         c: 0,//结束列
        //         r: 1//结束范围
        //       }
        //     }
        //   ]

        // 先前4列占两行 后面标题占两列
        const mergesList = [
          {
            s: { // 1
              c: 0,
              r: 0
            },
            e: {
              c: 0,
              r: 1
            }
          },
          {// 2
            s: {
              c: 1,
              r: 0
            },
            e: {
              c: 1,
              r: 1
            }
          }, { // 3
            s: {
              c: 2,
              r: 0
            },
            e: {
              c: 2,
              r: 1
            }
          }, { // 4
            s: {
              c: 3,
              r: 0
            },
            e: {
              c: 3,
              r: 1
            }
          }
        ]

        // 处理数据 添加序号字段 动态添加工时与占有率字段
        const list = []
        for (const index in this.tableDataList) {
          const item = { ...this.tableDataList[index] }
          item.序号 = (Number(index) + 1)
          for (const itemName of this.objectNameList) {
            item[itemName + '-timeCount'] = (item[itemName] === 0 || item['0000总工时'] === 0 ? 0 : (item[itemName] / item['0000总工时']).toFixed(2))
          }
          list.push(item)
        }
        let number = 0
        for (const item of this.objectNameList) {
          // 第一行
          tHeader.push(item)
          tHeader.push('')
          // 第二行
          tHeader2.push('工时')
          tHeader2.push('占有率')
          // 数据字段名
          filterVal.push(item)
          filterVal.push(item + '-timeCount')
          // 加入合并规则
          mergesList.push({
            s: {
              c: (number * 2) + 4,
              r: 0
            },
            e: {
              c: (number * 2) + 5,
              r: 0
            }
          })
          number++
        }
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel_workTimeCount({
          merges: mergesList,
          header: tHeader,
          header2: tHeader2,
          data: data,
          filename: this.selectDate + '工时统计',
          autoWidth: true
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        return v[j]
      }))
    }
  }
}
</script>
<style scoped lang="scss">
.main{
  //overflow: auto;
  overflow-y: hidden;
}
.top{
  display: flex;
  margin: 10px 0 20px 0;
}
.select-table{
  text-align: center;

  .table-row > th{
    width: 150px;
    font-size: 22px;
  }
  .table-row > td{
    font-size: 20px;
  }
  .table-row{
    .head-name-th{
      //width: 200px;
    }
    .date{
      width: 200px;
    }
  }
  .table-row:hover{
    background-color: rgba(255, 234, 205, 0.88);
  }
}
table.select-table {
  font-family: verdana,arial,sans-serif;
  font-size:11px;
  color:#333333;
  border-width: 1px;
  border-color: #999999;
  border-collapse: collapse;
}
table.select-table th {
  background-color:#c3dde0;
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #a9c6c9;
}
table.select-table tr {
  background-color: #f8fffd;
}
table.select-table td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #a9c6c9;
}
</style>
