<template>
  <view class="change-info-container">
    <view class="title-main">完善你的资料</view>
    <view class="title-sub"></view>

    <view class="avatar-section">
      <view class="avatar-container">
        <image class="avatar-img" :src="userInfo.img" mode="aspectFill" @click="chooseImage"/>
      </view>
    </view>

    <!-- 表单部分保持不变 -->
    <view class="form-section">
      <view class="form-row">
        <view class="form-label">取个昵称</view>
        <view class="input-wrapper">
          <input class="form-input" v-model="userInfo.userName" placeholder="请输入昵称" />
        </view>
      </view>
      <view class="form-row">
        <view class="form-label">你的手机号</view>
        <view class="input-wrapper">
          <input class="form-input" v-model="userInfo.phone" placeholder="请输入您的手机号" />
        </view>
      </view>
      <view class="form-row">
        <view class="form-label">你的性别</view>
        <view class="input-wrapper">
          <picker class="form-input gender-select" mode="selector" :range="genderOptions" range-key="label" @change="selectGender" v-model="userInfo.gender">
            <view class="gender-text">{{userInfo.sexLabel}}</view>
          </picker>
        </view>
      </view>
      <view class="form-row">
        <view class="form-label">证件号</view>
        <view class="input-wrapper">
          <input class="form-input" v-model="userInfo.idCard" placeholder="请输入您的证件号" />
        </view>
      </view>
      <view class="form-row">
        <view class="form-label">所属单位</view>
        <view class="input-wrapper">
          <input class="form-input" :value="userInfo.unitName" disabled />
        </view>
      </view>

      <view class="form-group">
        <view class="group-title">联系信息</view>
        <view class="form-row">
          <view class="form-label">邮箱</view>
          <view class="input-wrapper">
            <input class="form-input" v-model="userInfo.email" placeholder="请输入邮箱" />
          </view>
        </view>
        <view class="form-row">
          <view class="form-label">车牌号</view>
          <view class="input-wrapper">
            <input class="form-input" v-model="userInfo.carNumber" placeholder="请输入车牌号" />
          </view>
        </view>
      </view>
    </view>
    <button class="submit-btn" @click="onsubmit()">确认修改</button>
  </view>
</template>

<script>
import {uploadFiles} from "../../../../common/upload";

export default {
  data() {
    return {
      userInfo: {
        idCard: '',
        unitName:'',
        email: '',
        carNumber: '',
        img: '',
        userName:'',
        phone:'',
        gender:'',
        sexLabel:''
      },
      genderOptions: [
        {value: 1, label: '男'},
        {value: 2, label: '女'}
      ]
    }
  },
  onLoad() {
 this.getUserInfo()
    console.log(this.userInfo);

  },
  methods: {
    getUserInfo() {
      let params = {
        id: this.vuex_user.id,
        unitId: this.vuex_user.unitId,
      }
      this.$u.api.unit.queryEmployeeById(params).then(res => {
        if (res.code == "200") {
          this.userInfo =res.data;
          this.userInfo.sexLabel = this.genderOptions[this.userInfo.gender-1].label;
        }
      });
      this.$u.api.unit.queryUnitById(params).then(res => {
        if (res.code == 200) {
          this.userInfo.unitName =res.data.name;
        }
      });
    },
    selectGender(e) {
      const index = e.detail.value;
      this.userInfo.gender = this.genderOptions[index].value;
      this.userInfo.sexLabel = this.genderOptions[index].label;
    },
    onsubmit(){
      this.$u.api.unit.updateEmployee(this.userInfo).then(res => {
        if (res.code == 200) {
          uni.reLaunch({
            url: '/pages/sys/user/mine'
          });
        }
      });
    },
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: async (res) => {
          const tempFilePaths = res.tempFilePaths;
          this.userInfo.img = tempFilePaths[0];
          const result = await uploadFiles({
            files: tempFilePaths,
            url: this.vuex_config.baseUrl + '/resource/oss/upload',
            name: 'file',
            vm: this
          });
          this.userInfo.img = result[0].data.url;
          console.log(this.userInfo.img);
          const allSuccess = result.every(item => item.code == 200);
          if (!allSuccess) {
            uni.showToast({
              title: '上传失败',
              icon: 'none'
            });
            return;
          }
        }
      });
    },
  }
}
</script>

<style scoped>
.change-info-container {
  position: relative;
  padding-bottom: 60rpx;
  padding-top: 24rpx;
  min-height: 100vh;
  background: linear-gradient(180deg, #d2edff 0%, #ffffff 100%);
}

.back-arrow {
  width: 24rpx;
  height: 42rpx;
  left: 45rpx;
}

.title-main {
  font-size: 50rpx;
  font-weight: bold;
  color: #000;
  margin-top: 45rpx;
  margin-left: 65rpx;
}

.title-sub {
  font-size: 50rpx;
  color: #000;
  font-weight: bold;
  margin-left: 65rpx;
  margin-bottom: 30rpx;
}

.avatar-section {
  margin: 0 68rpx 62rpx 68rpx;
  display: flex;
}

.avatar-container {
  position: relative;
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  border: 2rpx solid #e0e0e0;
  background-color: #fff;
  overflow: hidden;
}

.avatar-img {
  width: 100%;
  height: 100%;
}



.form-section {
  margin: 0 68rpx;
  background: transparent;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 18rpx;
}

.form-label {
  color: #555;
  font-size: 32rpx;
  font-weight: bold;
  width: 200rpx;
}

.input-wrapper {
  flex: 1;
}

.form-input {
  width: 100%;
  background: #fff;
  border-radius: 14rpx;
  border: 2rpx solid #e0e0e0;
  padding: 0 20rpx;
  height: 98rpx;
  font-size: 28rpx;
  color: #333;
}

.gender-select {
  display: flex;
  align-items: center;
}

.gender-text {
  width: 100%;
  text-align: center;
}

.form-group {
  margin-top: 40rpx;
  border-top: 1px solid #e0e0e0;
  padding-top: 20rpx;
}

.group-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.submit-btn {
  width: 90vw;
  height: 80rpx;
  background: linear-gradient(90deg, #2e6cf6 0%, #4fc3f7 100%);
  color: #fff;
  font-size: 32rpx;
  border: none;
  border-radius: 40rpx;
  margin: 80rpx auto 40rpx auto;
  display: block;
  box-shadow: 0 8rpx 24rpx rgba(46, 108, 246, 0.12);
}

.form-input:disabled {
  background-color: #f5f5f5;
  color: #666;
}
</style>
