<template>
  <div>
    <!-- 全国销售日报 -->
    <h2 class="table-title" v-if="tableData.length">{{ month.replace('-','年')+'月' }} 全国销售日报（截止{{ nowDate }}）</h2>
    <table class="table-box" id="day-table-0" v-if="tableData.length">
      <thead class="ant-table-thead">
        <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])[1]"
            :align="typeof item['col'+cols] == 'number' ? (hasRate(item)&&cols>2?'center':'right'):'center'"
            :class="item.key=='currRealFinish'||item.key=='currRealTireFinish'?'red':''"
          >
            {{ 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: () => ''
    }
  },
  computed: {
    months () {
      return this.month.split('-')[1]
    },
    list () {
      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 = ['本月实际销售额|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, '轮胎')
      // 品牌+轮胎
      getRows(row3, rets, '品牌+轮胎')
      // 循环列
      rets.forEach(item => {
        this.tableData.forEach((cols, i) => {
          for (const key in cols) {
            if (key === item.key) {
              item['col' + (i + 3)] = cols[key]
            }
          }
        })
      })
      return rets
    }
  },
  methods: {
    hasRowspan (row) {
      console.log(row && row.toString().split('rowspan')[1])
      return row && row.toString().split('rowspan')
    },
    hasRate (row) {
      return ['yearTargetRate', 'currTargetRate', 'yearTargetTireRate', 'currTargetTireRate'].includes(row.key)
    },
    getTable () {
      return document.getElementById('day-table-0')
    }
  }
}
</script>

<style lang="less" scoped>
  .table-title{
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    max-width: 1024px;
    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: 1024px;
    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>
