<!--销售-个人资料-详情-->
<template>
  <view class="main_box">

    <view class="main_section">
      <view class="section">
        <view class="item">
          <image
              @click="changeAvatar()"
              class="pic"
              :src="$util.img(formData.header)"
          ></image>

          <view class="btn" @click="changeAvatar()">修改头像</view>
        </view>
      </view>

      <view class="section">
        <view class="item">
          <view class="title">
            姓名 <text class="required">*</text>
          </view>
          <view class="input">
            <input v-model="formData.name" placeholder="请输入姓名" />
          </view>
        </view>

        <view class="item">
          <view class="title">
            账号 <text class="required"></text>
          </view>
          <view class="input">
            <input v-model="formData.username" disabled placeholder="暂无" />
          </view>
        </view>

        <view class="item">
          <view class="title">
            部门 <text class="required"></text>
          </view>
          <view class="input">
            <input disabled placeholder="暂无" />
          </view>
        </view>

        <view class="item">
          <view class="title">
            等级 <text class="required"></text>
          </view>
          <view class="input">
            <input v-model="formData.member_level_name" disabled placeholder="暂无" />
          </view>
        </view>
      </view>

      <view class="section">
        <view class="item">
          <view class="title">
            性别 <text class="required">*</text>
          </view>
          <view class="input">
            <input placeholder="请选择性别" v-model="formData.gender" @click="picker_show_sex=true"/>
            <fui-picker
                layer="1"
                :linkage="true"
                :options="options_sex_arr"
                :show="picker_show_sex"
                @change="changePickerSex"
                @cancel="picker_sex_show=false"
            ></fui-picker>
          </view>
        </view>

        <view class="item">
          <view class="title">
            生日 <text class="required">*</text>
          </view>
          <view class="input">
            <input  placeholder="请选择生日" @click="picker_show_birthday=true" v-model="formData.birthday"/>
            <fui-date-picker
                :minDate="minDate"
                :maxDate="maxDate"
                :show="picker_show_birthday"
                type="3"
                @change="changePickerBirthday"
                @cancel="picker_show_birthday=false"
            ></fui-date-picker>
          </view>
        </view>

        <view class="item">
          <view class="title">
            邮箱 <text class="required">*</text>
          </view>
          <view class="input">
            <input v-model="formData.email" placeholder="请输入邮箱" />
          </view>
        </view>

        <view class="item">
          <view class="title">
            手机 <text class="required">*</text>
          </view>
          <view class="input">
            <input v-model="formData.phone" placeholder="请输入手机" />
          </view>
        </view>

        <view class="item">
          <view class="title">
            微信 <text class="required"></text>
          </view>
          <view class="input">
            <input v-model="formData.wx" placeholder="请输入微信" />
          </view>
        </view>
      </view>

      <view class="submet_btn" @click="submit">提交</view>
    </view>
  </view>
</template>

<script>
import marketApi from '@/api/market.js';
import {
  Api_url
} from "@/common/config.js";
import AQTabber from "@/components/AQ/AQTabber"


