<template>
  <cms-modal
    v-if="visible"
    ref="CmsModalRef"
    @onCancel="handleCancel"
    @close="closeModal"
    @hide="closeModal"
    @open="openModal"
    @zoom="zoomModal"
    :show-footer="showFooter"
    :value="visible"
    :modal-title="modalTitle"
    :modal-height="modalHeight"
    :modal-width="modalWidth"
    :modal-callback="modalCallback"
    :modal-config="modalConfig"
    :resize="resize"
    :destroy-on-close="destroyOnClose"
  >
    <cms-query-table
      ref="magnifierTable"
      size="medium"
      @cell-dblclick="cellDbClick"
      @checkbox-change="onCheckTable"
      @checkbox-all="onCheckAll"
      :custom-refresh-table="true"
      :columns="columns"
      :pagination="pagination"
      :height="inputHeight"
      :fixed-height="true"
      :constant-load="constantLoad"
      :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>
    <template slot="footer">
      <cms-button key="submit" type="primary" @click="handleOk"> 确定</cms-button>
      <cms-button key="back" @click="handleCancel"> 返回</cms-button>
    </template>

  </cms-modal>
</template>

<script>
import { CmsModalMix } from './CmsModalMix'

export default {
  name: "CmsModalTable",
  mixins: [ CmsModalMix ],
  data() {
    return {
      inputHeight: 495,
    }
  },
  methods: {
    // 刷新表格
    reload() {
      this.$refs["magnifierTable"].reload();
    },
    handleOk() {
      const table = this.$refs["magnifierTable"];
      const checkboxRecords = table.getTable().getCheckboxRecords();
      if (checkboxRecords.length > 0) {
        checkboxRecords.forEach((row) => {
          this.setValue(row)
        });
      }
    },
    handleCancel() {
      this.visible = false;
    },
    closeModal() {
      this.visible = false
      if (this.modalCallback) {
        this.modalCallback(false)
      }
      this.$emit('onCancel', false);
    },
    zoomModal({ $modal, $event, type }) {
      const modalRef = $modal.$el.querySelector('.vxe-modal--box')
      this.inputHeight = modalRef.clientHeight - 103;
      this.$emit('zoom', { $modal, $event, type })
    },
    openModal() {
      this.$emit('open');
    },
    /* 表格相关 */
    onCheckTable({ records }) {
      this.$emit("check", records);
    },
    onCheckAll({ records }) {
      this.$emit("checkAll", records);
    },
    searchClick() {
      this.$emit("searchMethod");
    },
    cellDbClick({ row }) {
      this.setValue(row)
      this.$emit("cell-dblclick", row);
    },
    setValue(row) {
      if (!this.closeBeforeConfirm) {
        return false;
      }
      if (typeof this.closeBeforeConfirm === 'function') {
        if (!this.closeBeforeConfirm(row)) {
          return false;
        }
      }
      if (this.matchKey) {
        const matchKey = this.matchKey;
        for (const key in matchKey) {
          if (Array.isArray(this.formModel[key])) {
            if (this.formModel[key] && !this.formModel[key].includes(row[matchKey[key]])) {
              this.formModel[key].push(row[matchKey[key]]);
            }
          } else {
            this.formModel[key] = row[matchKey[key]];
          }
        }
      }
      this.magnifierVisible = false;
      if (this.callback) {
        this.callback(row);
      }
    }
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val); // 通过事件实现组件属性到父组件的传递
      },
    },
  },
  props: {
    matchKey: {
      type: [ Object ],
      default: () => {
        return undefined;
      },
    },
    formModel: {
      required: true,
      type: [ Object ],
      default: () => {
        return {};
      },
    },
    constantLoad: Function,
    /** 查询参数 */
    queryParams: {
      type: Object,
      default: () => {
        return {};
      },
    },
    pagination: {
      type: [ Boolean ],
      default: () => {
        return true;
      },
    },
    showSearchForm: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    multiple: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    closeBeforeConfirm: {
      type: [ Function, Boolean ],
      default: () => {
        return true
      }
    },
    formItems: {
      type: Array,
      default: () => {
        return [];
      },
    },
    callback: Function,
    /** 参数回调地址 */
    requestCall: {
      type: [ Function, Array, String, Object ],
      default: () => {
        return {
          data: [],
          total: 0,
        };
      },
    },
    /** 表格元素 */
    columns: {
      type: Array,
      default: () => {
        return [];
      },
    },
  }
}
</script>

<style scoped>

</style>