<template>
  <view class="page flex-col">
    <view class="box_1 flex-row">
      
     
     
    </view>
    <view class="box_4 flex-col">
      <view class="box_5 flex-row">
        <image
          class="label_1"
          referrerpolicy="no-referrer"
          src="/static/lanhu_gerenxinxiweitianxie/FigmaDDSSlicePNGacf527a62cbe7351c6472edd8f5b2814.png"
		  @click="handleBack()"
        />
        <text class="text_1">个人信息</text>
        
      </view>
      <view class="box_6 flex-col">
        <view class="box_7 flex-row justify-between">
          <text class="text_2">头像</text>
		  <u-upload
		        :fileList="fileList1"
		        @afterRead="afterRead"
		        @delete="deletePic"
		        name="1"
		        :maxCount="1"
		        width="80"
		        height="80"
		        :previewFullImage="true"
		      >
		        <image
		          v-if="userDetails.avatar"
		          class="label_2"
		          :src="userDetails.avatar"
		          mode="aspectFill"
		        />
		        <image
		          v-else
		          class="label_2"
		          src="/static/lanhu_gerenxinxiweitianxie/FigmaDDSSlicePNGcc6ee579083c2c921f6c93c250df5d44.png"
		        />
		      </u-upload>
           <!-- <image
			  class="label_2"
			  referrerpolicy="no-referrer"
			  src="/static/lanhu_gerenxinxiweitianxie/FigmaDDSSlicePNGcc6ee579083c2c921f6c93c250df5d44.png"
			/> -->
			
        </view>
        <view class="text-wrapper_1 flex-row justify-between">
          <text class="text_3">昵称</text>
		  <input class="text_4" v-model="name" type="text" placeholder="请填写昵称">
          <!-- <text class="text_4">千舟寻渡</text> -->
        </view>
        <view class="text-wrapper_2 flex-row justify-between">
          <text class="text_5">联系方式</text>
		  <input class="text_6" v-model="name" type="text" placeholder="请填写联系方式">
          <!-- <text class="text_6">166&nbsp;8888&nbsp;6666</text> -->
        </view>
      </view>
      <view class="box_8 flex-col">
        <view class="text-wrapper_3 flex-row">
          <text class="text_7">身份证照片</text>
        </view>
        <view class="group_2 flex-row justify-between">
          <view class="image-wrapper_2 flex-col">
            <image
              class="image_3"
              referrerpolicy="no-referrer"
              src="/static/lanhu_gerenxinxiweitianxie/FigmaDDSSlicePNG613ddce187a71bcc667c56c84cd2d022.png"
            />
          </view>
          <view class="image-wrapper_3 flex-col">
            <image
              class="image_4"
              referrerpolicy="no-referrer"
              src="/static/lanhu_gerenxinxiweitianxie/FigmaDDSSlicePNGc70887b65324cf1c7b3d66fcb7a32970.png"
            />
          </view>
        </view>
      </view>
      <view class="box_9 flex-col">
        <text class="text_8">生活照片</text>
        <view class="block_2 flex-row">
          <view class="image-text_1 flex-col justify-between">
            <image
              class="label_3"
              referrerpolicy="no-referrer"
              src="/static/lanhu_gerenxinxiweitianxie/FigmaDDSSlicePNG6ea89e46a56641bc7e118ef1d4d789d5.png"
            />
            <text class="text-group_1">添加图片</text>
          </view>
        </view>
      </view>
    </view>
    <view class="box_10 flex-col">
      <view class="text-wrapper_4 flex-col">
        <text class="text_9">保存</text>
      </view>
    </view>
  </view>
</template>
<script>
import request from '@/utils/request.js'
export default {
  data() {
    return {
      userDetails: [],
      userId: null,
      constants: {},
      fileList1: [] // 用于上传组件的文件列表
    };
  },
  onLoad(option) {
    this.userId = option.userId;
    console.log('option', option)
    console.log('userId', this.userId)
    this.getUserInfo()
  },
  methods: {
    handleBack() {
      uni.navigateBack({
        delta: 1 
      });
    },
    
    getUserInfo(){
      request({
        url: '/app-api/small/dl-drive-school-student/getByUserId',
        method: 'GET',
        params: {
          userId: this.userId,
        },
      }).then(res => {
        this.userDetails = res.data
        if (res.data.avatar) {
          this.fileList1 = [{
            url: res.data.avatar,
            status: 'success'
          }]
        }
        console.log('res.data',res.data);
        console.log('userDetails', this.userDetails);
      })
    },
    
    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1)
      this.userDetails.avatar = '' // 清空头像
    },
    
    // 新增图片
    afterRead(event) {
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this[`fileList${event.name}`].length
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      
      // 上传图片到服务器
      lists.map((item, index) => {
        this.uploadFilePromise(item.url).then(res => {
          let item = this[`fileList${event.name}`][fileListLen + index]
          this[`fileList${event.name}`].splice(fileListLen + index, 1, {
            ...item,
            status: 'success',
            message: '',
            url: res.data.url
          })
          // 更新用户头像
          this.userDetails.avatar = this.baseUrl + '/' + res.data.url
        }).catch(err => {
          let item = this[`fileList${event.name}`][fileListLen + index]
          this[`fileList${event.name}`].splice(fileListLen + index, 1, {
            ...item,
            status: 'failed',
            message: '上传失败'
          })
        })
      })
    },
    
    // 上传文件方法 - 修改为与其他页面一致
    uploadFilePromise(e) {
      return new Promise((resolve, reject) => {
        uni.uploadFile({
          url: '/app-api/small-upload/common/upload',
          filePath: e,
          name: 'file',
          success: (res) => {
            if (res.statusCode === 200) {
              resolve(JSON.parse(res.data))
            } else {
              reject(new Error('上传失败'))
            }
          },
          fail: (err) => {
            reject(err)
          }
        })
      })
    }
  }
};
</script>
<style lang='scss'>
@import '../common/common.scss';
@import './assets/style/index.rpx.scss';
</style>
