<template>
  <div class="edit-down-table">
    <vxe-pulldown class="edit-down-pulldown" ref="xDown" transfer>
      <template>
        <vxe-input class="edit-down-input" ref="inputx" :type="enalbedPopup ? 'search' : 'input'" v-model="textboxValue"
          :readonly="readonly" @keyup="keyupEvent" :placeholder="placeholder" @click="clickEvent"
          @suffix-click="suffixClick" @search-click="popupEvent"></vxe-input>


      </template>
      <template #dropdown>

        <vxe-grid auto-resize height="400" ref="xgrid" :row-config="{ isCurrent: true, isHover: true }"
          :loading="loading" :pager-config="tablePage" :data="tableData" :columns="tableColumn"
          @cell-click="selectEvent" @page-change="pageChangeEvent">
        </vxe-grid>

      </template>
    </vxe-pulldown>

    <vxe-modal show-footer class-name="vxe-table--ignore-clear edit-popup-box" title="选择数据" :width="modalWidth"
      :height="modalHeight" v-model="modalVisible" @confirm="confirmEvent">
      <template #default>
        <component :is="popupPage" ref="popup" :pageOptions="popupPageOptions" :pageMode="popupPageMode"></component>
      </template>
    </vxe-modal>
  </div>
</template>

<script>



import BASE_URL from '@/services/base/api.js';
export default {
  name: 'MkFormDataSelector',
  props: {
    readonly: Boolean,
    params: Object,
    value: Array
  },
  data() {
    return {
      actions: {
        getList: `${BASE_URL}/api/web/listdata`
      },
      modalVisible: false,
      lastKey: '',
      modelName: '',
      orderBy: '',
      textboxValue: '',
      placeholder: '',
      row: null,
      column: null,
      loading: false,
      tableData: [],
      enalbedPopup: false,
      popupPage: null,
      popupPageOptions: {},
      popupPageMode: '',

      tableColumn: [
        { field: 'name', title: '名称' },
        { field: 'code', title: '编码' }
      ],
      modalWidth: 800,
      modalHeight: 600,
      searchFieldNames: ['name', 'code'],
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 100
      }
    }
  },
  created() {
    this.load()
    this.heightInit();
  },
  watch: {
    value() {
      if (this.value && this.value[1]) {
        this.textboxValue = this.value[1];
      } else {
        this.textboxValue = "";
      }
    }
  },
  methods: {
    heightInit() {
      this.$nextTick(() => {

        this.modalHeight = this.$mk.getWindowSize().height * 0.9;
        this.modalWidth = this.$mk.getWindowSize().width * 0.9;
      });
    },
    load() {
      const { params } = this

      if (params) {


        this.modelName = params.modelName;
        this.orderBy = params.orderBy;
        this.placeholder = params.placeholder;
        if (params.searchFieldNames) {
          this.searchFieldNames = params.searchFieldNames;
        }
        if (params.columns) {
          this.tableColumn = params.columns;
        }
        if (params.popup) {
          this.enalbedPopup = true;
          this.popupPage = params.popup.page;
        }
      }

      if (this.value && this.value[1]) {
        this.textboxValue = this.value[1];
      } else {
        this.textboxValue = "";
      }

      this.getData().then(data => {
        this.tableData = data
      });
    },

    getData(key) {
      this.lastKey = key;
      let filter = { rules: [], op: 'or' };
      if (key) {
        for (let i = 0; i < this.searchFieldNames.length; i++) {
          let field = this.searchFieldNames[i];
          filter.rules.push({ value: key, field: field, op: "like" });
        }
      }
      return this.$mk.post({
        url: this.actions.getList,
        data: {
          filter: filter,
          model: this.modelName,
          orderby: this.orderBy
        }
      });
    },
    clickEvent() {
      if (this.readonly) {
        return;
      }
      this.$refs.xDown.showPanel()
    },
    keyupEvent(e) {
      const { params } = this
      if (this.readonly) {
        return;
      }
      if (e.$event.keyCode == 40) {
        this.$refs.xDown.showPanel();
        const grid = this.$refs.xgrid;
        var ds = grid.getTableData();
        grid.focus();
        grid.setCurrentRow(ds.tableData[0]);
        return;
      }
      const cellValue = this.textboxValue;
      if (!cellValue) {
        this.$emit('input', ["", ""]);
        if (params.onDataChanged) {
          params.onDataChanged({ value: ["", ""]})
        }
      }
      this.loading = true
      this.getData(cellValue).then(data => {
        this.loading = false
        this.tableData = data
      })
    },
    suffixClick() {
      this.$refs.xDown.togglePanel()
    },
    pageChangeEvent({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.loading = true
      this.getData(this.lastKey).then(data => {
        this.loading = false
        this.tableData = data
      })
    },
    selectEvent(e) {
      const { params } = this
      let textField = params.textField;
      this.textboxValue = e.row[textField];
      this.$emit('input', [e.row.ID, e.row[textField]]);
      if (params.onDataChanged) {
        params.onDataChanged({ value: [e.row.ID, e.row[textField]],data:e.row })
      }
      this.$refs.xDown.hidePanel()
    },

    popupEvent() {
      this.modalVisible = true;
    },
    confirmEvent() {
      const { params } = this
      let selectedRow = this.$refs.popup.getSelectdRow();
      let textField = params.textField;
      this.textboxValue = selectedRow[textField];
      this.modalVisible = false;

      this.$emit('input', [selectedRow.ID, selectedRow[textField]]);

      if (params.onDataChanged) {
        params.onDataChanged({ value: [selectedRow.ID, selectedRow[textField]],data:selectedRow })
      }
    }
  }
}
</script>

<style>
.edit-down-pulldown {
  width: 100%;
}



.edit-down-wrapper {
  width: 600px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}
</style>