<template>
  <!-- 表体 -->
  <Table
    class="fedexDetialTable"
    :data="tableData"
    :headerData="headerData"
    @rowClick="rowClick"
    maxHeight="300px"
    :order="false"
    :border="false"
    :pagination="false"
    :pageSizes="[20, 30, 50, 100]"
    :highlightCurrentRow="false"
  >
    <template v-slot:skuCode="scope">
      <el-tooltip
        class="item"
        effect="dark"
        :content="scope.row.model"
        placement="right"
      >
        <span>{{ scope.row.skuCode }}</span>
      </el-tooltip>
    </template>
    <template v-slot:knockdownNumber="scope">
      <span
        >{{ scope.row.knockdownNumber | clearNull }}
        {{ scope.row.knockdownUnit | clearNull }}</span
      >
    </template>
    <template v-slot:qtyLegalFirst="scope">
      <span
        >{{ scope.row.qtyLegalFirst | clearNull }}
        {{ scope.row.unitLegalFirst | clearNull }}</span
      >
    </template>
    <template v-slot:qtyLegalSecond="scope">
      <span
        >{{ scope.row.qtyLegalSecond | clearNull }}
        {{ scope.row.unitLegalSecond | clearNull }}</span
      >
    </template>
    <template v-slot:amount="scope">
      <span
        >{{ scope.row.amount | clearNull }}
        {{ scope.row.currency | clearNull }}</span
      >
    </template>
  </Table>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: null,
    },
    headerData: {
      type: Array,
      default: null,
    },
    activeDetial: {
      type: Object,
      default: null,
    },
    dictData: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      formData: this.activeDetial,
      expandRowKeys: [],
      unit: [],
      levyType: [],
      currency: [],
      country: [],
    };
  },
  watch: {
    activeDetial(val) {
      if (val == null) {
        this.expandRowKeys = [];
      }
      this.formData = val;
    },
    detialsData(val) {
      this.tableData = val;
    },
  },
  methods: {
    rowClick(val) {
      this.$emit("rowClick", val);
    },
  },
  filters: {
    clearNull(value) {
      if (value == null) {
        return "";
      } else {
        return value;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table tr {
  background-color: #f2f2f2 !important;
  border: 0;
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #f2f2f2 !important;
}
</style>