<template>
  <div>
    <div>
      <div class="top-data">
        <div v-for="(tdItem,tdIndex) in topData" :key="tdIndex" :style="{width: 100/topData.length+'%'}">
          <div>
            <div v-if="tdItem.type === 'amount'" style="display: flex;align-items: baseline;justify-content: center;">
              <span style="font-size: 12px;">￥</span>
              {{ tdItem.value ? toThousandCents(tdItem.value) : '0.00' }}
            </div>
            <div v-else>{{ tdItem.value }}</div>
          </div>
          <div>
            {{ tdItem.title }}
          </div>
        </div>
      </div>
      <div class="header">
        <div style="width:17px;"></div>
        <div style="width: calc(100% - 17px);display: flex;">
          <div :style="{width:colItem.width,textAlign:(colItem.align?colItem.align:'center')}"
               v-for="(colItem,colIndex) in columns" :key="colIndex">{{ colItem.title }}
          </div>
        </div>
      </div>

      <div v-if="tableData && tableData.length>0" class="data">
        <div v-for="(tableDataItem,tableDataIndex) in tableData" :key="tableDataIndex"
             style="display: flex;background: #fff;padding: 0 9px;">
          <div style="width:17px;position: relative;display: flex;align-items: center;"
               :style="{borderBottom:(tableDataIndex!==tableData.length-1?1:0)+'px solid #E9F0FE;'}">
            <img style="position: absolute;width: 20.16px;height: 15.26px;top:8px;left:-9.5px;" v-if="tableDataIndex<=2"
                   :src="getImg(tableDataIndex)"/>
            <div style="font-family: 'DIN Alternate';font-style: normal;font-weight: 700;font-size: 9px;color: #1B365D;"
                 v-else>{{ tableDataIndex <= 8 ? ('0' + (tableDataIndex + 1)) : (tableDataIndex + 1) }}
            </div>
          </div>
          <div style="width: calc(100% - 17px);display: flex;">
            <div class="cell"
                 :style="{width:col2Item.width,borderBottom:(tableDataIndex!==tableData.length-1?1:0)+'px solid #E9F0FE',textAlign:(col2Item.align?col2Item.align:'center')}"
                 v-for="(col2Item,col2Index) in columns" :key="col2Index">
          <span v-if="col2Item.type === 'amount'" style="display: inline-block;text-align: left;word-break: break-all;">
            <span style="font-size: 10px;"
                  v-if="(tableDataItem[col2Item.name] || tableDataItem[col2Item.name] === 0)">￥</span>
            {{ tableDataItem[col2Item.name] ? toThousandCents(tableDataItem[col2Item.name]) : (!col2Item.ifNull ? '0.00' : col2Item.ifNull) }}
          </span>
              <span v-else style="display: inline-block;text-align: left;word-break: break-all;">
            {{ col2Item.before && (tableDataItem[col2Item.name] || tableDataItem[col2Item.name] === 0) ? col2Item.before : '' }}
            {{ (tableDataItem[col2Item.name] || tableDataItem[col2Item.name] === 0) ? tableDataItem[col2Item.name] : (col2Item.ifNull ? col2Item.ifNull : '') }}
            {{ col2Item.after && (tableDataItem[col2Item.name] || tableDataItem[col2Item.name] === 0) ? col2Item.after : '' }}
          </span>
            </div>
          </div>
        </div>
      </div>
      <div v-else
           style="line-height: 100px;color: #95A8CB;width:100%;font-family: 'PingFang SC';font-style: normal;font-weight: 400;font-size: 14px;background:#fff;text-align: center;">
        <div>暂无数据</div>
      </div>
    </div>
    <div style="width:100%;height:7.5px;border-radius: 0px 0px 7.5px 7.5px;background: #fff;"></div>
  </div>
</template>

<script>

import index1 from '@/assets/images/index1.png'
import index2 from '@/assets/images/index2.png'
import index3 from '@/assets/images/index3.png'

export default {
  name: "index",
  props: {
    columns: {
      type: Array,
      default: () => [{title: '门店名称', name: 'storeName', width: '35%'}, {
        title: '成交金额',
        name: 'amount',
        width: '25%'
      }, {title: '任务目标', name: 'target', width: '25%'}, {title: '完成率', name: 'rate', width: '15%'}]
    },
    topData: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => [{storeName: '门店11a', amount: '1888', target: '2000', rate: '80%'}, {
        storeName: '门店1',
        amount: '1888',
        target: '2000',
        rate: '80%'
      }, {storeName: '门店1', amount: '1888', target: '2000', rate: '80%'}, {
        storeName: '门店1',
        amount: '1888',
        target: '2000',
        rate: '80%'
      }, {storeName: '门店23123123345345341', amount: '1888222222222222222222222', target: '2000', rate: '80%'}]
    }
  },
  data(){
    return{
      index1,
      index2,
      index3
    }
  },
  methods: {
    getImg(tableDataIndex){
      return this['index'+(tableDataIndex+1)]
    },
    //千分符
    toThousandCents(num) {
      if (num == undefined) {
        return 0;
      }
      var num = num + '';
      var d = '';
      if (num.slice(0, 1) == '-') {
        d = num.slice(0, 1);
        num = num.slice(1);
      }
      var len = num.length;
      var index = num.indexOf('.');
      if (index == -1) {
        num = num + '.00';
      } else if ((index + 2) == len) {
        num = num + '0';
      }
      var index = num.indexOf('.'); // 字符出现的位置
      var num2 = num.slice(-3);
      num = num.slice(0, index)
      var result = '';
      while (num.length > 3) {
        result = ',' + num.slice(-3) + result;
        num = num.slice(0, num.length - 3);
      }
      if (num) {
        result = num + result;
      }
      return d + (result + num2)
    }
  }
}
</script>

<style scoped>
/* components/dk-table/dk-table.wxss */
.top-data {
  background: linear-gradient(180deg, #D9F2F8 0%, #FAFEFF 100%);
  border-radius: 7.5px 7.5px 0px 0px;
  display: flex;
  padding: 17px 0;
}

.top-data > div:nth-child(n) {
  text-align: center;

}

.top-data > div:nth-child(n) > div:nth-child(1) {
  margin-bottom: 5px;
  font-family: 'PingFang HK';
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  color: #1B365D;
}

.top-data > div:nth-child(n) > div:nth-child(2) {
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #95A8CB;
}

.top-data > div:nth-child(n+2) {
  border-left: 1px solid #ABC6CC;
}


.header {
  display: flex;
  width: calc(100%);
  background: #fff;
  padding: 0 9.5px;
}

.header > div:nth-child(n) {
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  line-height: 40px;
  color: #00A7B5;
}

.cell {
  font-family: 'PingFang HK';
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  color: #1B365D;
  padding: 7.5px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}


</style>
