<template>
  <j-nav-bar :placeholder="false" color="#FFF" nav-bar-background="#f9bf3a"/>

  <van-form @submit="saveUserInfoBtn">

    <div class="content">
      <j-gap background="#F9BF3A" height="120" opacity="0"/>
      <div class="action">
        <view class="tt">填写真实有效的信息，审核才会通过哦~</view>
        <van-field
          v-model="userInfo.bankType"
          :rules="[{ required: true, message: '请选择开户银行' }]"
          label="开户银行"
          placeholder="请输入开户银行"
          :disabled="!useEdit"
          required
        />
<!--        <van-popup v-model:show="showPicker" position="bottom" round>
          <van-picker
            :columns="columns"
            @cancel="showPicker = false"
            @confirm="onConfirm"
          />
        </van-popup>-->
        <van-field :disabled="!useEdit" @paste="pasteField" @copy="copyField" v-model="userInfo.backCardNum" :rules="[{ required: true, message: '请输入银行卡号' }]" label="银行卡号" placeholder="请输入银行卡号" required
                   type="digit"/>

      </div>

    </div>

    <div style="padding: 0 20px 60px">
      <van-button
        color="linear-gradient(to right, #D2A64C, #F9D88D)"
        native-type="submit"
        round
        style="width: 100%; "
        v-if="useEdit"
      >
        提交
      </van-button>
    </div>
  </van-form>

</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import {getBankType, getBorrowPage, getUserInfo, updateCustomerCard, uploadCommon} from "@/api";
import {resetData} from "@/utils/dataUtil";
import {showToast} from "vant";
import {useRouter} from "vue-router";


const userInfo = reactive({
  backCardNum: '',
  bankType: '',
  cardBackPicture: '',
  cardFrontPicture: '',
  cardNum: '',
  companyAddress: '',
  companyAddressInfo: '',
  companyName: '',
  companyPhone: '',
  companyTitle: '',
  companyYear: '',
  customerAddress: '',
  customerAddressInfo: '',
  customerId: 0,
  id: 0,
  kinsfolkName: '',
  kinsfolkPhone: '',
  kinsfolkRef: '',
  realName: ''
})

const borrowPage = {
  pageNum: 0,
  pageSize: 3,
}
const useEdit = ref(true)
const _getBorrowPage = () => {
  getBorrowPage(borrowPage).then(res => {
    useEdit.value = res.length === 0;
  })
}


const _getUserInfo = () => {
  getUserInfo().then(res => {
    resetData(userInfo, res)
  })
}

const bankTypeList = reactive([])
const columns: any[] = reactive([])
const _getBankType = () => {
  getBankType().then(res => {
    bankTypeList.newPush(res)
    bankTypeList.forEach(btl => {
      columns.push({
        value: btl,
        text: btl
      })
    })
  })
}
const showPicker = ref(false);
const onConfirm = ({selectedOptions}) => {
  showPicker.value = false;
  userInfo.bankType = selectedOptions[0].value;
};

const pasteField = (e) => {
  e.preventDefault()
}
const copyField = (e) => {
  e.preventDefault()
}

const router = useRouter()
const saveUserInfoBtn = () => {
  updateCustomerCard(userInfo).then(res => {
    console.log('')
    router.back()
  })
}


onMounted(() => {
  _getUserInfo()
  // _getBankType()
  _getBorrowPage()
})

</script>

<style lang="scss" scoped>
.content {
  background-image: linear-gradient(to bottom, #f9bf3a, #ffffff) !important;
  padding-bottom: 30px;


  .action {
    margin: 20px;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-flow: column;
    box-shadow: 0 0 1vw 0px #e0e0e0;

    &-content {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      padding: 20px 20px;
      box-shadow: 0 0 1vw 0px #e0e0e0;

      &-item {
        margin: 20px 0;
      }

      .id-card-box {
        border-radius: 10px;
        box-shadow: 0 0 1vw 0px #e0e0e0;
        width: 500px;
        height: 300px;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
      }
    }

    .tt {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      background: #f6f9fd;
      color: #738aa4;
      padding: 20px 0;
    }

    //
  }

}

.font-22 {
  font-size: 22px;
}

</style>
