<template>
  <el-popover
    :popper-class="`popper${dataKey}${rowData[idKey]} portLogPopper`"
    placement="left"
    :visible-arrow="false"
    title=""
    width="750"
    trigger="manual"
    v-model="rowData[`${dataKey}PopoverType`]"
  >
    <div style="text-align: right">
      <i
        class="el-icon-close"
        style="cursor: pointer; font-size: 20px; font-weight: 700"
        @click.stop="popoverClose"
      ></i>
    </div>
    <div v-loading="tableLoading">
      <slot name="title"></slot>
      <div style="height: 10px"></div>
      <el-table
        :pagination="false"
        :border="true"
        :empty-text="
          loadingDatas &&
          rowData &&
          rowData.popoverData &&
          !rowData.popoverData.length
            ? '数据加载中'
            : $t('portEntry.emptyText')
        "
        :data="rowData.popoverData"
        rowKey="id"
      >
        <el-table-column
          v-for="(item, index) in receiptDataHead"
          :key="index"
          :prop="item.value"
          :label="item.name"
          :align="item.align"
          :width="item.width"
        >
        </el-table-column>
      </el-table>
      <!-- <Table
        class="fedexDetialTable mt20"
        :data="rowData.popoverData"
        :headerData="receiptDataHead"
        :selection="false"
        :selectFixed="false"
        :order="false"
        :border="true"
        :rowSelectDataType="false"
        :pagination="false"
        :page="1"
        :pageSizes="[20, 30, 50, 100]"
        :totalCount="0"
        :loading="tableLoading"
        :emptyText="
          loadingDatas &&
          rowData &&
          rowData.popoverData &&
          !rowData.popoverData.length
            ? '数据加载中'
            : $t('portEntry.emptyText')
        "
        :height="tableHeight"
        :maxHeight="tableHeight"
        rowKey="id"
      >
      </Table> -->
    </div>
    <el-button
      slot="reference"
      type="text"
      @click.stop="popoverChange(rowData, dataKey)"
    >
      <slot name="buttonLabel"></slot>
    </el-button>
  </el-popover>
</template>

<script>
export default {
  props: {
    dataKey: {
      type: String,
      default: "",
    },
    idKey: {
      type: String,
      default: "id",
    },
    rowData: {
      tpye: Object,
      default: null,
    },
    tableData: {
      type: Array,
      default() {
        return [];
      },
    },
    receiptDataHead: {
      type: Array,
      default() {
        return [];
      },
    },
    parentDom: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      tableLoading: false,
    };
  },
  computed: {
    loadingDatas() {
      return this.$store.state.viewOption.loadingDatas;
    },
  },

  methods: {
    //弹框关闭
    popoverClose() {
      this.$emit("popoverClose");
      this.parentDom.$refs.tables.$refs.bodyWrapper.style.overflowY = "auto";
      this.$store.dispatch("setLoadingState", true);
    },
    //弹框状态改版
    popoverChange(data, type) {
      console.log(data, type);
      this.popoverClose();
      let arr = JSON.parse(JSON.stringify(this.tableData));
      arr.forEach((item) => {
        item.popoverData = [];
        if (data[this.idKey] != item[this.idKey]) {
          // item[`${type}PopoverLoading`] = false;
          item[`${type}PopoverType`] = false;
        } else {
          // item[`${type}PopoverLoading`] = true;
          item[`${type}PopoverType`] = !JSON.parse(
            JSON.stringify(item[`${type}PopoverType`])
          );
        }
      });
      if (!data[`${type}PopoverType`]) {
        this.parentDom.$refs.tables.$refs.bodyWrapper.style.overflowY =
          "hidden";
      } else {
        this.parentDom.$refs.tables.$refs.bodyWrapper.style.overflowY = "auto";
      }
      this.$emit("popoverChange", {
        tableData: arr,
        data: data,
        type: !data[`${type}PopoverType`],
        status: type,
      });

      this.$nextTick(() => {
        document.getElementsByClassName("el-table__row").forEach((dom1, i) => {
          if (i == data.index) {
            dom1.classList.add("activeRow");
          } else {
            dom1.classList.remove("hover-row");
            dom1.classList.remove("activeRow");
          }
        });
        let interval = setInterval(() => {
          if (
            document.getElementsByClassName(`popper${type}${data[this.idKey]}`)
              .length == 1
          ) {
            clearInterval(interval);
          }
          document
            .getElementsByClassName(`popper${type}${data[this.idKey]}`)
            .forEach((dom, index) => {
              if (index > 0) {
                dom.style.display = "none";
                dom.remove();
              }
            });
        }, 100);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tableList {
  width: 200px;
  max-height: 500px;
  padding: 5px;
  margin: 0;
  position: absolute;
  bottom: 35px;
  right: 0px;
  border: 1px solid #ccc;
  border-radius: 3%;
  background: #fff;
  overflow-y: scroll;
}
</style>