export default {
  components: {
    AQTabber,
  },
  data() {
    return {
      formData:{
        header:'',//头像地址
        name:'',//姓名
        username:'',//账号
        address:'',//住址
        gender:'',//性别|男,女
        birthday:'',//生日
        email:'',//邮箱
        phone:'',//手机
        wx:'',//微信号
      },

      userInfo: {},

      //上传图片APi路径
      uploadUrl: `${Api_url}/file/image`,

      //性别选择器 相关
      picker_show_sex: false,
      sex_name:'请选择',
      options_sex_arr: [
        {
          value: 1,
          text: '男'
        },
        {
          value: 2,
          text: '女'
        },
      ],

      //生日选择器相关
      minDate: '',
      maxDate: '',
      picker_show_birthday: false,
      upload_type: 1,
      uploadHeadimg: '',
      editHeadimg: '',
    }
  },
  onLoad() {
  },
  onShow() {
    this.init()
  },
  methods: {

    async init(){
      // this.getBirthday()
      await this.getUserInfo()
    },

    //获取用户详情
    async getUserInfo(){
      let res = await marketApi.member({})
      if (res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

      //用户表单
      this.formData = {
        header: res.data.headimg,//头像地址
        name: res.data.name,//姓名
        username: res.data.username,//账号
        address: res.data.address,//住址
        gender: res.data.gender,//性别|男,女
        birthday: res.data.birthday,//生日
        email: res.data.email,//邮箱
        phone: res.data.phone,//手机
        wx: res.data.wx || '',//微信号
        member_level_name: res.data.member_level_name || '',//等级名称
      }
      console.log(123,this.formData);

    },

    // 修改头像按钮
    changeAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0]
          // 这里可以调用上传接口
          this.uploadFilePromise(tempFilePath)
        }
      })
    },
    uploadFilePromise(url) {
      let token = uni.getStorageSync('token') || ''
      let a = uni.uploadFile({
        url: this.uploadUrl, //仅为示例，非真实的接口地址
        filePath: url,
        name: 'file',
        header: {
          'token': `${token}`, //请求头设置token
        },
        success: (e) => {
          let res = JSON.parse(e.data.replace(/\ufeff/g, "") || "{}")
          console.log('上传成功2', res)
          if (res.code == 1) {
            this.upload_type = 2
            this.formData.header = res.data.path
            // this.editHeadimg = res.data.path
            // this.uploadHeadimg = res.data.url
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          }
        },
      });
    },
    //修改头像Api
    async editPic(pic) {
      let res = await salesmanApi.editPic({pic: pic})
      if (res.code >= 0) {
        this.$util.showToast({
          title: '修改成功'
        })
      } else {
        this.$util.showToast({
          title: res.message
        })
      }
    },

    //性别选择相关
    changePickerSex(e) {
      console.log('监听选择', e)
      this.formData.gender = e.text
      this.picker_show_sex = false
    },

    //生日选择相关
    //获取当前年月日+获取30年前的日期
    getBirthday() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let year_30 = year - 30;
      let month_30 = month;
      let day_30 = day;
      if (month_30 == 2 && day_30 > 28) {
        month_30 = 3;
        day_30 = 1;
      }
      if (month_30 == 4 && day_30 > 30) {
        month_30 = 5;
        day_30 = 1;
      }
      if (month_30 == 6 && day_30 > 30) {
        month_30 = 7;
        day_30 = 1;
      }
      if (month_30 == 9 && day_30 > 30) {
        month_30 = 10;
        day_30 = 1;
      }
      if (month_30 == 11 && day_30 > 30) {
        month_30 = 12;
        day_30 = 1;
      }
      if (month_30 > 12) {
        month_30 = month_30 - 12;
        year_30 = year_30 + 1;
      }
      let minDate = year_30 + "-" + month_30 + "-" + day_30
      let maxDate = year + "-" + month + "-" + day
      this.minDate = minDate
      this.maxDate = maxDate
    },

    //监听生日选择
    changePickerBirthday(e) {
      console.log('监听生日选择', e)
      this.formData.birthday = e.result
      this.picker_show_birthday = false
    },

    //提交信息
    async submit() {
      let data = {...this.formData}

      if(!data.header){
        uni.showToast({
          title: '请上传头像',
          icon: 'none'
        })
        return
      }

      if(!data.name){
        uni.showToast({
          title: '请填写',
          icon: 'none'
        })
        return
      }

      if(!data.gender){
        uni.showToast({
          title: '请选择性别',
          icon: 'none'
        })
        return
      }

      if(!data.birthday){
        uni.showToast({
          title: '请选择生日',
          icon: 'none'
        })
        return
      }

      if(!data.email){
        uni.showToast({
          title: '请填写邮箱',
          icon: 'none'
        })
        return
      }

      if(!data.phone){
        uni.showToast({
          title: '请填写手机',
          icon: 'none'
        })
        return
      }


      let res = await marketApi.memberEdit(data)
      if(res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }
      uni.showToast({
        title: res.msg,
        icon: 'success'
      })

      this.getUserInfo()
    },


  }
}
</script>

<style lang="less" scoped>

.main_box{
  background: #292929 ;
}

//自定义导航栏
.navbar_section{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #29d3b4;
  .title{
    padding: 20rpx 0;
    font-size: 30rpx;
    color: #315d55;
  }
}

.main_section{
  min-height: 100vh;
  background: #292929 100%;
  padding: 0 0rpx;
  padding-top: 32rpx;
  padding-bottom: 150rpx;
  font-size: 28rpx;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 20rpx;

  .section{
    background-color: #434544;
    .item{
      padding: 20rpx 40rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .pic{
        width: 82rpx;
        height: 82rpx;
        border-radius: 50%;
      }
      .btn{}

      .title{
        display: flex;
        align-items: center;
        font-size: 26rpx;
        color: #D7D7D7;
        .required{
          margin-left: 10rpx;
          color: red;
        }
      }
      .input{
        input{
          text-align: right;
        }
      }
    }
  }

  .submet_btn{
    margin: 0 auto;
    margin-top: 40rpx;
    border: 2px solid #25a18b;
    color: #25a18b;
    width: 80%;
    height: 80rpx;
    font-size: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }



}


</style>