<template>
  <cms-form-magnifier
    ref="financeBranchTable"
    v-model="inputValue"
    @searchMethod="search"
    :destroy-on-close="true"
    :columns="columnConfig"
    :query-params="queryForm"
    :disabled="disabled"
    :modal-title="magnifierTitle"
    :transfer="true" styles="width: 100%"
    :form-model="formModel"
    :multiple="multiple"
    :match-key="matchKey"
    :form-items="formItems"
    :modal-height="modalHeight"
    :modal-width="modalWidth"
    v-on="listeners"
    :placeholder="placeholder"
    :request-call="dataSource">
    <template slot="bankName">
      <cms-form-input v-model="queryForm.bankName" :placeholder="this.$t('financeBranch.prompt.bankName')"/>
    </template>
    <template slot="directCode">
      <cms-form-input v-model="queryForm.directCode" :placeholder="this.$t('financeBranch.prompt.directCode')"/>
    </template>
    <template slot="branchCode">
      <cms-form-input v-model="queryForm.branchCode" :placeholder="this.$t('financeBranch.prompt.branchCode')"/>
    </template>
  </cms-form-magnifier>
</template>

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

  export default {
    name: "CmsBranchMagnifier",
    mixins: [ dictionaryMix, pageInitMix, formConfigMix, mixTableConfig, mixTableConstants ],
    data() {
      let { ...listeners } = this.$listeners;
      return {
        listeners: listeners,
        queryForm: {
          bankName: undefined,
          directCode: undefined,
          branchCode: undefined,
        },
        dictionaryConfig: [ {
          type: 'custom',
          keys:
            [ 'cfsAreaService.selectCountyList' ]
        } ],
      }
    },
    created() {

    },
    methods: {
      search: function () {
        this.$refs['financeBranchTable'].reload();
      }
    },
    props: {
      modalWidth: { // modal 宽度
        type: [ String, Number ],
        default: () => {
          return '50%'
        }
      },
      modalHeight: { // modal 高度
        type: [ String, Number ],
        default: '50%'
      },
      dataSource: Function,
      placeholder: String,
      magnifierTitle: {
        type: String,
        default: '支行信息'
      },
      value: [ Number, String, Boolean ],
      matchKey: Object,
      multiple: {
        type: Boolean,
        default: false,
      },
      formModel: {
        type: Object,
        default: () => {
          return {}
        }
      },
      disabled: Boolean,
      /** 查询参数 */
      queryParams: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    computed: {
      formItems() {
        return [
          {
            prop: 'bankName',
            label: this.$t('financeBranch.column.bankName'),
          },
          {
            prop: 'directCode',
            label: this.$t('financeBranch.column.directCode'),
          },
          {
            prop: 'branchCode',
            label: this.$t('financeBranch.column.branchCode'),
          },
        ]
      },
      inputValue: {
        get() {
          return this.value
        },
        set(val) {
          this.$emit("input", val);
        }
      },
      columnConfig() {
        return [
          {
            ...mixTableConfig.seq,
          },
          {
            ...mixTableConfig.default,
            title: this.$t('financeBranch.column.bankName'),
            field: 'bankName',
            minWidth: 300,
          },
          {
            ...mixTableConfig.default,
            title: this.$t('financeBranch.column.directCode'),
            field: 'directCode',
          }, {
            ...mixTableConfig.default,
            title: this.$t('financeBranch.column.swiftCode'),
            field: 'swiftCode',
            width: 200
          }, {
            ...mixTableConfig.default,
            title: this.$t('financeBranch.column.cnapsCode'),
            field: 'cnapsCode',
            minWidth: 200
          },
        ]
      }
    }
  }
</script>

<style scoped>

</style>
