<template>
  <div>
    <!-- 分区销售日报 -->
    <table class="table-box" id="day-table-3" 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 key="managerNameList" rowspan="2" style="text-align: center;">
            <span class="ant-table-header-column"><div><span class="ant-table-column-title">区域负责人</span><span class="ant-table-column-sorter"></span></div></span>
          </th>
          <th key="subareaAreaName" rowspan="2" style="text-align: center;">
            <span class="ant-table-header-column"><div><span class="ant-table-column-title">分区</span><span class="ant-table-column-sorter"></span></div></span>
          </th>
          <th key="2" colspan="8" class="ant-table-align-center" style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">品牌</span><span class="ant-table-column-sorter"></span></div></span></th>
          <th key="3" colspan="4" class="ant-table-align-center" style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">轮胎</span><span class="ant-table-column-sorter"></span></div></span></th>
          <th key="4" colspan="4" class="ant-table-align-center" style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">NGK</span><span class="ant-table-column-sorter"></span></div></span></th>
          <th key="5" colspan="1" class="ant-table-align-center ant-table-row-cell-last" style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">品牌+轮胎+NGK</span><span class="ant-table-column-sorter"></span></div></span></th>
        </tr>
        <tr>
          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">年度目标</span><span class="ant-table-column-sorter"></span></div></span></th>
          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">截止1-{{ months-1 }}月完成</span><span class="ant-table-column-sorter"></span></div></span></th>
          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">{{ months }}月销售额截止达成</span><span class="ant-table-column-sorter"></span></div></span></th>
          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">累计{{ months }}月截止完成</span><span class="ant-table-column-sorter"></span></div></span></th>
          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title red">年度完成率</span><span class="ant-table-column-sorter"></span></div></span></th>
          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">{{ months }}月业绩目标</span><span class="ant-table-column-sorter"></span></div></span></th>
          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title red">达成率</span><span class="ant-table-column-sorter"></span></div></span></th>
          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">今日销售额</span><span class="ant-table-column-sorter"></span></div></span></th>
          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">截止1-{{ months-1 }}月销售额</span><span class="ant-table-column-sorter"></span></div></span></th>
          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">{{ months }}月销售额截止达成</span><span class="ant-table-column-sorter"></span></div></span></th>
          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">累计{{ months }}月截止完成</span><span class="ant-table-column-sorter"></span></div></span></th>
          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">今日销售额</span><span class="ant-table-column-sorter"></span></div></span></th>
          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">截止1-{{ months-1 }}月销售额</span><span class="ant-table-column-sorter"></span></div></span></th>
          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">{{ months }}月销售额截止达成</span><span class="ant-table-column-sorter"></span></div></span></th>
          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">累计{{ months }}月截止完成</span><span class="ant-table-column-sorter"></span></div></span></th>
          <th style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">今日销售额</span><span class="ant-table-column-sorter"></span></div></span></th>
          <th class="ant-table-align-center ant-table-row-cell-break-word ant-table-row-cell-last" style="text-align: center;"><span class="ant-table-header-column"><div><span class="ant-table-column-title">{{ months }}月销售额截止达成</span><span class="ant-table-column-sorter"></span></div></span></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in list" :key="index">
          <td
            v-for="(sitem,si) in columns"
            :key="sitem.dataIndex+index"
            :class="sitem.title.indexOf('率')>=0?'red '+(hjRow.indexOf(index)>=0?'hj':''):(hjRow.indexOf(index)>=0?'hj':'')"
            style="text-align: center;"
            v-if="!(index==list.length-1&&si==0)"
            :colspan="index==list.length-1&&si==1?2:1"
            :style="index==list.length-1?'color: red;font-weight:bold;background:#dfdeff;border-color:#c7c7ff;':''"
          >
            {{ si>1 ? Number(item[sitem.dataIndex]||0).toFixed(2) : item[sitem.dataIndex].toString() }}{{ sitem.title.indexOf('率')>=0?'%':'' }}
          </td>
        </tr>
      </tbody>
    </table>
    <div v-else class="noData">
      暂无数据，请点击查询
    </div>
  </div>
