<template>
  <view>
    <u-navbar :custom-back="router" title="我的设置"></u-navbar>
    <view class="flex-col group">
      <view class="flex-col section_2">
        <!-- <text class="text_1">账号设置</text> -->
        <view class="flex-col group_1">
          <view class="justify-between group_2 flex-center" @click="goEditpwd">
            <view class="flex-center">
              <image class="image-left image_3" src="/static/common/img/my/account.png"/>
              <text>密码设置</text>
            </view>
            
            <image class="image_2 image_3" src="/static/common/img/row_right.png"/>
          </view>
          <view class="section_3"></view>
          <view class="justify-between group_3 flex-center" @click="goAuthentication">
            <view class="flex-center">

              <image class="image-left image_3" src="/static/common/img/my/agreement.png"/>
              <text>官方认证</text>
            </view>
            <image class="image_2 image_4" src="/static/common/img/row_right.png"/>
          </view>
          <view class="section_3"></view>
          <view class="justify-between group_3 flex-center" @click="goInfo">
            <view class="flex-center">

              <image class="image-left image_3" src="/static/common/img/my/person.png"/>
              <text>个人信息</text>
            </view>
            <image class="image_2 image_5" src="/static/common/img/row_right.png"/>
          </view>
          <!-- <view class="section_3"> </view>
          <view class="justify-between group_4" @click="goRealDetail">
            <text>实名认证</text>
            <image src="/static/common/img/row_right.png" class="image_2 image_5" />
          </view> -->
        </view>
      </view>
      <view class="flex-col section_4">
        <view class="flex-center">

          <image class="image-left image_3" src="/static/common/img/my/privacy.png"/>
          <text class="text_5">隐私设置</text>
        </view>
        <view class="flex-col group_5" style='margin-top:0;'>
          <!-- <view class="justify-between group_6">
            <text class="text_6">获取定位</text>
            <u-switch @change="onChange" class="switch" v-model="switchs.isLocation"></u-switch>
          </view> -->
          <view class="section_3" style='box-shadow:none;'></view>
          <view class="justify-between group_7">
            <text class="text_7">不把我推荐给可能认识的人</text>
            <u-switch v-model="switchs.isPush" class="switch" @change="onChange"></u-switch>
          </view>
        </view>
      </view>
      <!-- <view class="flex-col section_5">
        <text class="text_8">通用设置</text>
        <view class="justify-between group_8">
          <text class="text_9">消息提示</text>
          <u-switch @change="onChange" class="switch" v-model="switchs.isMessage"></u-switch>
        </view>
      </view> -->
      <view class="justify-between section_6 flex-center" @click="onFeedback">
        <view class="flex-center">
          <image class="image-left image_3" src="/static/common/img/my/evaluation.png"/>
          <text>意见反馈</text>
        </view>
        <image class="image_2 image_9" src="/static/common/img/row_right.png"/>
      </view>
      <view class="flex-col items-center button" @click='show=true'>
        <text>退出登录</text>
      </view>
    </view>
    <!-- 修改密码 -->
    <u-mask :show="editPasswrod">
      <view class="editPwd">
        <view class="form">
          <div class="input">
            <u-input v-model="form.oldPwd" :border="false" :type="'text'" placeholder="旧密码"/>
          </div>
          <div class="input">
            <u-input v-model="form.newPwd" :border="false" placeholder="新密码" type="password"/>
          </div>
          <div class="input">
            <u-input v-model="form.repeatPwd" :border="false" placeholder="重复密码" type="password"/>
          </div>
          <!-- <div class="codeInput">
            <u-input v-model="form.code" :type="'number'" :border="false" placeholder="验证码" />
            <u-button class="codeBtn" type="primary" size="medium">8556</u-button>
          </div> -->
          <view style="margin-bottom: 20rpx;color:grey;">
            提示：密码长度应该大于5，必须包含字母、数字、特殊字符，且不能包含中文!
          </view>
          <div class="btns">
            <u-button class="btn" @click="editPwd(false)">取消</u-button>
            <u-button class="btn" type="primary" @click='editPwd(true)'>确认</u-button>
          </div>
        </view>
      </view>
    </u-mask>
    <u-top-tips ref="uTips" :navbar-height="0" :z-index='999999'></u-top-tips>
    <u-modal v-model="show" :content="'确认退出'" :show-cancel-button='true' @confirm='logOut'></u-modal>
    <u-toast ref="uToast"/>
  </view>
</template>

