<template>
  <view class="grace-body">
    <fu-custom bgColor="bg-white" :isBack="true" :isBottom="true">
      <block slot="content">我的资料</block>
    </fu-custom>
    <!-- 个人资料表单 start -->
    <form @submit="formSubmit" class="grace-form grace-margin-top">
      <!-- 顶部头像模块 start -->
      <view class="head_list cu-list menu">
        <view class="cu-item">
          <view class="content flex justify-between align-center">
            <text class="title text-lg text-269">头像</text>
            <view class="demo-face grace-relative grace-img-in">
              <image :src="head_img || '/static/logo.png'" mode="aspectFill" @tap="openImg()"></image>
            </view>
          </view>
        </view>
      </view>
      <!-- 顶部头像模块 end -->
      <view class="cu-list menu ">
        <view class="cu-item">
          <view class="content flex justify-between align-center">
            <text class="title text-lg text-269">ID</text>
            <text class=" text-lg text-818 text-right">{{user_id}}</text>
          </view>
        </view>
        <!-- 昵称 start -->
        <view class="cu-item ">
          <view class="content flex justify-between align-center">
            <text class="title text-lg text-269">昵称</text>
            <input type="text"  :selection-start="user_name.length" :selection-end="user_name.length"
              :cursor="user_name.length" class="input text-lg text-818" name="user_nickname" maxlength="10"
              :auto-blur="true" v-model="user_nickname" :placeholder="'请输入昵称'" style="text-align: right" />
          </view>
        </view>
        <!-- 昵称 end -->

        <!-- 性别 start -->
        <view class="cu-item">
          <view class="content flex justify-between align-center" @click="toggleTab('selector')">
            <text class="title text-lg text-269">性别</text>
            <text class="text-818">{{ sexName }}</text>
          </view>
        </view>
        <!-- 性别 end -->

        <!-- 生日 start -->
        <view class="cu-item">
          <view class="content flex justify-between align-center">
            <text class="title text-lg text-269">生日</text>
            <view class="text-lg text-818 text-cut-2 text-align-right" @tap="toggleTab('date')">
              <view >{{
                dateValue
                }}</view>
            </view>
          </view>
        </view>
        <!-- 生日 end -->

        <!-- 手机号 statr -->
        <!-- <view class="cu-item" @tap="handleJump" data-url="/pages/index/setting/verify-oldphone/index?isChange=1">
          <view class="content flex justify-between align-center">
            <text class="title text-lg text-333">{{i18n['手机号']}}</text>
            <input type="text" class="input text-666 text-lg" name="mobile" maxlength="11" v-model="mobile"
              disabled="" :placeholder="i18n['请输入昵称']" style="text-align: right" />
          </view>
        </view> -->
        <!-- 手机号 end -->

        <!-- 邮箱 start -->
        <!-- <view class="cu-item">
          <view class="content flex justify-between align-center">
            <text class="title text-lg text-333">{{i18n['邮箱']}}</text>
            <input type="text" class="input text-666 text-lg" name="user_email" v-model="user_email"
              :placeholder="i18n['请绑定邮箱']" style="text-align: right" />
          </view>
        </view> -->
        <!-- 邮箱 end -->

        <!-- 所在地 start -->
        <view class="cu-item">
          <view class="content flex justify-between align-center">
            <text class="title text-lg text-333 address">所在地</text>
            <view class="text-lg text-666 text-cut-2 text-align-right" @tap="toggleTab('region')">
              <view :class="name == '请选择' ? '' : 'address-select'">{{
                name
                }}</view>
            </view>
          </view>
        </view>
        <!-- 所在地 end -->
      </view>
    </form>
    <!-- 个人资料表单 end -->
    <!-- 选择城市 start -->
    <w-picker :visible.sync="cityVisible" mode="region" :value="defaultVal" themeColor="#FF9300" default-type="value"
      :hide-area="false" @confirm="onConfirm($event, 'region')" ref="region"></w-picker>
    <!-- 选择城市 end -->
    <!-- 选择生日 start -->
    <view class="birthday-wrap">
      <w-picker :visible.sync="timeVisible" mode="date" fields="day" :value="dateValue" themeColor="#FF9300" :disabled-after="true" @confirm="onConfirm($event, 'date')" ref="date">选择生日</w-picker>
    </view>
    <!-- 选择生日 end -->
    <!-- 选择性别 start -->
    <view class="sex-wrap">
      <w-picker :visible.sync="visible" mode="selector" :value="sexName" default-type="name" themeColor="#FF9300" :default-props="defaultProps" :options="sex" @confirm="onConfirm($event,'selector')" ref="selector" >选择性别</w-picker>
    </view>
      <!-- 选择性别 end -->
      <!-- 头像start -->
      <fu-popup v-model="headerShow" borderRadius="16"  :safeAreaInsetBottom="true" mode="bottom">
        <view class="header-popup text-269 text-weight-400 text-lg text-center">
          <view class="header-100" @click="chooseImage(0)">
            修改头像
          </view>
          <view class="header-100 solid-top"  @click="chooseImage(1)">
            拍照
          </view>
          <view class="header-100 solid-top"  @click="chooseImage(2)">
            从手机相册选择
          </view>
          <view class="height-20"></view>
          <view class="header-100 text-red" @click="headerShow = false">
            取消
          </view>
        </view>
      </fu-popup>
      <!-- 头像end -->
    <view class="footer">
      <button class="bottom-action" @click="saveUserInfo()">保存</button>
    </view>
    <!-- 断网检测 start -->
    <fu-notwork></fu-notwork>
    <!-- 断网检测 end -->
  </view>
