<template>
  <cms-form-magnifier
    :destroy-on-close="true"
    ref="accountApplyTable"
    :columns="columnConfig"
    :query-params="queryForm"
    :disabled="disabled"
    :modal-title="magnifierTitle"
    :transfer="true"
    :modal-height="600"
    :constant-load="constantLoadCall"
    v-model="inputValue"
    :form-model="formModel"
    :multiple="multiple"
    :match-key="matchKey"
    :form-items="formItems"
    v-on="listeners"
    :close-before-confirm="closeBeforeConfirm"
    @searchMethod="search"
    :placeholder="placeholder"
    :request-call="dataSource"
  >
    <template slot="acctCode">
      <cms-form-input
        v-model="queryForm.acctCode"
        :placeholder="$t('accountApply.prompt.acctCode')"
      />
    </template>
    <template slot="acctName">
      <cms-form-input
        v-model="queryForm.acctName"
        :placeholder="$t('accountApply.prompt.acctName')"
      />
    </template>
    <template slot="acctType">
      <cms-form-input
        v-model="queryForm.acctType"
        :placeholder="$t('accountApply.prompt.acctType')"
      />
    </template>
  </cms-form-magnifier>
</template>

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

export default {
  name: "CmsAccountMagnifier",
  mixins: [ dictionaryMix, pageInitMix, formConfigMix, mixTableConfig, mixTableConstants ],
  data() {
    let { ...listeners } = this.$listeners;
    return {
      listeners: listeners,
      queryForm: {
        acctCode: undefined,
        acctName: undefined,
        acctType: undefined,
      },
      dictionaryConfig: [
        {
          type: "constants",
          keys: [ "PayAcctType", "PayAcctType.selectList" ],
        },
      ],
      constants: {
        PayAcctType: {},
        "PayAcctType.selectList": [],
      },
    };
  },
  async created() {

  },
  methods: {
    search: function () {
      this.$refs["accountApplyTable"].reload();
    },
    constantLoadCall() {
      return new Promise((resolve, reject) => {
        if (this.constantsUrl) {
          this.mixGetDictionaries(this.constantsUrl, this.dictionaryConfig).then((res) => {
            this.constants = res;
            resolve(res);
          }).catch(err => reject(err));
        } else {
          reject('请配置常量地址')
        }
      })
    }
  },
  props: {
    dataSource: Function,
    constantsUrl: Function,
    placeholder: String,
    magnifierTitle: String,
    value: [ Number, String, Boolean ],
    matchKey: Object,
    multiple: {
      type: Boolean,
      default: false,
    },
    formModel: {
      type: Object,
      default: () => {
        return {};
      },
    },
    disabled: Boolean,
    /** 查询参数 */
    queryParams: {
      type: Object,
      default: () => {
        return {};
      },
    },
    closeBeforeConfirm: {
      type: [ Function, Boolean ],
      default: () => {
        return true
      }
    },
  },
  computed: {
    formItems() {
      return [
        {
          prop: "acctCode",
          label: this.$t("accountApply.column.acctCode"),
        },
        {
          prop: "acctName",
          label: this.$t("accountApply.column.acctName"),
        },
        {
          prop: "acctType",
          label: this.$t("accountApply.column.acctType"),
        },
      ];
    },
    inputValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
    columnConfig() {
      return [
        {
          ...mixTableConfig.seq,
        },
        {
          ...mixTableConfig.default,
          title: this.$t("accountApply.column.acctCode"),
          field: "acctCode",
        },
        {
          ...mixTableConfig.default,
          title: this.$t("accountApply.column.acctName"),
          field: "acctName",
        },
        {
          ...mixTableConfig.default,
          title: this.$t("accountApply.column.acctType"),
          field: "acctType",
          width: 100,
          align: "center",
          cellRender: {
            name: "cell-format",
            parameter: this.constants["PayAcctType.selectList"],
            styles: {
              primary: this.constants["PayAcctType"]["BANK"],
              warning: this.constants["PayAcctType"]["ALIPAY"],
              info: this.constants["PayAcctType"]["WX"],
            },
            props: { name: "label", value: "value" },
          },
        },
        {
          ...mixTableConfig.default,
          title: this.$t("accountApply.column.branchName"),
          field: "branchName",
          minWidth: 300,
        },
        {
          ...mixTableConfig.initBalance,
          title: this.$t("accountApply.column.initBalance"),
          field: "balance",
          width: 200,
          cellRender: {
            name: "amount",
          },
        },
      ];
    },
  },
};
</script>

<style scoped></style>
