<template>
  <div class="chart-container1">
    <div class="filter">
      <div class="startTime">
        <span class="timeText">查询时间</span>
        <el-date-picker
          v-model="startTime"
          :clearable="false"
          type="date"
          value-format="timestamp"
          placeholder="选择日期">
        </el-date-picker>
      </div>

      <div class="timeQuery">
        <el-button  size="small" :loading="loading"  @click="dateQuery">查询</el-button>
      </div>
      <div class="toolbar" > <vxe-toolbar ref="reportToolBar" export></vxe-toolbar></div>
    </div>

    <div class="content">
      <div class="reportTime">
        上报统计时间范围: {{this.reportQueryTime.startTime}} 至 {{this.reportQueryTime.endTime}}
      </div>
      <div class="tableContent1">
        <vxe-table
          id="reportTable"
          ref="reportRef"
          class="mytable-style"
          border
          :scroll-y="{gt: -1}"
          :span-method="mergeRowMethod"
          export-config
          :loading="loading"
          :auto-resize="true"
          :header-cell-style="styleStr"
          :cell-style="cellStyle"
          align="center"
          :data="tableData">
          <vxe-table-column  field="uploadObjectName" title="上报对象名称"  min-width="100"></vxe-table-column>
          <vxe-table-column field="fileType" title="文件类型" min-width="60"></vxe-table-column>
          <vxe-table-column field="realityNum" title="已上报" min-width="60"></vxe-table-column>
          <vxe-table-column field="theoryNum" title="应上报" min-width="60" ></vxe-table-column>
          <vxe-table-column field="rate" title="百分比" min-width="60" ></vxe-table-column>
        </vxe-table>
      </div>
    </div>
  </div>
</template>

<script>
  import moment from "moment";
  import XEUtils from "xe-utils";
  export default {
    name: 'report',
    data(){
      return{
        styleStr:{},
        styleTableStr:{},
        redCell:{},
        greenCell:{},
        queryStartTime:'',
        startTime:new Date(new Date().toLocaleDateString()).getTime(),
        loading:true,
        tableData:[],
        reportQueryTime:{}
      }
    },
    created () {
      if(sessionStorage.getItem('styleSwitch') === 'blue'){
        this.styleStr = {background:'black',color:'white',border:'white'}
        this.styleTableStr = {background:'black',color:'white'}
        this.redCell = {background:'black',color:'red'}
        this.greenCell = {background:'black',color:'green'}
      }else{
        this.redCell = {color:'red'}
        this.greenCell = {color:'green'}
      }
      this.$nextTick(() => {
        // 手动将表格和工具栏进行关联
        this.$refs.reportRef.connect(this.$refs.reportToolBar)
      })
    },
    mounted() {
      this.init()
    },
    methods:{
      init(){
        this.queryStartTime = this.startTime
        this.getTable()

      },
      getTable(){
        this.loading = true
        this.$axios.get('/uploadFileCount/'+this.queryStartTime).then((res) => {
          this.tableData = res.data.data
          this.reportQueryTime = res.data.queryTime
          // console.log(res.data.queryTime)
          this.loading = false
        }).catch((error) => {
          this.loading = false
          this.$message.error('查询上报统计table出错' + error)
        })

      },
      // 通用行合并函数（将相同多列数据合并为一行）
      mergeRowMethod ({ row, $rowIndex, column, data }) {
        const fields = ['uploadObjectName']
        const cellValue = XEUtils.get(row, column.property)
        if (cellValue && fields.includes(column.property)) {
          const prevRow = data[$rowIndex - 1]
          let nextRow = data[$rowIndex + 1]
          if (prevRow && XEUtils.get(prevRow, column.property) === cellValue) {
            return {rowspan: 0, colspan: 0}
          } else {
            let countRowspan = 1
            while (nextRow && XEUtils.get(nextRow, column.property) === cellValue) {
              nextRow = data[++countRowspan + $rowIndex]
            }
            if (countRowspan > 1) {
              return {rowspan: countRowspan, colspan: 1}
            }
          }
        }
      },

      dateMoment({ cellValue, row, column }) {
        return moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
      },

      dateQuery(){
        this.loading = true
        this.queryStartTime = this.startTime

        this.getTable()
      },

      headerCellStyle ({ column, columnIndex }) {
          return {
            background:this.styleStr
          }
      },
      cellStyle ({ row, rowIndex, column, columnIndex }) {

        if (column.property === 'rate') {
          if (row.rate != '100.0%') {
            return this.redCell
          } else  {
            return this.greenCell
          }
        }
        else{
          return this.styleTableStr
        }
      }

    }
  }
</script>

<style scoped>
  .chart-container1{
    position:relative;
    width:100%;
   /* height:calc(100vh - 50px);*/
  }
  .tableContent1{
    width: 100%;
    margin-bottom: 1%;
  /*  height:calc(80vh - 50px);*/
  }
  .tableContent1 >>> td{
    border:1px solid #ffffff;
  }

  .mytable-style .vxe-body--row.row-green {
    background-color: #187;
    color: #ffffff;
  }
  .mytable-style .vxe-header--column.col-blue {
    background-color: #2db7f5;
    color: #fff;
  }
  .mytable-style .vxe-body--column.col-red {
    background-color: red;
    color: #fff;
  }
  .mytable-style .vxe-body--column.col-orange {
    background-color: #f60;
    color: #d70707;
  }
</style>

