<template>
  <cms-form-magnifier
    ref="userMagnifierRef"
    width="50%"
    @searchMethod="search"
    v-on="listeners"
    v-bind="$attrs"
    @zoom="zoomModal"
    :destroy-on-close="true"
    :columns="columns"
    :query-params="queryForm"
    :disabled="disabled"
    :modal-title="magnifierTitle || $t('common-user.title')"
    :transfer="true" styles="width: 100%"
    :value="inputValue"
    :form-model="formModel"
    :multiple="multiple"
    :match-key="matchKey"
    :form-items="formItemConfigs"
    :modal-width="modalWidth"
    :modal-height="modalHeight"
    :immediate-load="true"
    :placeholder="placeholder"
    :height="height"
    :show-footer="showFooter"
    :request-call="requestCall">
    <template slot="realName">
      <cms-form-input v-model="queryForm.realName" :placeholder="$t('common-user.user.prompt.realName')"/>
    </template>
    <template slot="account">
      <cms-form-input v-model="queryForm.account" :placeholder="$t('common-user.user.prompt.account')"/>
    </template>
    <template slot="userCode">
      <cms-form-input v-model="queryForm.email" :placeholder="$t('common-user.user.prompt.userCode')"/>
    </template>
  </cms-form-magnifier>
</template>

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

export default {
  name: "CmsUserMagnifier",
  mixins: [ dictionaryMix, pageInitMix, formConfigMix, mixTableConfig, mixTableConstants ],
  data() {
    let { ...listeners } = this.$listeners;
    return {
      listeners: listeners,
      queryForm: {
        realName: undefined,
        account: undefined,
        email: undefined,
      },
    }
  },
  created() {
    console.log('--------------this.multiple： ', this.multiple)
  },
  methods: {
    search: function () {
      this.$refs['userMagnifierRef'].reload();
    },
    zoomModal({$modal, $event, type}) {
    },
  },
  props: {
    placeholder: String,
    showFooter: { // modal默认是否显示
      type: Boolean,
      default: () => {
        return true
      }
    },
    dictionaryConfig: {
      type: Array,
      default: () => {
        return []
      }
    },
    magnifierTitle: {
      type: String,
      default: undefined
    },
    value: {
      type: [ Array, String, Number, Boolean ],
      default: () => {
        return "";
      },
    },
    matchKey: Object,
    multiple: {
      type: Boolean,
      default: false,
    },
    formModel: {
      type: Object,
      default: () => {
        return {}
      }
    },
    disabled: Boolean,
    /** 查询参数 */
    queryParams: {
      type: Object,
      default: () => {
        return {};
      },
    },
    modalWidth: { // modal 宽度
      type: [ String, Number ],
      default: () => {
        return '50%'
      }
    },
    modalHeight: { // modal 高度
      type: [ String, Number ],
      default: '50%'
    },
  },
  computed: {
    formItemConfigs() {
      return [
        {
          prop: 'userCode',
          label: this.$t('common-user.user.column.userCode'),
        },
        {
          prop: 'realName',
          label: this.$t('common-user.user.column.realName'),
        },
        {
          prop: 'account',
          label: this.$t('common-user.user.column.account'),
        },
      ]
    },
    inputValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit("input", val);
      }
    },
    columns() {
      return [
        {
          type: this.multiple ? 'checkbox' : 'radio',
          width: 50,
          align: 'center',
          fixed: 'left',
          visible: !this.multiple,
        },
        {
          ...mixTableConfig.seq,
          visible: !this.multiple,
        },
        {
          ...mixTableConfig.default,
          title: this.$t('common-user.user.column.userCode'),
          field: 'userCode',
          width: 200,
        },
        {
          ...mixTableConfig.default,
          title: this.$t('common-user.user.column.realName'),
          field: 'realName',
          minWidth: 160,
        }, {
          ...mixTableConfig.default,
          title: this.$t('common-user.user.column.account'),
          field: 'account',
          width: 160,
        }, {
          ...mixTableConfig.default,
          title: this.$t('common-user.user.column.email'),
          field: 'email',
          width: 160
        },
      ]
    }
  },

}
</script>

<style scoped>

</style>
