<template>
  <div>
    <!-- 全国销售日报 -->
    <table class="table-box" id="day-table-0" v-if="tableData.length">
      <thead class="ant-table-thead">
        <tr>
          <th :colspan="columns.length">
            <div class="table-title">{{ dateStr }} 全国销售日报 <span v-if="showDz">（截止{{ nowDate }}）</span></div>
          </th>
        </tr>
        <tr>
          <th v-for="(item,index) in columns" :key="index">{{ item }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.key">
          <td
            v-for="cols in columns.length"
            :key="cols+'td'"
            :width="cols==2?350:150"
            v-if="item['col'+cols]!==''"
            :rowspan="hasRowspan(item['col'+cols])?hasRowspan(item['col'+cols])[1]:''"
            :align="item['col'+cols]&&item['col'+cols].indexOf('.')>=0 ? (hasRate(item)&&cols>2?'center':'right'):'center'"
            :class="item.key=='currRealFinish'||item.key=='currRealTireFinish'||item.key=='currNgkRealFinish'?'red':''"
          >
            {{ hasRowspan(item['col'+cols])&&hasRowspan(item['col'+cols])[1] ? hasRowspan(item['col'+cols])[0] : item['col'+cols] }}{{ hasRate(item)&&cols>2?'%':'' }}
          </td>
        </tr>
      </tbody>
    </table>
    <div v-else class="noData">
      暂无数据，请点击查询
    </div>
  </div>
</template>

<script>
export default {
  name: 'Table0',
  props: {
    // 表格数据
    tableData: {
      type: Array,
      default: () => []
    },
    // 月份
    month: {
      type: String,
      default: () => ''
    },
    // 列数据
    columns: {
      type: Array,
      default: () => []
    },
    // 当前截止日期
    nowDate: {
      type: String,
      default: () => ''
    }
  },
  data () {
    return {
      months: '', // 月份
      list: [], // 列表数据
      showDz: false, // 是否显示截止日期
      dateStr: '' // 格式化日期
    }
  },
  methods: {
    // 获取日期
    getmonths () {
      this.months = this.month.split('-')[1]
      this.dateStr = this.month.replace('-', '年') + '月'
      console.log(this.dateStr)
    },
    // 是否显示截止日期
    getshowDz () {
      const nowMonths = new Date().getMonth() + 1
      this.showDz = this.months == nowMonths
    },
    // 重组列表数据
    getlist () {
      const rets = []
      const row1 = [
        '年度目标|yearTarget',
        '截止1-' + (this.months - 1) + '月销售实际完成|histSalesReal',
        '累计' + this.months + '月销售实际截止完成|accuSalesReal',
        '年度完成率|yearTargetRate',
        '本月目标|currTarget',
        '本月实际销售|currSalesReal',
        '本月销售实际退货|currReturnReal',
        '本月销售实际完成|currRealFinish',
        '本月达成率|currTargetRate',
        '预估订单|currExpect',
        '预估完成|currExpectFinish',
        '离目标差额|currTargetDiff'
      ]
      const row2 = [
        '年度目标|yearTargetTire',
        '截止1-' + (this.months - 1) + '月销售实际完成条数|histSalesRealTireNum',
        '截止1-' + (this.months - 1) + '月销售实际完成销售额|histSalesRealTireAmount',
        '累计' + this.months + '月销售实际完成条数|accuSalesRealTireNum',
        '累计' + this.months + '月销售实际截止完成|accuSalesRealTireAmount',
        '年度完成率|yearTargetTireRate',
        '本月目标条数|currTargetTireNum',
        '本月销售条数|currSalesTireNum',
        '本月达成率|currTargetTireRate',
        '本月实际销售|currSalesTireReal',
        '本月销售实际退货|currReturnTireReal',
        '本月销售实际完成|currRealTireFinish',
        '预估订单|currExpectTire',
        '预估完成|currExpectTireFinish',
        '离目标差额条数|currTargetTireDiff'
      ]
      const row3 = [
        '截止1-' + (this.months - 1) + '月销售实际完成|histNgkSalesReal',
        '累计' + this.months + '月销售实际截止完成|accuNgkSalesReal',
        '本月实际销售|currNgkSalesReal',
        '本月销售实际退货|currNgkReturnReal',
        '本月销售实际完成|currNgkRealFinish'
      ]
      const row4 = ['本月实际销售额|totalCurrRealFinish', '本月预估完成|totalCurrExpectFinish']
      const getRows = function (row, arr, name) {
        row.forEach((item, i) => {
          const nameArr = item.split('|')
          if (i == 0) {
            arr.push({ col1: name + 'rowspan' + row.length, col2: nameArr[0], key: nameArr[1] })
          } else {
            arr.push({ col1: '', col2: nameArr[0], key: nameArr[1] })
          }
        })
      }
      // 品牌
      getRows(row1, rets, '品牌')
      // 轮胎
      getRows(row2, rets, '轮胎')
      // NGK
      getRows(row3, rets, 'NGK')
      // 品牌+轮胎+NGK
      getRows(row4, rets, '品牌+轮胎+NGK')
      // 循环列
      rets.forEach(item => {
        this.tableData.forEach((cols, i) => {
          for (const key in cols) {
            if (key === item.key) {
              const data = item.col2.indexOf('条数') >= 0 ? String(cols[key]) : Number(cols[key]).toFixed(2)
              item['col' + (i + 3)] = data
            }
          }
        })
      })
      this.list = rets
    },
    // 是否合并单元格
    hasRowspan (row) {
      return row && row.toString().split('rowspan')
    },
    // 是否显示百分比
    hasRate (row) {
      return ['yearTargetRate', 'currTargetRate', 'yearTargetTireRate', 'currTargetTireRate'].includes(row.key)
    },
    // 获取表格对象
    getTable () {
      return document.getElementById('day-table-0')
    },
    // 初始化
    pageInit () {
      this.getmonths()
      this.getshowDz()
      this.getlist()
    }
  }
}
</script>

<style lang="less" scoped>
  .table-title{
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    max-width: 1400px;
    text-align: center;
  }
  .noData{
    width: 100%;
    text-align: center;
    font-size: 16px;
    color: #999;
    min-height: 300px;
    line-height: 300px;
  }
  .table-box{
    width: 100%;
    max-width: 1400px;
    font-size: 14px;
    .red{
      color: red;
    }
    tr > th{
      padding: 6px 8px;
      border: 1px solid #dedede;
      text-align: center;
    }
    tr > td{
      padding: 5px;
      border: 1px solid #dedede;
    }
    tr{
      &:hover{
        td{
          background-color: #ffd6d4;
        }
      }
    }
  }
</style>
