<template>
  <div>
    <!-- 项目销售日报 -->
    <table class="table-box" id="day-table-1" v-if="tableData.length">
      <thead class="ant-table-thead">
        <tr>
          <th :colspan="columns.length">
            <div class="table-title">{{ dateStr }} 项目销售日报1 <span v-if="showDz">（截止{{ nowDate }}）</span></div>
          </th>
        </tr>
        <tr>
          <th v-for="item in columns" :key="item">{{ item }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(sitem,index) in list" :key="index">
          <td
            width="150"
            v-for="(td,tdi) in sitem"
            :key="tdi+'td'"
            :rowspan="hasRowspan(td)[1]"
            :align="typeof td == 'number' ? 'right':'center'"
            :class="hasRed(td)||hasHj(sitem,index,td,tdi)?'red':''"
          >
            {{ hasRowspan(td)[1] ? hasRowspan(td)[0] : tdi > 0 ? Number(td).toFixed(2) : td }}
          </td>
        </tr>
      </tbody>
    </table>
    <div v-else class="noData">
      暂无数据，请点击查询
    </div>
  </div>
</template>

<script>
export default {
  name: 'Table1',
  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('-', '年') + '月'
    },
    // 是否显示截止日期
    getshowDz () {
      const nowMonths = new Date().getMonth() + 1
      this.showDz = this.months == nowMonths
    },
    // 重组数据
    getlist () {
      let rets = []
      this.tableData.forEach((item, i) => {
        if (i > 0) {
          item.detailList[0].push(item.bymb + 'rowspan' + item.detailList.length, item.wcl + 'rowspan' + item.detailList.length)
          rets = rets.concat(item.detailList)
        }
      })
      this.list = rets
    },
    // 是否合并单元格
    hasRowspan (row) {
      return row.toString().split('rowspan')
    },
    // 是否合计
    hasHj (a, b, c, d) {
      const hj = this.columns.findIndex(item => item == '销售额合计')
      const arr = ['合计', '箭牌喇叭', '制动系统']
      return (d == hj && arr.find(item => a.toString().indexOf(item) >= 0))
    },
    // 是否标红
    hasRed (row, tdi) {
      const arr = ['合计', '箭牌喇叭', '制动系统']
      return arr.find(item => row.toString().indexOf(item) >= 0)
    },
    // 获取表格对象
    getTable () {
      return document.getElementById('day-table-1')
    },
    // 初始化
    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>
