<template>
  <cms-modal
    v-if="defaultDialogConfig.dialogVisible"
    v-model="defaultDialogConfig.dialogVisible"
    ref="CmsModalRef"
    @onCancel="handleCancel"
    @close="closeModal"
    @hide="closeModal"
    @show="showModal"
    @zoom="zoomModal"
    :modal-width="defaultDialogConfig.modalWidth"
    :show-footer="defaultDialogConfig.showFooter"
    :modal-height="defaultDialogConfig.modalHeight"
    :modal-title="defaultDialogConfig.dialogTitle"
    :modal-config="defaultDialogConfig.modalConfig"
  >
    <cms-query-table
      ref="dialogTable" size="medium"
      @cell-dblclick="cellDbClick"
      @checkbox-change="onCheckTable"
      @checkbox-all="onCheckTable"
      :tools-bar="defaultTableConfig.toolsBar"
      :custom-refresh-table="true"
      :columns="defaultTableConfig.columns"
      :pagination="defaultTableConfig.pagination"
      :height="inputHeight"
      :margin-top="20"
      :fixed-height="true"
      :query-rules="defaultSearchFormConfig.searchFormRules"
      :constant-load="defaultDialogConfig.constantLoad"
      :form-item-config="defaultSearchFormConfig.formItemConfig"
      :show-search-form="defaultSearchFormConfig.showSearchForm"
      :search-method="search"
      :query-params="defaultSearchFormConfig.searchFormModel"
      :request-call="defaultTableConfig.requestCall"
    >
      <template v-for="item in defaultSearchFormConfig.formItemConfig" :slot="item.prop">
        <slot :name="item.prop"></slot>
      </template>
      <slot name="columns"/>
    </cms-query-table>
    <template slot="footer">
      <slot name="buttons">
        <cms-button key="submit" type="primary" @click="handleOk"> 确定</cms-button>
        <cms-button key="back" @click="handleCancel"> 返回</cms-button>
      </slot>
    </template>
  </cms-modal>
</template>

<script>
export default {
  name: "CmsDialogTable",
  data() {
    return {
      inputHeight: 495,
    }
  },
  methods: {
    handleOk() {
      const table = this.$refs["dialogTable"];
      const checkboxRecords = table.getTable().getCheckboxRecords();
      if (checkboxRecords.length > 0) {
        checkboxRecords.forEach((row) => {
          this.setValue(row)
        });
      }
      this.$emit('ok', checkboxRecords);
    },
    handleCancel() {
      this.closeModal();
    },
    closeModal() {
      if (this.defaultDialogConfig.modalCallback) {
        this.defaultDialogConfig.modalCallback()
      }
      this.$emit('onCancel', false);
    },
    zoomModal({ $modal, $event, type }) {
      const modalRef = $modal.$el.querySelector('.vxe-modal--box')
      this.inputHeight = modalRef.clientHeight - 40;
      this.$emit('zoom', { $modal, $event, type })
    },
    showModal($modal) {
      const modalRef = $modal.$el.querySelector('.vxe-modal--content')
      this.inputHeight = modalRef.clientHeight;
      this.$emit('show', $modal);
    },
    setTableData(data = []) {
      this.$refs.dialogTable.setTableData(data);
    },
    reload() {
      this.$refs["dialogTable"].reload();
    },
    onCheckTable({ records }) {
      this.$emit("check", records);
    },
    search() {
      this.$emit("search");
    },
    cellDbClick({ row }) {
      this.setValue(row)
      this.$emit("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) {
          this.formModel[key] = row[matchKey[key]];
        }
      }
      this.defaultDialogConfig.dialogVisible = false;
      if (this.callback) {
        this.callback(row);
      }
    }
  },

  computed: {
    defaultDialogConfig: {
      get() {
        return Object.assign({
          dialogVisible: this.dialogVisible,
          modalHeight: '50%',
          modalWidth: '50%',
          showFooter: true,
          dialogTitle: '弹窗标题',
          constantLoad: undefined,
          modalCallback: () => {
          },
          modalConfig: {},
        }, this.dialogConfig || {})
      },
      set(config) {
        this.$emit('update:dialogConfig', config)
      }
    },
    defaultTableConfig: {
      get() {
        return Object.assign({
          requestCall: () => {
          },
          toolsBar: false,
          columns: [],
          matchKey: {}, // 匹配
          pagination: true,
        }, this.tableConfig || {})
      },
      set(config) {
        this.$emit('update:tableConfig', config)
      }
    },
    defaultSearchFormConfig: {
      get() {
        return Object.assign({
          formItemConfig: [],
          showSearchForm: true,
          searchFormModel: {},
          searchFormRules: {}
        }, this.searchFormConfig || {})
      },
      set(config) {
        this.$emit('update:searchFormConfig', config)
      }
    }
  },
  props: {
    closeBeforeConfirm: {
      type: [ Function, Boolean ],
      default: () => {
        return true
      }
    },
    formModel: {
      type: Object,
      default: () => {
        return {}
      }
    },
    dialogConfig: {
      type: Object,
      default: () => {
        return {}
      }
    },
    callback: Function,
    constantLoad: Function,
    searchFormConfig: {
      type: Object,
      default: () => {
        return {}
      }
    },
    tableConfig: {
      type: Object,
      default: () => {
        return {}
      }
    },
    dialogVisible: Boolean
  }
}
</script>

<style scoped>

</style>