<template>
  <base-remote-select
    prop="id"
    show-prop="no"
    :list-api="listAccount"
    :load-api="listAccountByIds"
    :value="value"
    :query="query"
    :multiple="multiple"
    :init-options="initOptions"
    :before-get-options="beforeGetOptions"
    v-on="$listeners"
  >
    <template #option="scope">
      <el-option
        v-for="item in scope.options"
        :key="item.id"
        :value="item.id"
        :label="label(item)"
      />
    </template>
  </base-remote-select>
</template>

<script>
import { listAccount, listAccountByIds } from '@/api/bst/account';
import { $remoteSelect } from '@/components/BaseRemoteSelect/mixins';
import BaseRemoteSelect from '@/components/BaseRemoteSelect';
import { AccountType } from '@/utils/enums';
import { dictLabel } from '@/utils';

export default {
  name: 'AccountRemoteSelect',
  dicts: ['account_type'],
  mixins: [$remoteSelect],
  components: {
    BaseRemoteSelect
  },
  data() {
    return {
      AccountType,
    }
  },
  methods: {
    listAccount,
    listAccountByIds,
  },
  computed: {
    label() {
      return (item) => {
        if (AccountType.QR == item.type) {
          return `收款二维码`;
        }
        if (AccountType.BANK == item.type) {
          return `银行卡 ${item.bankName ? item.bankName : ''} (${item.no})`;
        } else {
          return dictLabel(this.dict.type.account_type, item.type) + ` (${item.no})`;
        }
      }
    }
  }
}
</script>