</template>

<script>
  // @see 引入组件wPicker
  import wPicker from '@/pages/my/components/w-picker/w-picker.vue'
  // @see 引入验证，上传图片
  import { validate } from "@/common/utils/index";
  import UploadImg from "@/common/utils/upload-image-old.js"
  // @let {?Fuction} timer - 保存定时器
  let timer = null;
  export default {
    components: {
      wPicker,
    },
    data() {
      return {
        isLoading: false, // {Boolean} 是否加载中
        userInfo: {}, // {Objcet} 用户信息
        head_img: "", // {String} 用户头像
        user_name: "", // {String} 用户姓名
        user_id:'',
        user_nickname: "", // {String} 用户昵称
        user_email: "", // {String} 用户邮箱
        sexIndex: 0, // {Number} 性别选项 1：男；2：女；
        sex: [{name: '保密',id: 0}, {name: "男",id: 1}, {name: "女",id: 2}], // {Array} 性别数组
        defaultProps: {"label":"name","value":"id"},
        dateValue: "请选择", // {String} 生日默认显示
        mobile: "", // {String} 手机号码
        name: "请选择", // {String} 所在地默认选择
        mode: "region", // {String} 组件wPicker的类型
        defaultVal: [1, 0, 0], // {Array} 城市编码
        city1: [], // {Array} 对应的省市区
        thumb: global.SYSTEM_CONFIG.logo, // {String} 默认图片
        cityVisible: false, // {Boolean} 组件wPicker是否显示
        // canLeave: true, // 是否有聚焦的输入框,有则提示保存
        isCanSave: false, // 是否可以保存
        form: {
          user_nickname: "",
          user_name: "",
          user_email: "",
          sexIndex: "",
          dateValue: "",
          defaultVal: "",
        }, // 旧数据，用来判断是否修改
        timeVisible:false,//时间组件
        visible:false,//性别组件
        headerShow:false,
      };
    },
    computed:{
      sexName(){
        let name = this.sex[this.sexIndex].name;
        return name;
      }
    },
    watch: {
      user_nickname(val) {
        console.log(val, this.form.user_nickname, this.form.user_nickname == val);
        if (val != this.form.user_nickname) {
          this.isCanSave = true;
        }
      },
      user_email(val) {
        console.log(val, this.form);
        if (val != this.form.user_email) {
          this.isCanSave = true;
        }
      },
      sexIndex(val) {
        console.log(val, this.form);
        if (val != this.form.sexIndex) {
          this.isCanSave = true;
        }
      },
      dateValue(val) {
        console.log(val, this.form);
        if (val != this.form.dateValue) {
          this.isCanSave = true;
        }
      },
      defaultVal(val) {
        console.log(val, this.form);
        if (String(val) != String(this.form.defaultVal)) {
          this.isCanSave = true;
        }
      },
    },
    onLoad(option) {
      // 创建一个变量 userInfo ，把全局的用户信息浅拷贝到 userInfo
      let userInfo = Object.assign({}, global.userInfo);
      this.userInfo = userInfo;
      console.log(userInfo)
      this.head_img = userInfo.avatar ? userInfo.avatar : "";
      this.user_nickname = userInfo.nickname;
      this.user_name = userInfo.nickname;
      // this.user_email = userInfo.user_email;
      this.user_id = userInfo.id
      this.sexIndex = userInfo.gender ? userInfo.gender : 0;
      // 用户的生日信息，有的话就放到全局方法里过滤一下，没有显示默认
      this.dateValue = userInfo.birthday
        ? userInfo.birthday
        : "请选择";
      this.mobile = userInfo.mobile;
      this.name = userInfo.province ? `${userInfo.province}-${userInfo.city}-${userInfo.district}` : "请选择";
      // this.defaultVal = userInfo.address
      //   ? userInfo.address_code.split(",")
      //   : [1, 0, 0];

      // 保存旧数据
      this.form.user_nickname = this.user_nickname;
      this.form.user_email = this.user_email;
      this.form.sexIndex = this.sexIndex;
      this.form.dateValue = this.dateValue;
      this.form.defaultVal = this.defaultVal;
      /**
       * @description 监听手机号修改事件
       */
      uni.$on("changeMobile", (data) => {
        // console.log(data);
        var mobile = data.substr(0, 3) + "****" + data.substr(7);
        this.mobile = mobile;
      });
      /**
       * @description 监听监听上传头像事件
       */
      uni.$on("uPicCropper", (path) => {
        this.uploadUserImg(path);
      });
      // 监听键盘
      // uni.onKeyboardHeightChange((e) => {
      //   console.log(e, "eee");
      //   if (e.height == 0) {
      //     this.canLeave = true;
      //   } else {
      //     this.canLeave = false;
      //   }
      // });
    },
    onUnload() {
      // 关闭当前页面的监听事件
      uni.$off("uPicCropper");
      uni.$off("changeMobile");
    },
    // 返回拦截,如果有未保存的数据,弹出提示框
    // onBackPress() {
    //   if (this.canLeave) {
    //     return false;
    //   } else {
    //     this.$util.showModal({
    //       title: "提示",
    //       content: "还有未保存的数据哦,是否离开?",
    //       success: (res) => {
    //         if (res.confirm) {
    //           uni.hideKeyboard();
    //           setTimeout(() => {
    //             uni.navigateBack();
    //           }, 100);
    //         }
    //       },
    //     });
    //     return true;
    //   }
    // },
    methods: {
      /**
       * @description 页面返回
       * @param {delta} delta = 返回的页面数，如果 delta 大于现有页面数，则返回到首页
       */
      back(delta) {
        if (this.isCanSave) {
          this.$util.showModal({
            title: "提示",
            content: "你有修改未保存，是否确认保存?",
            success: (res) => {
              if (res.confirm) {
                this.saveUserInfo();
                uni.hideKeyboard();
              } else if (res.cancel) {
                uni.navigateBack();
              }
            },
          });
          return false;
        }
        console.log("页面返回");
        uni.navigateBack({
          delta: delta || 1,
        });
      },
      /**
       * @event
       * @description 所在地的选择弹窗显示
       */
      toggleTab(ref) {
				if (ref == 'region')  {
					if (this.userInfo.province) return false
				}
				
        this.$refs[ref].show();
      },
      // 保存用户信息
      saveUserInfo() {

        // 校验
        // 如果不为空的情况下使用验证方法去验证邮箱号
        // if(this.user_email){
        //   if (!validate(this.user_email, "email")) {
        //     this.$message.info(this.i18n["请输入正确的邮箱账号"]);
        //     return;
        //   }
        // }


        if(!this.user_nickname.trim()){
          this.$message.info("请输入昵称");
          return;
        }

        if(this.dateValue == '请选择'){
          this.$message.info("请选择生日");
          return;
        }
        if(this.name == '请选择'){
          this.$message.info("请选择所在地");
          return;
        }
        let addressArr = this.name.split('-')
        let data = {
          nickname: this.user_nickname,
          gender: this.sexIndex,
          birthday: this.dateValue,
          avatar: this.head_img,
          province: addressArr[0],
          city: addressArr[1],
          district: addressArr[2],
        };
        this.upload(data);
      },
      /**
       * @event
       * @description 表单上传事件
       * @param {Object} val - 用户单独保存某一项时传进来的参数
       */
      upload(val) {
        this.$api.post(global.apiUrls.editUserinfo, val).then((res) => {
          if (res.data.code == 1) {
            // 更新本地缓存
            uni.setStorageSync("USER_INFO", res.data.data.userinfo);
            // 更新用户信息
            this.userInfo = Object.assign({}, uni.getStorageSync("USER_INFO"));
            // 更新global的用户信息
            global.userInfo = res.data.data.userinfo;
            uni.showToast({
              title: res.data.msg,
              duration: 1000,
              icon: "none",
            });
            // 保存旧数据
            this.form.user_nickname = this.user_nickname;
            this.form.user_email = this.user_email;
            this.form.sexIndex = this.sexIndex;
            this.form.dateValue = this.dateValue;
            this.form.defaultVal = this.defaultVal;
            // 更新保存状态
            this.isCanSave = false;
            setTimeout(() => {
              uni.navigateBack();
            }, 500);
          } else {
            this.$message.info(res.data.msg);
          }
        });
      },
      /**
       * @event
       * @description 保存用户姓名事件
       */
      saveUsername() {
        if (
          this.userInfo.user_name == this.user_name ||
          this.user_name == "" ||
          this.user_name.length > 10
        )
          return;
        // this.upload({ user_name: this.user_name });
      },
      /**
       * @event
       * @description 性别选择事件
       */
      bindPickerChange: function (e) {
        this.sexIndex = e.detail.value;
        if (this.userInfo.sex == this.sexIndex) return;
        // this.upload({ sex: this.sexIndex });
      },
      /**
       * @description 选择性别
       */
      chooseSex() {
        let that = this;
        uni.showActionSheet({
          itemList: that.sex,
          success: function (res) {
            console.log(["选中了第"] + (res.tapIndex + 1) + ["个按钮"]);
            that.sexIndex = res.tapIndex;
            if (that.userInfo.sex == that.sexIndex) return;
            // that.upload({ sex: that.sexIndex });
          },
          fail: function (res) {
            console.log(res.errMsg);
          },
        });
      },
      /**
       * @event
       * @description 生日选择事件
       * @param {!Object} e - 用户生日弹窗选择的值
       */
      bindDateChange: function (e) {
        let selectTime = new Date(e.detail.value);
        let nowTime = new Date();
        if (selectTime > nowTime) {
          this.$message.info("请选择正确的时间");
          return;
        }
        this.dateValue = e.detail.value;
        if (this.userInfo.birthday == this.dateValue || !this.dateValue) return;
        // this.upload({ birthday: this.dateValue });
      },

      /**
       * @event
       * @description 所在地选择事件
       * @param {Object} result - 用户所在地弹窗选择的值
       */
      onConfirm(result,type) {
        console.log(result,type);
        if(type == 'date'){
          this.dateValue = result.value;
        }
        if(type == 'region'){
          let { province, city, area } = result.obj;
          let text = [province.label, city.label, area.label];
          let code = [province.value, city.value, area.value];
          this.name = text.join("-");
          // this.city1 = text;
          // this.defaultVal = code;
          // if (this.userInfo.address_code == this.defaultVal ||this.userInfo.address == this.name) return;
        }
         if(type == 'selector'){
           this.sexIndex = result.value;
         }
        // this.upload({
        //   address: this.name,
        //   address_code: this.defaultVal,
        // });
      },
      openImg(){
        this.headerShow = true;
      },
      /**
       * @event
       * @description 选择头像事件
       */
      chooseImage(tapIndex) {
        let that = this;
        if (tapIndex == 0) {
              let img = that.head_img || that.thumb;
              uni.navigateTo({
                url:
                  '/pages/my/avatar-cropping/index?rectHeight=200&rectWidth=200&fileType=jpg&myImgUrl=' +
                  encodeURIComponent(img),
                animationDuration: 0,
              });
            } else if (tapIndex == 1) {
              uni.chooseImage({
                count: 1,
                sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ["camera"], // 可以指定来源是相册还是相机，默认二者都有
                success: (res) => {
                  // 跳转到图片裁切页面
                  uni.navigateTo({
                    url:
                      '/pages/my/avatar-cropping/index?rectHeight=200&rectWidth=200&fileType=jpg&myImgUrl=' +
                      res.tempFilePaths[0],
                    animationDuration: 0,
                  });
                },
								fail: (err) => {
									console.log(err);
									if (err.errMsg.indexOf('No Permission')) {
										// #ifdef APP-PLUS
										// this.$message.info('暂无对应权限, 请前往APP设置中打开')
										// #endif
									}
								}
              });
            } else {
              uni.chooseImage({
                count: 1,
                sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ["album"], // 可以指定来源是相册还是相机，默认二者都有
                success: (res) => {
                  // 跳转到图片裁切页面
                  uni.navigateTo({
                    url: `/pages/my/avatar-cropping/index?rectHeight=200&rectWidth=200&fileType=jpg&myImgUrl=${res.tempFilePaths[0]}`,
                    animationDuration: 0,
                  });
                },
								fail: (err) => {
									console.log(err);
									if (err.errMsg.indexOf('No Permission')) {
										// #ifdef APP-PLUS
										// this.$message.info('暂无对应权限, 请前往APP设置中打开')
										// #endif
									}
								}
              });
            }
            this.headerShow = false;
      },
      // 表单提交
      formSubmit: function (e) {
        if (this.isLoading) return;

        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(() => {
          var formData = e.detail.value;

          // 添加头像
          formData.head_img = this.head_img;

          // 处理生日字段
          formData.birthday =
            formData.birthday.indexOf(this.i18n["选择"]) != -1 ? "" : formData.birthday;

          // 所在地


          // 进行表单验证操作
          let validateRes = this.doValidate(formData);
          if (validateRes) {
            this.$message.info(validateRes);
            return;
          }
          console.log('birthday', formData.birthday);

          this.isLoading = true;
          this.$api
            .post(global.apiUrls.editUserinfo, formData)
            .then((res) => {
              // setTimeout(() => {
              //   this.isLoading = false;
              // }, 500)
              if (res.data.code == 1) {
                this.isLoading = false;
                // 更新本地缓存
                uni.setStorageSync("USER_INFO", res.data.data.userinfo);

                // 更新global
                global.userInfo = res.data.data.userinfo;
                this.$message.info("修改成功");
                setTimeout(() => {
                  uni.navigateBack();
                }, 500);
              }
            })
            .catch((err) => {
              this.isLoading = false;
              console.log(err);
            });
        }, 300);
      },

      // 进行表单字段值校验
      doValidate(formData) {
        console.log(formData);

        // 昵称
        if (!formData.user_nickname) {
          return "请输入您的用户昵称";
        }

        if (formData.user_nickname.length > 10) {
          return "请检查您的昵称(最多10个字符)";
        }

        // 生日
        if (!formData.birthday) {
          return "请选择您的生日";
        }
        if (!this.name) {
          return "请选择所在地";
        }


        return "";
      },

      /**
       * @description 上传用户头像
       */
      uploadUserImg(blob) {
        uni.showLoading();
        let _this = this;
        // 开始上传
        new UploadImg([blob], {
          complete: function (res) {
            console.log(res);
            uni.hideLoading();
            if (res.length) {
              _this.head_img = res[0].path;
              var formData = {
                head_img: res[0].id,
              };
              // _this.$api
              //   .post(global.apiUrls.editUserinfo, formData)
              //   .then((res) => {
              //     if (res.data.code == 1) {
              //       // 更新本地缓存
              //       uni.setStorageSync("USER_INFO", res.data.data.userinfo);
              //       // 更新global
              //       global.userInfo = res.data.data.userinfo;
              //     }
              //   });
            }
          },
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .cu-list.menu {
    margin-top: 0;
  }

  .demo text {
    margin: 10upx;
  }

  .demo-face {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    overflow: hidden;
  }

  .demo-face image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 60rpx;
  }

  .picker {
    background: #FF9300;
    width: 100%;
    line-height: 40px;
  }

  .head_list {
    background: #fff;
    padding: 20rpx 0;
    height: 152rpx;
    position: relative;

     &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 32rpx;
      width: 100%;
      height: 1px;
      background: #ddd;
      transform: scaleY(0.5);
    }
  }

  .other {
    width: 500rpx;
    text-align: right;
  }

  .address {
    display: inline-block;
    width: 110rpx;
  }

  .cu-item.arrow::before {
    color: #bfbfbf !important;
  }

  .cu-list.menu>.cu-item {
    height: 110rpx;
  }

  .address-select {
    // display: inline-block;
    width: 400rpx;
    // overflow: hidden;
    // white-space: nowrap;
    // text-overflow: ellipsis;
  }

  .content .title {
    display: inline-block;
    width: 160rpx;
    min-width: 160rpx;
  }

  .text-align-right {
    text-align: right;
  }
  .footer{
    position: fixed;
    left: 0rpx;
    bottom: 0rpx;
    width: 100%;
    height: 110rpx;;
    height: calc(110rpx + constant(safe-area-inset-bottom));
    height: calc(110rpx + env(safe-area-inset-bottom));
    background: #FFFFFF;
    .bottom-action {
      height: 110rpx;
      line-height: 110rpx;
      background: #FFFFFF;
      padding: 0;
      border-radius: 0;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FF9300;
      &::after{
        border: 0;
        border-radius: 0;
      }
    }
  }

.cu-list.menu-avatar>.cu-item:after, .cu-list.menu>.cu-item:after{
  left: 32rpx;
}
.header-popup{
  .height-20{
    height:20rpx;
    background: #f8f8f8;
  }
  .header-100{
    height:100rpx;
    line-height: 100rpx;
  }
}
/deep/ .sex-wrap .w-picker-view{
  height:228rpx;
}
/deep/ .birthday-wrap uni-picker-view .uni-picker-view-wrapper{
  padding:0 80rpx;
}
</style>