</template>

<script>
export default {
  name: 'Table3',
  props: {
    // 表格数据
    tableData: {
      type: Array,
      default: () => []
    },
    // 月份
    month: {
      type: String,
      default: () => ''
    },
    // 日期
    nowDate: {
      type: String,
      default: () => ''
    }
  },
  data () {
    return {
      months: '', // 月份
      list: [], // 列表数据
      showDz: false, // 是否显示截止日期
      dateStr: '' // 日期格式化
    }
  },
  computed: {
    // 是否合计
    hjRow () {
      const ret = []
      this.list.forEach((item, index) => {
        if (item.subareaAreaName.indexOf('合计') >= 0 || item.subareaAreaName.indexOf('云南省') >= 0) {
          ret.push(index)
        }
      })
      return ret
    },
    // 列
    columns () {
      return [
        {
          title: '区域负责人',
          dataIndex: 'managerNameList',
          align: 'center',
          width: '250'
        },
        {
          title: '分区',
          dataIndex: 'subareaAreaName',
          align: 'center',
          width: '250'
        },
        {
          title: '年度目标',
          dataIndex: 'yearTarget',
          align: 'center',
          width: '100'
        },
        {
          title: '截止1-' + (this.months - 1) + '月完成',
          dataIndex: 'histSalesReal',
          align: 'center',
          width: '100'
        }, {
          title: this.months + '月销售额截止达成',
          dataIndex: 'currSalesReal',
          align: 'center',
          width: '130'
        }, {
          title: '累计' + this.months + '月截止完成',
          dataIndex: 'accuSalesReal',
          align: 'center',
          width: '100'
        }, {
          title: '年度完成率',
          dataIndex: 'yearTargetRate',
          align: 'center',
          width: '100'
        }, {
          title: this.months + '月业绩目标',
          dataIndex: 'currTarget',
          align: 'center',
          width: '100'
        }, {
          title: '达成率',
          dataIndex: 'currTargetRate',
          align: 'center',
          width: '100'
        }, {
          title: '今日销售额',
          dataIndex: 'todaySalesReal',
          align: 'center',
          width: '100'
        },
        {
          title: '截止1-' + (this.months - 1) + '月销售额',
          dataIndex: 'histSalesRealTireAmount',
          align: 'center',
          width: '100'
        }, {
          title: this.months + '月销售额截止达成',
          dataIndex: 'currSalesTireReal',
          align: 'center',
          width: '130'
        }, {
          title: '累计' + this.months + '月截止完成',
          dataIndex: 'accuSalesRealTireAmount',
          align: 'center',
          width: '100'
        }, {
          title: '今日销售额',
          dataIndex: 'todaySalesTireReal',
          align: 'center',
          width: '100'
        },
        {
          title: '截止1-' + (this.months - 1) + '月销售额',
          dataIndex: 'histSalesRealNGKAmount',
          align: 'center',
          width: '100'
        }, {
          title: this.months + '月销售额截止达成',
          dataIndex: 'currSalesNGKReal',
          align: 'center',
          width: '130'
        }, {
          title: '累计' + this.months + '月截止完成',
          dataIndex: 'accuSalesRealNGKAmount',
          align: 'center',
          width: '100'
        }, {
          title: '今日销售额',
          dataIndex: 'todaySalesNGKReal',
          align: 'center',
          width: '100'
        },
        {
          title: this.months + '月销售额截止达成',
          dataIndex: 'totalCurrSalesTireReal',
          align: 'center',
          width: '130'
        }
      ]
    }
  },
  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 () {
      this.list = this.tableData
    },
    // 获取表格对象
    getTable () {
      return document.getElementById('day-table-3')
    },
    // 初始化
    pageInit () {
      this.getmonths()
      this.getshowDz()
      this.getlist()
    }
  }
}
</script>

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