<template>
  <div>
    <div v-if="tableData.length">
      <!-- 全国销售日报 -->
      <table class="table-box" id="day-table-2" >
        <thead class="ant-table-thead">
          <tr>
            <th :colspan="cloumns.length">
              <div class="table-title">{{ dateStr }} 项目销售日报2 <span v-if="showDz">（截止{{ nowDate }}）</span></div>
            </th>
          </tr>
          <tr>
            <th v-for="item in cloumns" :key="item">{{ item }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in list" :key="index">
            <td align="center">{{ item.proName }}</td>
            <td align="center">{{ item.userName }}</td>
            <td align="center">{{ Number(item.bymb).toFixed(2) }}</td>
            <td align="center">{{ Number(item.amount).toFixed(2) }}</td>
            <td align="center" class="red">{{ item.wcl }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div v-else class="noData">
      暂无数据，请点击查询
    </div>
  </div>
</template>

<script>
export default {
  name: 'Table2',
  props: {
    // 表格数据
    tableData: {
      type: Array,
      default: () => []
    },
    // 月份
    month: {
      type: String,
      default: () => ''
    },
    // 当前日期
    nowDate: {
      type: String,
      default: () => ''
    }
  },
  data () {
    return {
      months: '', // 月
      list: [], // 列表数据
      showDz: false, // 是否显示截止日期
      dateStr: '', // 日期格式化
      cloumns: [] // 列表头
    }
  },
  methods: {
    // 获取表格列头
    getcloumns () {
      const m = this.month.split('-')
      this.cloumns = ['项目', '品类经理', m[1] + '月业绩目标', m[1] + '月销售额截止达成', '达成率']
    },
    // 获取月份
    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-2')
    },
    // 初始化
    pageInit () {
      this.getmonths()
      this.getcloumns()
      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>
