<template>
  <el-popover
    popper-class="arrival-declare-popper"
    placement="left"
    :visible-arrow="false"
    title=""
    width="750"
    trigger="manual"
    v-model="popperVisible"
  >
    <div style="position: absolute; right: 10px; z-index: 10">
      <i
        class="el-icon-close"
        style="cursor: pointer; font-size: 20px; font-weight: 700"
        @click.stop="popoverClose"
      ></i>
    </div>
    <el-tabs v-model="tabsKey" @tab-click="handleClick">
      <el-tab-pane label="回执日志" name="1">
        <div>
          <span style="font-weight: 700; color: #515a6e">提运单号：</span>
          {{ rowData.billNo }}
        </div>
        <el-table
          :pagination="false"
          :border="true"
          tooltip-effect="dark"
          max-height="300px"
          :data="logData"
          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"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="操作日志" name="2">
        <el-table
          :pagination="false"
          :border="true"
          tooltip-effect="dark"
          max-height="300px"
          :data="optionsData"
          rowKey="id"
        >
          <el-table-column
            v-for="(item, index) in optionsColumn"
            :key="index"
            :prop="item.value"
            :label="item.name"
            :align="item.align"
            :width="item.width"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-button
      slot="reference"
      type="text"
      @click.stop="popoverChange(rowData, dataKey)"
    >
      <slot name="buttonLabel"></slot>
    </el-button>
  </el-popover>
</template>

<script>
export default {
  props: {
    rowData: {
      tpye: Object,
      default: null,
    },

    receiptDataHead: {
      type: Array,
      default() {
        return [];
      },
    },
    optionsColumn: {
      type: Array,
      default() {
        return [];
      },
    },
    logFunction: {
      type: Function,
      default: null,
    },
    optionsFunction: {
      type: Function,
      default: null,
    },
    optionsVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      tableLoading: false,
      popperVisible: false,
      tabsKey: "1",
      logData: [],
      optionsData: [],
    };
  },
  computed: {},
  watch: {
    optionsVisible(val) {
      if (val) {
        this.tabsKey = "1";
        this.fetchData();
        this.popperVisible = true;
      }
    },
  },

  methods: {
    fetchData() {
      const { billNo } = this.rowData;
      let objVal = { billNo: billNo };
      this.logFunction(objVal)
        .then((res) => {
          if (res.code === "200") {
            console.log(res.data);
            this.logData = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // tab点击事件
    handleClick(tab, event) {
      console.log(tab.name, event);
      if (+tab.name === 2) {
        const { billNo } = this.rowData;
        let objVal = { billNo: billNo };
        this.optionsFunction(objVal)
          .then((res) => {
            if (res.code === "200") {
              console.log(res.data);
              this.optionsData = res.data;
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    //弹框关闭
    popoverClose() {
      this.popperVisible = false;
      this.$emit("close");
    },
    //弹框状态改版
    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>