<template>
  <cms-form-magnifier
    v-model="inputValue"
    ref="orgInfoTable"
    v-on="listeners"
    @searchMethod="search"
    :destroy-on-close="true"
    :columns="columnConfig"
    :query-params="queryForm"
    :magnifier-title="magnifierTitle"
    :transfer="true" styles="width: 100%"
    :form-model="formModel"
    :multiple="multiple"
    :match-key="matchKey"
    :form-items="formItems"
    :modal-height="600"
    :placeholder="placeholder"
    :request-call="dataSource">
    <template slot="orgCode">
      <cms-form-input v-model="queryForm.orgCode"/>
    </template>
    <template slot="orgName">
      <cms-form-input v-model="queryForm.orgName"/>
    </template>
  </cms-form-magnifier>
</template>

<script>
import {
  dictionaryMix,
  pageInitMix,
  formConfigMix,
  mixTableConfig, mixTableConstants
} from "@/comps/mixin/common-mixins";

export default {
  name: "CmsOrgInfoMagnifier",
  mixins: [ dictionaryMix, pageInitMix, formConfigMix, mixTableConfig, mixTableConstants ],
  data() {
    let { ...listeners } = this.$listeners;
    return {
      listeners: listeners,
      queryForm: {
        orgCode: undefined,
        orgName: undefined,
      },
    }
  },
  methods: {
    search: function () {
      this.$refs['orgInfoTable'].reload();
    }
  },
  props: {
    dataSource: Function,
    placeholder: String,
    magnifierTitle: String,
    value: [ Number, String, Boolean ],
    matchKey: Object,
    multiple: {
      type: Boolean,
      default: false,
    },
    formModel: {
      type: Object,
      default: () => {
        return {}
      }
    },
    /** 查询参数 */
    queryParams: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    formItems() {
      return [ {
        prop: "orgCode",
        label: '单位编号',
      }, {
        prop: 'orgName',
        label: '单位名称',
      } ]
    },
    inputValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit("input", val);
      }
    },
    columnConfig() {
      return [
        {
          ...mixTableConfig.checkbox,
          visible: this.multiple
        },
        {
          ...mixTableConfig.seq,
          visible: !this.multiple
        },
        {
          ...mixTableConfig.default,
          title: this.$t("orgInfo.column.orgCode"),
          field: "orgCode",
          minWidth: 230,
        },
        {
          ...mixTableConfig.default,
          title: this.$t("orgInfo.column.orgName"),
          field: "orgName",
          minWidth: 200,
        },
        {
          ...mixTableConfig.default,
          title: this.$t("orgInfo.column.orgType"),
          field: "orgType",
          width: 120,
        },
        {
          ...mixTableConfig.default,
          title: this.$t("orgInfo.column.orgZhAbbreviation"),
          field: "orgZhAbbreviation",
          minWidth: 120,
        },
        {
          ...mixTableConfig.default,
          title: this.$t("orgInfo.column.orgEnAbbreviation"),
          field: "orgEnAbbreviation",
          minWidth: 120,
        },
      ]
    }
  }
}
</script>

<style scoped lang="less">
/deep/.vxe-modal--content {
  padding: 0 !important;
}
</style>
