<template>
  <Table
    class="fedexDetialTable fedexTableBlack tableHeightAuto bodyTable"
    :data="tableData"
    :headerData="bodyHeader"
    :order="true"
    :border="false"
    :pagination="false"
    :pageSizes="[20, 30, 50, 100]"
    noLabel="序号"
    rowKey="index"
    emptyText="暂无数据"
    :rowStyleType="true"
    :rowStyleOption="{
      key: 'isError',
      value: 1,
      className: 'tableErrorRow',
    }"
    :expandRowKeys="expandRowKeys"
  >
    <template v-slot:unit="scope">
      <span>{{ selectDictLabel(scope.row.unit, "unit", "code") }}</span>
    </template>
    <template v-slot:currency="scope">
      <span>{{
        selectDictLabel(scope.row.currency, "currency", "value")
      }}</span>
    </template>
    <!-- <template slot="optionColumn">
      <el-table-column
        header-align="center"
        align="center"
        label="操作"
        width="120"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="
              expandRowKeys.includes(scope.row.index)
                ? closeEdit()
                : editDetail(scope.row)
            "
          >
            <span v-show="expandRowKeys.includes(scope.row.index)">
              <svg-icon icon-class="upIcon" />
              {{ $t("entry.detial.form.up") }}
            </span>
            <span v-show="!expandRowKeys.includes(scope.row.index)"
              ><svg-icon icon-class="downIcon" />
              {{ $t("entry.detial.form.down") }}
            </span>
          </el-button>
        </template>
      </el-table-column>
    </template> -->
  </Table>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default() {
        return [];
      },
    },
    bodyHeader: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      expandRowKeys: [],
    };
  },
  methods: {
    editDetail(val) {
      this.expandRowKeys = [val.index];
    },
    closeEdit() {
      this.expandRowKeys = [];
    },
    selectDictLabel(value, dictkey, key) {
      let str = value;
      this.dictData[dictkey].forEach((item) => {
        if (value == item[key]) {
          str = item.name;
        }
      });
      return str;
    },
  },
};
</script>

<style scoped lang="scss">
.fedexDetialTable {
  max-height: 310px;
}
</style>