<script>
import {aesEncrypt} from '@/utils/encrypt.js'
export default {
  data() {
    return {
      show: false,
      editPasswrod: false,
      form: {
        oldPwd: "",
        newPwd: "",
        repeatPwd: "",
      },
      switchs: {
        isLocation: false,
        isPush: false,
        isMessage: false,
      },
      EdcationList:[],
    };
  },
  onLoad() {
    this.switchs.userId = this.vuex_user.id
    this.switchs.isLocation = this.vuex_user.isLocation
    this.switchs.isMessage = this.vuex_user.isMessage
    this.switchs.isPush = this.vuex_user.isPush
    this.Mypage();
  },
  onShow(){

    this.getUser()
  },
  methods: {
    getUser() {
      this.$u.apiList.GetUser({
        userId: this.vuex_user.id
      }).then((res) => {
        this.$u.vuex('vuex_user', res.user)
        this.$u.vuex('vuex_user_hobby', res.lableList)
      })
    },
    onChange(e) {
      this.$u.apiList.Setting(this.switchs).then((res) => {
        this.getUser()
      })
    },
    editPwd(state) {
      if (state) {
        if (this.form.oldPwd === "") {
          // return this.$tips("请输入旧密码", "error");
          return this.$refs.uToast.show({
            title: '请输入旧密码',
            type: 'error',
          })
        }
        if (this.form.newPwd === "") {
          // return this.$tips("请输入新密码", "error");
          return this.$refs.uToast.show({
            title: '请输入新密码',
            type: 'error',
          })
        }
        if (this.form.oldPwd == this.form.newPwd) {
          // return this.$tips("新密码不能与旧密码一致", "error");
          return this.$refs.uToast.show({
            title: '新密码不能与旧密码一致',
            type: 'error',
          })
        }
        if (this.form.newPwd.length < 5) {
          // return this.$tips("您的密码长度应该大于5", "error");
          return this.$refs.uToast.show({
            title: '您的密码长度应该大于5',
            type: 'error',
          })
        }
        let reg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[\W_]).{5,}$/
        if (!reg.test(this.form.newPwd)) {
          // return this.$tips("密码必须包含字母、数字、特殊字符，且不能包含中文!", "error");
          return this.$refs.uToast.show({
            title: '密码必须包含字母、数字、特殊字符，且不能包含中文!',
            type: 'error',
          })
        }
        if (this.form.repeatPwd === "") {
          // return this.$tips("请确认密码", "error");
          return this.$refs.uToast.show({
            title: '请确认密码',
            type: 'error',
          })
        }
        if (this.form.repeatPwd !== this.form.newPwd) {
          // return this.$tips("请确认两次密码是否一致", "error");
          return this.$refs.uToast.show({
            title: '请确认两次密码是否一致',
            type: 'error',
          })
        }
        const data = {
          userId: this.vuex_user.id,
          oldPassword: aesEncrypt(this.form.oldPwd),
          password: aesEncrypt(this.form.repeatPwd),

        }
        this.$u.api.myChangePassword(data).then((res) => {
          this.editPasswrod = false;
          // this.$tips("修改成功");
          this.$refs.uToast.show({
            title: '修改成功',
            type: 'success',
          })
          this.form.newPwd = ''
          this.form.oldPwd = ''
          this.form.repeatPwd = ''
        })
            .catch((err) => {
              // return this.$tips(err.error, "error");
              return this.$refs.uToast.show({
                title: err.error,
                type: 'error',
            })
          })
      } else {
        this.editPasswrod = false,
            this.form.newPwd = ''
        this.form.repeatPwd = ''
      }
    },
    // 退出登录
    logOut() {
      this.$u.vuex("vuex_msgList", '');
      this.$u.vuex('vuex_user', '')
      this.$u.vuex('vuex_token', '')
      uni.clearStorage();
      this.$u.route({
        url: "/pages/login/login/login",
      });
    },
    // 个人信息
    goInfo() {
      this.$u.route({
        url: "/pages/my/myDetails/myDetails",
        params: {},
      });
    },
    goRealDetail() {
      this.$u.route({
        url: "/pages/my/realDetail/realDetail",
        params: {},
      });
    },
    async Mypage() {
      const data = {
        userId: this.vuex_user.id,
      }
     const res = await  this.$u.apiList.MyPage(data)
     this.EdcationList = res.edcationList
    
    },
    // 官方认证
    goAuthentication() {
          // 如果是学生 
      if([0,2].includes(this.vuex_user.userType)){
          if(!this.EdcationList.length){
          return  this.$refs.uToast.show({
            title: '请先进行教育经历认证',
            type: 'warning',
            })
          }
          const findRow = this.EdcationList.find(x=>x.isSelected === true);
          // console.log(findRow,'findRow--')
          if([0,2].includes(findRow.certifyStatus)){
            return  this.$refs.uToast.show({
              title: '请先进行教育经历认证',
              type: 'warning',
            })
          }
        
      }
      // 如果是教师
      if([1].includes(this.vuex_user.userType)){
        // 校验当前学校是否审核通过
        if(!this.EdcationList.length){
          return  this.$refs.uToast.show({
            title: '请先进行任职学校认证',
            type: 'none',
            })
          }
          const findRow = this.EdcationList.find(x=>x.isSelected === true);
          if([0,2].includes(findRow.certifyStatus)){
            return  this.$refs.uToast.show({
              title: '请先进行任职学校认证',
              type: 'none',
            })
          }
      }
      this.$u.route({
          url: "/pages/my/authentication/authentication",
          params: {},
        });
    },
    goEditpwd(){
      this.$u.route({
          url: "/pages/my/mySeting/mySetPwd"
        });
    },
    //返回上一级
    router() {
      uni.switchTab({
        url: '/pages/my/my/my'
      });
    },
    //意见反馈
    onFeedback() {
      this.$u.route({
        url: '/pages/my/Feedback/Feedback'
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.editPwd {
  .form {
    width: 80%;
    background-color: #ffffff;
    border-radius: 14rpx;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30rpx;

    .input {
      background-color: #f6f7fa;
      border-radius: 14rpx;
      font-size:28rpx;
      color: #b4b6bd;
      margin-bottom: 40rpx;
      padding: 10rpx 20rpx;
    }

    .codeInput {
      display: flex;
      justify-content: space-between;
      margin-bottom: 40rpx;

      ::v-deep .u-input {
        background-color: #f6f7fa;
        border-radius: 14rpx;
        font-size:28rpx;
        color: #b4b6bd;
        padding: 10rpx 10rpx !important;
      }

      .codeBtn {
        width: 100rpx;
        height: 100rpx;
        background-color: #eaf5ff;
        border-radius: 14rpx;
        font-size: 52rpx;
        line-height: 46rpx;
        color: #2e9bff;
        margin-left: 24rpx;
      }
    }

    .btns {
      display: flex;
      justify-content: space-between;

      .btn {
        width: 40%;
      }
    }
  }
}

.image_2 {
  width: 15rpx;
  height: 28rpx;
}
.image-left{
  width: 88rpx;
  height: 88rpx;
}

.section_3 {
  background-color: rgb(255, 255, 255);
  box-shadow: 2rpx 2rpx rgba(29, 38, 46, 0.08);
  height: 10rpx;
  position: relative;
}

.switch {
  width: 90rpx;
}

.group {
  padding: 20rpx 0 10rpx;
  flex: 1 1 auto;
  overflow-y: auto;
}

.section_2 {
  width: calc(100% - 80rpx);
  margin: 0 auto;
  border-radius: 30rpx;
  padding: 46rpx 0 34rpx 26rpx;
  background-color: rgb(255, 255, 255);
}

.section_4 {
  width: calc(100% - 80rpx);
  margin: 20rpx auto;
  border-radius: 30rpx;
  padding: 46rpx 40rpx 48rpx 26rpx;
  background-color: rgb(255, 255, 255);
}

.section_5 {
  width: calc(100% - 80rpx);
  margin: 0 auto;
  border-radius: 30rpx;
  padding: 46rpx 40rpx 34rpx 26rpx;
  background-color: rgb(255, 255, 255);
}

.section_6 {
  width: calc(100% - 80rpx);
  margin: 0 auto;
  border-radius: 30rpx;
  padding: 46rpx 34rpx 38rpx 26rpx;
  color: rgb(55, 59, 72);
  font-size: 34rpx;
  line-height: 34rpx;
  white-space: nowrap;
  background-color: rgb(255, 255, 255);
}

.button {
  margin-top: 34rpx;
  padding: 30rpx 0 30rpx;
  align-self: center;
  color: #ef3920;
  font-size: 34rpx;
  line-height: 34rpx;
  letter-spacing: 6rpx;
  white-space: nowrap;
  background-color: #fff;
  border-radius: 60rpx;
  width: calc(100% - 100rpx);
  border: 2rpx solid #fac3bc;
  cursor: pointer;
}

.text_1 {
  color: rgb(55, 59, 72);
  font-size: 34rpx;
  line-height: 38rpx;
  white-space: nowrap;
}

.group_1 {
  // margin-top: 58rpx;
  color: rgb(55, 59, 72);
  font-size: 34rpx;
  line-height: 34rpx;
  white-space: nowrap;
}

.text_5 {
  color: rgb(55, 59, 72);
  font-size: 34rpx;
  line-height: 34rpx;
  white-space: nowrap;
}

.group_5 {
  margin-top: 58rpx;
  color: rgb(55, 59, 72);
  font-size: 34rpx;
  line-height: 34rpx;
  white-space: nowrap;
}

.text_8 {
  color: rgb(55, 59, 72);
  font-size: 34rpx;
  line-height: 34rpx;
  white-space: nowrap;
}

.group_8 {
  margin-top: 20rpx;
  padding-left: 10rpx;
  color: rgb(55, 59, 72);
  font-size: 34rpx;
  line-height: 34rpx;
  white-space: nowrap;
}

.image_9 {
  margin-top: 20rpx;
}

.group_2 {
  padding: 0 10rpx 14rpx;
}

.group_3 {
  padding: 34rpx 10rpx 10rpx;
}

.group_4 {
  padding-top: 28rpx;
}

.group_6 {
  padding: 0 2rpx 4rpx;
}

.group_7 {
  padding-top: 26rpx;
}

.text_9 {
  margin: 10rpx 0 10rpx;
}

.image_3 {
  margin-right: 26rpx;
  // margin-top: 10rpx;
}

.image_4 {
  margin-right: 26rpx;
  margin-top: 10rpx;
}

.image_5 {
  margin-right: 26rpx;
  margin-top: 4rpx;
}

.text_6 {
  margin: 10rpx 0 10rpx;
}


.text_7 {
  margin-top: 6rpx;
}
.flex-center{
  display: flex;
  align-items: center;
}
</style>
