<template>
  <div>
    <vxe-pulldown ref="pulldownRef" popup-class-name="my-dropdown4" transfer>
      <template #default>
        <vxe-input
          v-model="searchName"
          suffix-icon="vxe-icon-table"
          v-bind="inputProps"
          @keyup="keyupEvent"
          @focus="focusEvent"
          @suffix-click="suffixClick"
        ></vxe-input>
      </template>
      <template #dropdown>
        <div class="my-bodydown4">
          <vxe-grid
            ref="xGrid"
            :data="tableData"
            :pagerConfig="pagerConfig"
            @cell-click="cellClickEvent"
            @checkbox-change="onCheckBoxChange"
            @checkbox-all="onCheckBoxAll"
            @page-change="pageChangeEvent"
            v-bind="tableConfig"
          ></vxe-grid>
        </div>
      </template>
    </vxe-pulldown>
  </div>

</template>
<script>
export default {
  props: {
    inputProps: {
      type: Object,
      default: () => ({
        placeholder: '请选择'
      })
    },
    tableConfig: {
      type: Object,
      default: () => ({
      })
    },
    apiMethod: {
      required: true,
    },
    apiCallback: {
      required: false
    }
  },
  data() {
    return {
      searchName: "",
      pagerConfig: {
        pageSize: 10,
        pageSizes: [10, 20, 50, 100, 200],
        enabled: true
      },
      tableData: [],
    };
  },
  created() {
    this.getList()
  },
  mounted() {
  },
  methods: {
    // 获取表格数据
    async getList() {
      if (this.apiMethod) {
        const res = await this.apiMethod()
        console.log('apiCallback=',this.apiCallback)
        // 如果有回调处理参数
        if (this.apiCallback) {
          const newRes = this.apiCallback(res)
          this.tableData = newRes.list
          console.log('this.tableData', newRes)
        } else {
          // 如果没有回调处理参数，则走默认的
        }
      }
    },
    // 复选
    onCheckBoxChange(params) {
      console.log('复选了=', params)
      this.$emit('change',params)
    },
    // 全选/全不选
    onCheckBoxAll(params) {
      console.log('params=', params)
      this.$emit('changeAll',params)
    },
    focusEvent() {
      const $pulldown = this.$refs.pulldownRef;
      if ($pulldown) {
        $pulldown.showPanel();
      }
    },
    keyupEvent() {
    },
    suffixClick() {
      const $pulldown = this.$refs.pulldownRef;
      if ($pulldown) {
        $pulldown.togglePanel();
      }
    },
    cellClickEvent({ row }) {
      const $pulldown = this.$refs.pulldownRef;
      if ($pulldown) {
        this.searchName = row.name;
        $pulldown.hidePanel();
      }
    },
    pageChangeEvent({ currentPage, pageSize }) {
      this.pagerConfig.currentPage = currentPage;
      this.pagerConfig.pageSize = pageSize;
    },
  },
};
</script>

<style lang="scss">
.my-dropdown4 {
  background-color: #fff;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  .my-bodydown4 {
    width: 600px;
    height: 300px;
  }

  .my-footdown4 {
    border-top: 1px solid #e8eaec;
  }
}
</style>
