<template>
  <x-table :content-bordered="false" :cell-bordered="false">
    <thead>
      <tr>
        <th v-for="(column, index) in columns" :key="index">{{column.label}}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in details" :key="index">
        <td v-for="(column, index2) in columns" :key="index2">
          <template v-if="column.type==='month'">{{(row[column.prop]) | month}}</template>
          <template v-else-if="column.type==='money'">{{(row[column.prop]) | money}}</template>
          <template v-else-if="column.type==='ratio'">{{(row[column.prop]) | ratio}}</template>
          <template v-else-if="column.type==='yoy'">
            {{(row[column.prop]) | yoy}}
            <rt-icon v-if="(row[column.prop]) > 0" slot="icon" name="rt-xrm-arrow-up" size="13"></rt-icon>
            <rt-icon
              v-else-if="(row[column.prop]) < 0"
              slot="icon"
              name="rt-xrm-arrow-down"
              size="13"
            ></rt-icon>
          </template>
          <template v-else>{{(row[column.prop])}}</template>
        </td>
      </tr>
      <tr>
        <td v-for="(column, index) in columns" :key="index">
          <template v-if="column.type==='month'">{{sumData[index]}}</template>
          <template v-else-if="column.type==='money'">{{sumData[index] | money}}</template>
          <template v-else-if="column.type==='ratio'">{{sumData[index] | ratio}}</template>
          <template v-else-if="column.type==='yoy'">
            {{sumData[index] | yoy}}
            <rt-icon v-if="sumData[index] > 0" slot="icon" name="rt-xrm-arrow-up" size="13"></rt-icon>
            <rt-icon v-else-if="sumData[index] < 0" slot="icon" name="rt-xrm-arrow-down" size="13"></rt-icon>
          </template>
          <template v-else>{{sumData[index]}}</template>
        </td>
      </tr>
    </tbody>
  </x-table>
</template>

<script>
import { XTable } from 'vux';

export default {
  name: 'rtTable',
  components: { XTable },
  props: {
    columns: {
      type: Array,
      required: true
    },
    details: {
      type: [Array, Object]
    },
    sumData: {
      type: [Array, Object]
    }
  },
  data() {
    return {};
  },
  filters: {
    ratio: value => `${value.toFixed(2)}%`,
    money: value => value.toFixed(2),
    month: value => `${value % 100 > 9 ? value.toString().substring(4, 6) : value.toString().substring(5, 6)}月`,
    yoy: value => `${Math.abs(value).toFixed(2)}%`
  }
};
</script>

<style lang="less" scoped>
table {
  font-size: 13px;
  font-weight: 400;
  tr {
    height: 35px;
    line-height: 35px;
  }
  thead > tr {
    background: #edf6ff;
    color: #53a4fc;
  }
  tbody > tr {
    background: #ffffff;
    color: #222222;
  }
  tbody > tr:nth-child(even) {
    background: #edf6ff;
  }
  tbody > tr:last-child {
    background: #ffffff;
    color: #53a4fc;
  }
}
/deep/ .vux-table td:before,
.vux-table th:before {
  border: 0;
}
/deep/.vux-table:after {
  border: 0;
}
</style>