<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"
          @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-dblclick="dblClickEvent"
          @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: 'MkGridDataSelector',
  props: {
    params: Object
  },
  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();
  },
  methods: {
    heightInit() {
      this.$nextTick(() => {

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

      this.row = row
      this.column = column

      if (column && column.params) {


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

      if (this.row[column.field] && this.row[column.field][1]) {
        this.textboxValue = this.row[column.field][1];

      }

      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() {
      this.$refs.xDown.showPanel()
    },
    keyupEvent(e) {

      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;
      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(params) {
      const { row, column } = this
      row[column.field + 'ID'] = params.row.ID;
      let textField = column.params.textField;
      this.textboxValue = params.row[textField];
      row[column.field] = [params.row.ID, params.row[textField]];

      
      this.params.$table.$emit("pulldownSelected", { row:params.row, name: column.params.name, params: this.params });
      this.$refs.xDown.hidePanel()
    },
    dblClickEvent(params){
      console.log(params)
      const { row, column } = this
      row[column.field + 'ID'] = params.row.ID;
      let textField = column.params.textField;
      this.textboxValue = params.row[textField];
      row[column.field] = [params.row.ID, params.row[textField]];

      this.modalVisible = false; 
      let rows = this.$refs.popup.getConfirmData();
      this.params.$table.$emit("popupSelected", { rows, name: column.params.name, params: this.params });
    },
    popupEvent() {
      this.modalVisible = true;
    },
    confirmEvent() {
      const { row, column } = this
      let selectedRow = this.$refs.popup.getSelectdRow();
      let textField = column.params.textField;
      this.textboxValue = selectedRow[textField];
      row[column.field] = [selectedRow.ID, selectedRow[textField]];
      this.modalVisible = false;

      let rows = this.$refs.popup.getConfirmData();
      this.params.$table.$emit("popupSelected", { rows, name: column.params.name, params: this.params });
    }
  }
}
</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>