<template>
  <div>
    <!-- 分区销售日报 -->
    <h2 class="table-title" v-if="tableData.length">{{ month.replace('-','年')+'月' }} 分区销售日报(截止{{ nowDate }})</h2>
    <table class="table-box" id="day-table-3" v-if="tableData.length">
      <colgroup><col><col><col><col><col><col><col><col><col><col><col><col><col><col><col></colgroup>
      <thead class="ant-table-thead">
        <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="subareaName" 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="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">品牌+轮胎</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-4月完成</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">5月销售额截止达成</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">累计5月截止完成</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">5月业绩目标</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-4月销售额</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">5月销售额截止达成</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">累计5月截止完成</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">5月销售额截止达成</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;':''"
          >
            {{ 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: () => ''
    }
  },
  watch: {
    tableData: {
      handler (val) {
        this.$nextTick(() => {
          this.tableHeight = window.innerHeight - 360
        })
      },
      deep: true
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 360
    })
  },
  data () {
    return {
      tableHeight: 300
    }
  },
  computed: {
    list () {
      return this.tableData
    },
    hjRow () {
      const ret = []
      this.list.forEach((item, index) => {
        if (item.subareaName.indexOf('合计') >= 0 || item.subareaName.indexOf('云南省') >= 0) {
          ret.push(index)
        }
      })
      return ret
    },
    months () {
      return this.month.split('-')[1]
    },
    columns () {
      return [
        {
          title: '区域负责人',
          dataIndex: 'managerNameList',
          align: 'center',
          width: '250'
        },
        {
          title: '分区',
          dataIndex: 'subareaName',
          align: 'center',
          width: '250'
        },
        {
          title: '年度目标',
          dataIndex: 'yearTarget',
          align: 'center',
          width: '100'
        },
        {
          title: '截止1-' + (this.months[1] - 1) + '月完成',
          dataIndex: 'histSalesReal',
          align: 'center',
          width: '100'
        }, {
          title: this.months[1] + '月销售额截止达成',
          dataIndex: 'currSalesReal',
          align: 'center',
          width: '130'
        }, {
          title: '累计' + this.months[1] + '月截止完成',
          dataIndex: 'accuSalesReal',
          align: 'center',
          width: '100'
        }, {
          title: '年度完成率',
          dataIndex: 'yearTargetRate',
          align: 'center',
          width: '100'
        }, {
          title: this.months[1] + '月业绩目标',
          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] - 1) + '月销售额',
          dataIndex: 'histSalesRealTireAmount',
          align: 'center',
          width: '100'
        }, {
          title: this.months[1] + '月销售额截止达成',
          dataIndex: 'currSalesTireReal',
          align: 'center',
          width: '130'
        }, {
          title: '累计' + this.months[1] + '月截止完成',
          dataIndex: 'accuSalesRealTireAmount',
          align: 'center',
          width: '100'
        }, {
          title: '今日销售额',
          dataIndex: 'todaySalesTireReal',
          align: 'center',
          width: '100'
        },
        {
          title: this.months[1] + '月销售额截止达成',
          dataIndex: 'totalCurrSalesTireReal',
          align: 'center',
          width: '130'
        }
      ]
    }
  },
  methods: {
    getTable () {
      return document.getElementById('day-table-3')
    }
  }
}
</script>

<style lang="less" scoped>
  .table-title{
    margin-bottom: 10px;
    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>