<template>
  <vxe-pulldown
    class="vxe-pulldown-magnnifier"
    style="width: 100%"
    ref="pullDownTable"
    :transfer="true"
    :disabled="disabled"
    :destroy-on-close="false"
  >
    <template v-slot>
      <el-input
        @clear="clear"
        @focus="focus"
        @input="inputSearch"
        @suffix-click="suffixClick"
        suffix-icon="el-icon-search"
        v-bind="$attrs"
        v-model="inputValue"
        ref="inputSearchRef"
        :clearable="true"
        :disabled="disabled"
        :destroy-on-close="true"
        :placeholder="placeholder"
      />
    </template>
    <template v-slot:dropdown>
      <cms-query-table
        ref="magnifierTable"
        @cell-dblclick="cellDbClick"
        @checkbox-all="onCheckTable"
        @checkbox-change="onCheckTable"
        :custom-refresh-table="true"
        :style="`${panelWidth}px;` + tableStyle"
        :columns="columns"
        :partial-loading="true"
        :fixed-height="true"
        :height="height || '300px'"
        :pagination="pagination"
        :form-item-config="formItems"
        :show-search-form="showSearchForm"
        :search-method="searchClick"
        :query-params="{
            ...queryParams,
          }"
        :constant-load="constantLoad"
        :request-call="requestCall"
        :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes']"
      >
        <template v-for="item in formItems" :slot="item.prop">
          <slot :name="item.prop"></slot>
        </template>
      </cms-query-table>
    </template>
  </vxe-pulldown>
</template>

<script>
import $ from 'jquery'

export default {
  name: "CmsPullDownMagnifier",
  props: {
    /** 默认显示文本 */
    placeholder: {
      type: String,
      default: undefined,
    },
    height: {
      type: [ String, Number ],
      default: "400px",
    },
    /** 查询参数 */
    queryParams: {
      type: Object,
      default: () => {
        return {};
      },
    },
    constantLoad: Function,
    callback: Function,
    value: {
      type: [ Number, String, Boolean ],
      default: () => {
        return undefined;
      },
    },
    emptyText: {
      type: String,
      default: () => {
        return "";
      },
    },
    /**
     * 分页
     */
    pagination: {
      type: [ Boolean ],
      default: () => {
        return true;
      },
    },
    styles: {
      type: String,
      default: () => {
        return "";
      },
    },
    disabled: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    showSearchForm: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    formItems: {
      type: Array,
      default: () => {
        return [];
      },
    },
    props: {
      required: true,
      type: Object,
      default: () => {
        return {
          label: "name",
          value: "value",
        };
      },
    },
    matchKey: {
      type: Object,
      default: () => {
        return {};
      },
    },
    formModel: {
      type: Object,
      required: true,
      default: () => {
        return {};
      },
    },
    /** 参数回调地址 */
    requestCall: {
      type: [ Function, Array, String ],
      default: () => {
        return {
          data: [],
          total: 0,
        };
      },
    },
    /** 表格元素 */
    columns: {
      type: Array,
      default: () => {
        return [];
      },
    },
    tableStyle: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      panelWidth: 200
    }
  },
  methods: {
    cellDbClick({ row }) {
      if (!row) row = data;
      this.$emit("cell-click", row);
      if (this.callback) {
        this.callback(row);
      }
      const matchKey = this.matchKey;
      this.updateVal(row[this.props["label"]]);
      for (const key in matchKey) {
        this.formModel[key] = row[matchKey[key]];
      }
      this.hiddenPanel();
    },
    /** 获取的焦点事件 */
    keyup() {
      this.focus();
    },
    focus($event) {
      this.panelWidth = this.$refs.inputSearchRef.$el.clientWidth;
      this.$refs.pullDownTable.showPanel().then(() => {
        this.$refs["magnifierTable"].reload();
        $(".vxe-pulldown--panel").css({
          "z-index": "4004",
          width: '600px',
        });
      });
    },
    inputSearch() {
      this.$refs.magnifierTable.reload();
    },
    suffixClick() {
    },
    hiddenPanel() {
      this.$refs.pullDownTable.hidePanel();
    },
    cellClick(data) {
      let { row } = data;
      if (!row) row = data;
      this.$emit("cell-click", row);
      if (this.callback) {
        this.callback(row);
      }
      const matchKey = this.matchKey;
      this.updateVal(row[this.props["label"]]);
      for (const key in matchKey) {
        this.formModel[key] = row[matchKey[key]];
      }
    },
    onCheckTable({ records }) {
      this.$emit("on-check", records);
    },
    searchClick() {
      this.$emit("searchMethod");
    },
    clear() {
      const matchKey = this.matchKey;
      for (const key in matchKey) {
        if (typeof this.formModel["key"] == "string") {
          this.formModel[key] = undefined;
        } else if (typeof this.formModel["key"] == "boolean") {
          this.formModel[key] = false;
        } else if (typeof this.formModel["key"] == "object") {
          this.formModel[key] = {};
        }
      }
      this.$emit("clear");
    },
    updateVal(val) {
      this.$emit("input", val);
    },
  },
  computed: {
    inputValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  }
};
</script>

<style scoped lang="less">
.vxe-pulldown-magnnifier {
}
</style>
