<template>
  <div class="body">
   <div class="title">
     <div class="title-top">上传身份证的正反面<span style="color: #FF6B2E">*</span></div>
     <div class="title-bottom">我确认身份证影像是本人名下最新且有效的身份证影像</div>
   </div>
   <van-uploader v-model="fileList" multiple class="uploader front" >
     <div class="uploadStyle">
       <div class="imgStyle">
         <img src="@/assets/imgStyle.svg" alt="">
       </div>
       <div class="text">待上传</div>
     </div>
   </van-uploader>
    <van-uploader v-model="fileList" multiple class="uploader opposite" >
      <div class="uploadStyle">
        <div class="imgStyle">
          <img src="@/assets/imgStyle.svg" alt="">
        </div>
        <div class="text">待上传</div>
      </div>
    </van-uploader>
    <div class="title">
      <div class="title-top">上传营业执照<span style="color: #FF6B2E">*</span></div>
      <div class="title-bottom">请上传您的营业执照</div>
    </div>
    <van-uploader v-model="fileList" multiple class="uploader license" >
      <div class="uploadStyle">
        <div class="imgStyle">
          <img src="@/assets/imgStyle.svg" alt="">
        </div>
        <div class="text">待上传</div>
      </div>
    </van-uploader>
    <div class="title">
      <div class="title-top">请完善您的个人信息<span style="color: #FF6B2E">*</span></div>
      <van-cell-group>
        <van-field
          v-model="username"
          required
          clearable
          label="姓名"
          placeholder="请输入姓名"
        />

        <van-field
          v-model="idCard"
          label="身份证号"
          placeholder="请输入本人身份证号"
          required
        />
        <van-field
          v-model="phone"
          label="手机号码"
          placeholder="请输入本人的手机号码"
          required
        />
      </van-cell-group>
      <van-button type="primary" size="large" round color="#ff6b2e" style="margin-top: 10px" @click="goDealerHome">提交</van-button>
    </div>
  </div>
</template>
<script>
import { getUrlParam } from '@/utils/wx-api-config'

export default {
  name: 'addUser',
  data () {
    return {
      fileList: [],
      username: '',
      idCard: '',
      phone: ''
    }
  },
  created () {
    this.handleWechatAuth()
  },
  methods: {
    async handleWechatAuth () {
      try {
        const code = getUrlParam('code')
        if (!code) {
          throw new Error('未获取到授权code')
        }
        console.log('授权成功，获取到的code为：', code)
        // 跳转到首页
        // this.$router.replace('/login')
      } catch (error) {
        console.error('授权失败:', error)
        this.error = true
        this.errorMsg = error.message || '未知错误'
      } finally {
        this.loading = false
      }
    },
    goDealerHome () {
      this.$router.replace('/dealer/home')
    }
  }

}
</script>
<style scoped>
.body{
  width: 100vw;
  display: flex;
  padding: 0 20px 20px;
  flex-direction: column;
  color: #333;
  box-sizing: border-box;
}
.title{
  margin-top: 10px;
}
.title-top{
  font-weight: 600;
  font-size: 16px;
}
.title-bottom{
  font-size: 10px;
}
.uploader{
  width: 100%;
  height: 180px;
  background-size: 100%; /* 拉伸图片填满整个容器 */
  background-repeat: no-repeat;
  margin-top: 10px;
}
.opposite{
  background-image: url('@/assets/opposite.svg');
}
.front{
  background-image: url('@/assets/front.svg');
}
.license{
  background-image: url('@/assets/license.svg');
}
.body /deep/ .van-uploader__wrapper{
  height: 100%;

}
.body /deep/ .van-uploader__input-wrapper{
  width: 100%;
}
.uploadStyle{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.imgStyle{
  width: 56px;
  height: 56px;
  background: #ff6b2e;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.text{
  color: #FF6B2E;
  font-size: 14px;
  font-weight: 600;
  margin-top: 10px;
}
.title /deep/ .van-cell{
  padding-left: 0;
  padding-right: 0;
}
</style>
