<template>
  <vxe-pulldown
    :disabled="disabled"
    ref="pulldownTable"
    transfer
    class="vxe-pulldown-magnnifier"
    style="width: 100%"
  >
    <template v-slot>
      <el-input
        :value="value"
        :clearable="true"
        suffix-icon="el-icon-search"
        :disabled="disabled"
        :destroy-on-close="true"
        :placeholder="placeholder"
        @clear="clear"
        v-bind="$attrs"
        @input="updateVal($event)"
        @focus="focus"
        @suffix-click="suffixClick"
      ></el-input>
    </template>
    <template v-slot:dropdown>
      <div :style="styles">
        <cms-query-table
          ref="magnifierTable"
          :custom-refresh-table="true"
          :columns="columns"
          :showLoading="showLoading"
          @cell-click="cellClick"
          :style="tableStyle"
          :height="height"
          @cell-dblclick="cellDbClick"
          :pagination="pagination"
          @checkbox-all="onCheckTable"
          @checkbox-change="onCheckTable"
          :form-item-config="formItems"
          :show-search-form="showSearchForm"
          :search-method="searchClick"
          :query-params="queryParams"
          :request-call="requestCall"
        >
          <template v-for="item in formItems" :slot="item.prop">
            <slot :name="item.prop"></slot>
          </template>
          <slot name="columns" />
        </cms-query-table>
      </div>
    </template>
  </vxe-pulldown>
</template>

<script>
export default {
  name: "CmsPullDownMagnifier",
  props: {
    /** 默认显示文本 */
    placeholder: {
      type: String,
      default: undefined,
    },
    showLoading: Boolean,
    height: {
      type: [String, Number],
      default: "400px",
    },
    /** 查询参数 */
    queryParams: {
      type: Object,
      default: () => {
        return {};
      },
    },
    /** 表格高度 */
    tableHeight: {
      type: [Number, String, Boolean],
      default: () => {
        return false;
      },
    },
    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: "",
    },
  },
  methods: {
    cellDbClick({ row }) {
      if (this.callback) {
        this.callback(row);
      }
      if (this.matchKey) {
        const matchKey = this.matchKey;
        for (const key in matchKey) {
          this.formModel[key] = row[matchKey[key]];
        }
      }
      this.$emit("cell-dblclick", row);
      this.hiddenPanel();
    },
    /** 获取的焦点事件 */
    keyup() {
      this.focus();
    },
    focus() {
      this.$refs.pulldownTable.showPanel().then(() => {
        this.$refs["magnifierTable"].reload();
        $(".vxe-pulldown--panel").css({
          "z-index": "4004",
        });
      });
    },
    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);
    },
  },
};
</script>

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