<template>
  <el-popover
    popper-class="arrival-declare-popper"
    placement="left"
    :visible-arrow="false"
    title=""
    width="850"
    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
          v-loading="tableLoading"
          :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
          v-loading="tableLoading"
          :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">
      <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;
      this.tableLoading = true;
      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);
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
    // tab点击事件
    handleClick(tab, event) {
      console.log(tab.name, event);
      if (+tab.name === 2) {
        this.tableLoading = true;
        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);
          })
          .finally(() => {
            this.tableLoading = false;
          });
      }
    },
    //弹框关闭
    popoverClose() {
      this.popperVisible = false;
      this.$emit("close");
    },
  },
};
</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>