<template>
  <el-popover
    :popper-class="`popper${dataKey}${rowData.declareId} 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="rowData.popoverLoading">
      <slot name="title"></slot>
      <Table
        class="fedexDetialTable mt20"
        :data="rowData[`${dataKey}PopoverData`]"
        :headerData="receiptDataHead"
        :selection="false"
        :selectFixed="false"
        :order="false"
        :border="true"
        :rowSelectDataType="false"
        :pagination="false"
        :page="1"
        :pageSizes="[20, 30, 50, 100]"
        :totalCount="0"
        :emptyText="$t('portEntry.emptyText')"
        height="350px"
        maxHeight="500px"
        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: "",
    },
    rowData: {
      tpye: Object,
      default: null,
    },
    tableData: {
      type: Array,
      default() {
        return [];
      },
    },
    receiptDataHead: {
      type: Array,
      default() {
        return [];
      },
    },
    parentDom: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {};
  },
  methods: {
    //弹框关闭
    popoverClose() {
      this.$emit("popoverClose");
      this.parentDom.$refs.tables.$refs.bodyWrapper.style.overflowY = "auto";
    },
    //弹框状态改版
    popoverChange(data, type) {
      this.popoverClose();
      let arr = JSON.parse(JSON.stringify(this.tableData));
      arr.forEach((item) => {
        item[`${type}PopoverData`] = [];
        if (data.declareId != item.declareId) {
          // 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.declareId}`)
              .length == 1
          ) {
            clearInterval(interval);
          }
          document
            .getElementsByClassName(`popper${type}${data.declareId}`)
            .forEach((dom, index) => {
              if (index > 0) {
                dom.style.display = "none";
                dom.remove();
              }
            });
        }, 100);
      });
    },
  },
};
</script>

<style></style>