<template>
  <u-navbar title="账户设置" :autoBack="true" bgColor="#fff" placeholder safeAreaInsetTop :titleStyle="{ color: '#000' }" leftIconColor="#000"></u-navbar>
  <view class="step">
    <view class="main">
      <u-form labelPosition="left" :model="form" ref="AddAccountFormRef">
        <view class="grayLine"></view>
        <u-form-item labelWidth="200rpx" :label="Event.title" :prop="Event.flag" borderBottom>
          <u-input placeholder="请输入账户信息" border="none" v-model="form[Event.flag]" disabledColor="#ffffff"></u-input>
        </u-form-item>
        <u-form-item labelWidth="200rpx" :label="`真实姓名`" :prop="Event.nameFlag" borderBottom>
          <u-input :placeholder="`请输入真实姓名`" border="none" v-model="form[Event.nameFlag]" disabledColor="#ffffff"></u-input>
        </u-form-item>
        <u-form-item labelWidth="200rpx" :label="`手机号`" prop="phone" borderBottom>
          <u-input :placeholder="`请输入手机号`" border="none" v-model="UserInfo.phone" disabledColor="#ffffff" disabled></u-input>
          <view style="color: #06b8d3; font-size: 26rpx" @click="sendCodeHandler">{{ countdown === 60 ? '获取验证码' : `${countdown}秒后可重新获取` }}</view>
        </u-form-item>
        <u-form-item labelWidth="200rpx" :label="`验证码`" prop="code" borderBottom>
          <u-input :placeholder="`请输入验证码`" border="none" v-model="form.code" disabledColor="#ffffff"></u-input>
        </u-form-item>
      </u-form>
    </view>
    <up-button color="#05B8D2" shape="circle" text="添加" throttleTime="1500" :customStyle="{ width: '90%', height: '94rpx', marginTop: '32rpx' }" @click="bindAccountHandler"></up-button>
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, ComponentPublicInstance, nextTick } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import useTimeHandler from '@/hooks/useTimeChange'
import { DebounceBy } from '@/utils/debounceBy'
import { updateBindUserCard, getChangePhonePwdCode } from '../../api'
import { BindUserCardType, AddAccountEventType } from '../../types'
import { AddAccountFormRules } from '@/static/json/rules'

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

const [countdown, startCountdown] = useTimeHandler()

const Event = ref<AddAccountEventType>({
  account: '',
  flag: '',
  nameFlag: '',
  title: '',
  url: ''
})

const AddAccountFormRef = ref()

const UserInfo = ref()

const form = ref<BindUserCardType>({
  wxUserName: '',
  aliUserName: '',
  doctorRealName: '',
  doctorWXRealName: ''
})

onLoad(async (e: AddAccountEventType) => {
  Event.value = e

  UserInfo.value = uni.getStorageSync('UserInfo')

  nextTick(() => {
    AddAccountFormRef.value.setRules(AddAccountFormRules)
  })
})

const clickGetCodeHandler = async () => await getChangePhonePwdCode({ type: 3 })

const sendCodeHandler = DebounceBy(() => startCountdown(clickGetCodeHandler), 2000)

const bindAccountHandler = () =>
  AddAccountFormRef.value.validate().then(async () => {
    await updateBindUserCard({ [Event.value.flag]: form.value[Event.value.flag].replace(/\s/g, ''), [Event.value.nameFlag]: form.value[Event.value.nameFlag] })

    proxy.$h.timeCallBack('绑定成功')
  })
</script>

<style lang="scss" scoped>
page {
  background: #f6f8fa;
}
.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;
  }
}
</style>