<template>
  <u-navbar title="添加银行卡" :autoBack="true" bgColor="#ffffff" placeholder safeAreaInsetTop :titleStyle="{ color: '#000' }"></u-navbar>
  <view class="step">
    <view class="main">
      <u-form labelPosition="left" :model="form" :rules="rules" ref="stepForm1">
        <view class="grayLine"></view>

        <u-form-item labelWidth="200rpx" label="姓名" prop="name" borderBottom ref="name">
          <u-input v-model="form.name" border="none" :disabled="formDisabled" disabledColor="#ffffff" placeholder="请输入姓名" inputAlign="right"></u-input>
        </u-form-item>
        <u-form-item labelWidth="200rpx" label="身份证号" prop="idNumber" borderBottom ref="idNumber">
          <u-input v-model="form.idNumber" border="none" :disabled="formDisabled" disabledColor="#ffffff" placeholder="请输入身份证号" inputAlign="right"></u-input>
        </u-form-item>
        <view class="grayLine"></view>
        <u-form-item labelWidth="200rpx" label="银行卡号" prop="bankNumber" borderBottom ref="bankNumber">
          <u-input v-model="form.bankNumber" border="none" :disabled="formDisabled" disabledColor="#ffffff" placeholder="请输入银行卡号" inputAlign="right"></u-input>
        </u-form-item>
        <u-form-item labelWidth="200rpx" label="卡类型" prop="bank" borderBottom ref="bank">
          <u-input v-model="form.bank" border="none" :disabled="formDisabled" disabledColor="#ffffff" placeholder="请输入卡类型" inputAlign="right"></u-input>
        </u-form-item>
        <u-form-item labelWidth="200rpx" label="银行预留号码" prop="phone" borderBottom ref="phone">
          <u-input v-model="form.phone" border="none" :disabled="formDisabled" disabledColor="#ffffff" placeholder="请输入银行预留号码" inputAlign="right"></u-input>
        </u-form-item>
        <view class="grayLine"></view>

        <u-form-item labelWidth="200rpx" label="设为默认" borderBottom>
          <view class="flexD" style="width: 100%">
            <u-switch v-model="form.isDefault" size="28" :activeValue="1" :inactiveValue="0" activeColor="#06b8d2"></u-switch>
          </view>
        </u-form-item>

        <view class="remark" style="padding: 0; margin: 38rpx 0">同意前请查看《服务协议》</view>
      </u-form>
      <up-button color="#05B8D2" shape="circle" text="同意协议并添加" throttleTime="1500" :customStyle="{ width: '100%', height: '94rpx', fontWeight: 700 }" @click="confirmAddBankCardHandler"></up-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance, ComponentPublicInstance, watch } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { useSelectDataStore } from '../../store/selectData'
import { useAuthStore } from '@/store/auth'
import { updateRegister, updateAdd_bank, get_veterinary } from '../../api'
import { BankCardItemType, AddBankCardInfoType } from '../../types'

const { proxy } = getCurrentInstance() as { proxy: ComponentPublicInstance }

const { SelectDepartmentList } = storeToRefs(useSelectDataStore())

const stepForm1 = ref()

const form = ref<AddBankCardInfoType>({
  bank: '',
  bankNumber: '',
  idNumber: '',
  name: '',
  phone: '',
  isDefault: 0
})

const rules = ref({
  name: { type: 'string', required: true, message: '请填写姓名', trigger: ['blur', 'change'] },
  bank: { type: 'string', required: true, message: '请填写卡类型', trigger: ['blur', 'change'] },
  bankNumber: { type: 'string', required: true, message: '请填写银行卡号', trigger: ['blur', 'change'] },
  idNumber: { type: 'string', required: true, message: '请填写身份证号', trigger: ['blur', 'change'] },
  phone: { type: 'string', required: true, message: '请填写预留号码', trigger: ['blur', 'change'] }
})

const formDisabled = ref<boolean>(false) // true 禁用代表回显数据  false 可以填写可以提交

const confirmAddBankCardHandler = () =>
  stepForm1.value.validate().then(async (res: boolean) => {
    await updateAdd_bank(form.value)

    proxy.$h.timeCallBack('添加成功')
  })

// SexType[]

interface EventType {
  type: string
  BankCardInfo: string
}

onLoad((e: EventType) => {
  if (e.type === 'edit') {
    const bankCardData = JSON.parse(e.BankCardInfo)
    form.value.isDefault = bankCardData?.isDefault
    form.value.name = bankCardData?.name
    form.value.phone = bankCardData?.phone
    form.value.bank = bankCardData?.bank
    form.value.bankNumber = bankCardData?.bankNumber
    form.value.idNumber = bankCardData?.idNumber
  }
})
</script>

<style>
page {
  background: #ffffff !important;
}
</style>

<style lang="scss" scoped>
.step {
  &-top {
    background: #fff;
    box-sizing: border-box;
    padding: 44rpx 24rpx;
    margin-bottom: 20rpx;
  }
  &-num {
    width: 36rpx;
    height: 36rpx;
    box-sizing: border-box;
    padding: 2rpx 10rpx;
    border-radius: 50%;
    background: #cccccc;
    color: #ffffff;
    font-size: 24rpx;
    margin-right: 14rpx;
  }
  .numac {
    background: #05b8d2;
  }
  &-title {
    color: #cccccc;
    font-size: 30rpx;
    font-weight: 700;
  }
  .titleac {
    color: #05b8d2;
  }
  &-img {
    width: 52rpx;
    height: 52rpx;
  }
}
.main {
  box-sizing: border-box;
  padding: 0 32rpx;
  background: #fff;
  .formSubTitle {
    margin-bottom: 46rpx;
    color: #666666;
    font-size: 24rpx;
  }
  .fileImg {
    position: relative;
    .fileimage {
      width: 210rpx;
      height: 210rpx;
      border-radius: 24rpx;
      margin-right: 24rpx;
    }
    .fileimage:nth-child(3n) {
      margin-right: 0 !important;
    }
    .close {
      position: absolute;
      top: 12rpx;
      right: 12rpx;
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
    }
  }
  .uploadImg {
    box-sizing: border-box;
    padding: 68rpx 60rpx 60rpx;
    border: 1rpx dashed #cbcbcb;
    color: #999999;
    font-size: 22rpx;
    font-weight: 700;
    image {
      width: 48rpx;
      height: 48rpx;
      margin-bottom: 4rpx;
    }
  }
  .formTitle {
    color: #323233;
    font-size: 30rpx;
    font-weight: 700;
    box-sizing: border-box;
    padding: 30rpx 0;
  }
}
:deep(.u-textarea) {
  background: #f8f8fa !important;
  margin: 0 auto;
  width: 656rpx;
  height: 322rpx;
  border-radius: 24rpx;
}
.remark {
  box-sizing: border-box;
  padding: 32rpx;
  font-size: 26rpx;
  color: #666666;
}
</style>