<template>
  <div class="form" v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <van-form ref="form">
      <!-- 收款银行地区 -->
      <van-field
        :border="false"
        v-model="form.bankAddress"
        :label="$t('fund.l')"
        :rules="[{ required: true, message: '' }]"
        autocomplete="off"
        input-align="right"
        :placeholder="$t('fund.l1')"
      />
      <!-- 收款银行名称 -->
      <van-field
        :border="false"
        v-model="form.bankName"
        :label="$t('fund.l2')"
        :rules="[{ required: true, message: '' }]"
        autocomplete="off"
        input-align="right"
        :placeholder="$t('fund.l1')"
      />
      <!-- 支行名称 -->
      <van-field
        :border="false"
        v-model="form.bankBranch"
        :label="$t('fund.l3')"
        autocomplete="off"
        input-align="right"
        :placeholder="$t('fund.l1')"
      />
      <!-- 收款人名称 -->
      <van-field
        :border="false"
        v-model="form.name"
        :rules="[{ required: true, message: '' }]"
        :label="$t('fund.l4')"
        autocomplete="off"
        input-align="right"
        :placeholder="$t('fund.l1')"
      />
      <!-- 收款银行账户 -->
      <van-field
        :border="false"
        v-model="form.account"
        :rules="[{ required: true, message: '' }]"
        :label="$t('fund.l5')"
        autocomplete="off"
        input-align="right"
        :placeholder="$t('fund.l1')"
      />
      <!-- 收款人货币 -->
      <van-field
        v-model="form.currency"
        :border="false"
        name="currency"
        @click="currencyPopup = true"
        :rules="[{ required: true, message: '' }]"
        :label="$t('fund.l7')"
        autocomplete="off"
        input-align="right"
      >
        <template #input>
          <div class="select-box flex">
            <div v-if="form.currency">{{ form.currency }}</div>
            <div v-else>
              <!-- 未选择 -->
              {{ $t('fund.l11') }}
            </div>
            <i class="el-icon-arrow-right"></i>
          </div>
        </template>
      </van-field>
    </van-form>
    <van-popup v-model="currencyPopup" round position="bottom">
      <currencyList pay="1" type="1" :currency="form.currency" @success="currencyBack" @cancel="currencyPopup = false"/>
    </van-popup>
  </div>
</template>
<script>
import { insertCollectionAccount } from "@/api/user";
import currencyList from "@/components/currencyList";
export default {
  components: {
    currencyList
  },
  data() {
    return {
      form: {
        bankAddress: "",
        bankName: "",
        bankBranch: "",
        name: "",
        account: "",
        currency: "",
      },
      currencyPopup: false
    };
  },
  methods: {
    validate() {
      this.$refs['form'].validate().then(res => {
        var data = {
          type: 1,
          currency: this.form.currency,
          value: JSON.stringify(this.form),
        }
        this.fullscreenLoading = true
        insertCollectionAccount(data).then(res => {
          this.$notify({
            // message: '添加成功',
            message: this.$t('fund.l6'),
            type: 'success'
          })
          this.$router.back()
        }).catch(() => {}).finally(() => {
          this.fullscreenLoading = false
        })
      }).catch((err) => {
      })
    },
    currencyBack(item) {
      this.form.currency = item.symbol
      this.currencyPopup = false
      this.$refs["form"].resetValidation('currency')
    }
  }
};
</script>
<style lang="less" scoped>
.van-field + .van-field {
  margin-bottom: 1px;
}
.select-box {
  column-gap: 3px;
  cursor: pointer;
  .el-icon-arrow-right {
    color: #c3c3c3;
    font-weight: 600;
  }
}
</style>