<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>
      <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="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: "",
    },
    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) {
      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></style>