<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 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: {},
};
</script>

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