<script setup lang="ts">
import { Ref, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { BankInfoType } from '@/api/bankAccount/indexType'
import { addBankApi } from '@/api/bankAccount'
import { showSuccessToast } from 'vant'
const form: Ref<BankInfoType> = ref({
  shiming_name: '',
  bank_card: '',
  bank_address: '',
  bank_name: '',
  bank_code: ''
})
const formList = [
  {
    label: 'account.zhanghaoming',
    dataName: 'shiming_name',
    msgName: 'checkMsg.shuruxinming'
  },
  {
    label: 'account.zhanghao',
    dataName: 'bank_card',
    msgName: 'checkMsg.shuruzhanghao'
  },
  {
    label: 'account.yinghangming',
    dataName: 'bank_name',
    msgName: 'checkMsg.shuruyinhangming'
  },
  {
    label: 'account.fenhangmingceng',
    dataName: 'bank_address',
    msgName: 'checkMsg.shurufenhangming'
  },
  {
    label: 'account.fenhangbianhap',
    dataName: 'bank_code',
    msgName: 'checkMsg.shurufenhanghaomao'
  }
]
const { t } = useI18n()

// 提交表单
const submitFn = async () => {
  const res = await addBankApi(form.value)
  if (res.code === 1) {
    showSuccessToast(res.data.msg)
    uni.redirectTo({
      url: '/subPackages/bankAccount/bankAccount'
    })
  }
}
</script>

<template>
  <Navigater :title="t('account.cunquzhanghaodengji')"></Navigater>

  <view class="Box">
    <!-- <view class="box-top"> {{ t('account.chatu') }} </view> -->
    <view class="box-form-card">
      <view v-for="(item, i) in formList" :key="i" class="box-form-item">
        <view class="box-form-item-label"> &nbsp;&nbsp;{{ t(item.label) }}</view>
        <van-field v-model="form[item.dataName]" :placeholder="t(item.msgName)" />
      </view>
      <div class="btn" type="primary" @click="submitFn">{{ t('account.cunquzhanghaodengjibtn') }}</div>
    </view>
  </view>
</template>

<style lang="scss" scoped>
::v-deep .van-field__control {
  height: 2rem;
  border: none;
  font-weight: 400;
  font-size: 0.9375rem;
  color: #fff;
}
::v-deep .van-field {
  width: 20rem;
  height: 3.375rem;
  background: rgb(10, 30, 54, 0.5);
  border-radius: 0.625rem;
}
::v-deep .van-field__body {
  width: 20rem;
  height: 3.375rem;
  background: rgb(10, 30, 54, 0.5);
  color: #fff;
  border-radius: 0.9688rem;
  padding: 1.0938rem 0.9375rem 0.9688rem 1.25rem;
  .van-field__right-icon {
    padding: 0;
    margin-right: 0.625rem;
    .van-icon__image {
      width: 1.2813rem;
      height: 1.375rem;
    }
  }
}

::v-deep .van-button {
  margin-top: 2.6875rem;
  width: 20.9375rem;
  height: 2.75rem;
  border-radius: 1.5625rem;
  background: #ee2560;
}

::v-deep .van-button__text {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
}

::v-deep .van-field {
  padding: 0;
}
::v-deep uni-page {
  // background: #fff;
}

::v-deep uni-page {
  // background: #ffffff;
}

.Box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  // padding-top: 1.75rem;

  .box-form-card {
    width: 23.4375rem;
    height: 31.9688rem;
    // margin-top: 2.375rem;
    // background: #fdfefe;
    // border-radius: 2.0938rem 2.0938rem 0 0;
    // padding: 3.6563rem 0 0 2.25rem;
    display: flex;
    // justify-content: center;
    flex-direction: column;
    align-items: center;
    .title {
      font-weight: 500;
      font-size: 1.1563rem;
      color: #040404;
      line-height: 1.1563rem;
      margin-bottom: 1.875rem;
    }

    .btn {
      margin-top: 2.6875rem;
      width: 20.9375rem;
      height: 2.75rem;
      border-radius: 1.5625rem;
      background: #6a69e9;
      text-align: center;
      line-height: 2.75rem;
      color: #fff;
    }

    .box-form-item {
      display: flex;
      flex-direction: column;
      margin-top: 0.9375rem;
      position: relative;

      .box-form-item-label {
        height: 2.75rem;
        display: flex;
        align-items: center;
        // margin-bottom: 0.5938rem;
        font-weight: 500;
        font-size: 0.875rem;
        line-height: 0.75rem;
        color: #fff;
      }
    }
  }

  .box-top {
    width: 11.4688rem;
    height: 11.4688rem;
    background: #ffffff;
    border-radius: 50%;

    font-weight: 300;
    font-size: 2.75rem;
    color: #cbcccd;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
