<template>
  <view class="user-info">
    <view class="form-item">
      <text>用户头像:</text>
      <image :src="userInfo.avatarUrl" mode="aspectFill" class="avatar"></image>
      <image v-if="userInfo.userType === 1" src="/static/images/v.png" mode="aspectFit" class="verification-badge"></image>
    </view>

    <view class="form-item">
      <text>昵称:</text>
      <input v-model="userInfo.nickName" placeholder="请输入昵称" />
      <text class="clear-icon" @tap="clearInput('nickName')">×</text>
    </view>

    <view class="form-item">
      <text>性别</text>
      <picker @change="onGenderChange" :value="userInfo.gender" :range="genders">
        <view class="picker-view">{{ genders[userInfo.gender] || '请选择性别' }}</view>
      </picker>
      <text class="clear-icon" @tap="clearInput('gender')">×</text>
    </view>

    <view class="form-item">
      <text>手机号码</text>
      <input v-model="userInfo.phoneNumber" placeholder="请输入手机号码" />
      <button class="get-phone-btn" @getphonenumber="getPhoneNumber" open-type="getPhoneNumber">获取手机号码</button>
    </view>

    <view class="form-item">
      <text>用户类别</text>
      <picker @change="onTypeChange" :value="userInfo.userType" :range="typeList">
        <view class="picker-view">{{ typeList[userInfo.userType] || '请选择用户类别' }}</view>
      </picker>
      <text class="clear-icon" @tap="clearInput('userType')">×</text>
    </view>

    <view class="form-item" v-if="userInfo.userType === 1">
      <text>姓名:</text>
      <input v-model="userInfo.realName" placeholder="请输入姓名" />
      <text class="clear-icon" @tap="clearInput('realName')">×</text>
    </view>

    <button class="save-btn" @tap="saveUserInfo">保存更新</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatarUrl: 'http://127.0.0.1:11170/__tmp__/7VdGoREFyrIFad833dc1387351cba860b823af033162.jpeg',
        nickName: 'lis23',
        gender: 0,
        phoneNumber: '13223896731',
        userType: 0,
        realName: ''
      },
      genders: ['保密', '男', '女'],
      typeList: ['普通用户', '内部用户'],
      errorMessage: ''
    }
  },
  onLoad() {
    // 这里可以添加页面加载时的逻辑，比如从服务器获取用户信息
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      // 从服务器获取用户信息的方法
      // 这里应该调用API获取用户信息，然后更新 this.userInfo
    },
    onTypeChange(e) {
      this.userInfo.userType = parseInt(e.detail.value)
    },
    onGenderChange(e) {
      this.userInfo.gender = parseInt(e.detail.value)
    },
    clearInput(field) {
      if (field === 'nickName' || field === 'realName') {
        this.userInfo[field] = ''
      } else if (field === 'gender' || field === 'userType') {
        this.userInfo[field] = -1
      }
    },
    getPhoneNumber(e) {
      if (e.detail.errMsg === "getPhoneNumber:ok") {
        // 这里应该调用后端API来解密获取手机号
        console.log("获取手机号成功，需要解密的数据：", e.detail)
        // 示例：调用解密API
        // this.decryptPhoneNumber(e.detail.encryptedData, e.detail.iv)
      } else {
        uni.showToast({
          title: '获取手机号失败',
          icon: 'none'
        })
      }
    },
    // decryptPhoneNumber(encryptedData, iv) {
    //   // 调用后端API进行解密
    //   // 解密成功后更新 this.userInfo.phoneNumber
    // },
    async saveUserInfo() {
      if (!this.validateForm()) {
        return
      }

      try {
        // 这里应该调用保存用户信息的API
        // await this.updateUserInfoAPI(this.userInfo)
        uni.showToast({
          title: '保存成功',
          icon: 'success'
        })
      } catch (error) {
        uni.showToast({
          title: '保存失败，请重试',
          icon: 'none'
        })
      }
    },
    validateForm() {
      if (!this.userInfo.nickName.trim()) {
        uni.showToast({ title: '请输入昵称', icon: 'none' })
        return false
      }
      if (this.userInfo.gender === -1) {
        uni.showToast({ title: '请选择性别', icon: 'none' })
        return false
      }
      if (!/^1\d{10}$/.test(this.userInfo.phoneNumber)) {
        uni.showToast({ title: '请输入有效的手机号码', icon: 'none' })
        return false
      }
      if (this.userInfo.userType === 1 && !this.userInfo.realName.trim()) {
        uni.showToast({ title: '请输入姓名', icon: 'none' })
        return false
      }
      return true
    }
  }
}
</script>

<style>
/* 样式保持不变 */
.user-info {
  padding: 20px;
  background-color: #ffffff;
}

.form-item {
  margin-bottom: 15px;
  position: relative;
}

.form-item text {
  display: block;
  margin-bottom: 5px;
  color: #333;
  font-size: 14px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 8px;
}

.verification-badge {
  position: absolute;
  bottom: 0px;
  left: 65px;
  width: 20px;
  height: 20px;
}

input,
.picker-view {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  background-color: #fff;
  font-size: 14px;
  line-height: 40px;
}

.clear-icon {
  position: absolute;
  right: 10px;
  top: 30px;
  color: #999;
  font-size: 18px;
  background-color: #e0e0e0;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
}

.get-phone-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 14px;
  background-color: transparent;
  color: #007AFF;
  padding: 5px 0;
  border: none;
}

.save-btn {
  width: 100%;
  height: 44px;
  line-height: 44px;
  text-align: center;
  background-color: #007AFF;
  color: white;
  border-radius: 4px;
  margin-top: 20px;
  font-size: 16px;
}
</style>