<template>
  <view class="container">
    <view class="bg">
      <image
        class="bgImg"
        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png"
        mode="scaleToFill"
      />
    </view>
    <view class="Return" @click="onBack">
      <image
        class="ReturnImg"
        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
        mode="scaleToFill"
      />
    </view>
    <view class="title">设置</view>

    <view class="contentbox">
      <view class="content">
        <!-- 修改头像 -->
        <button class="login-btn" open-type="chooseAvatar" @chooseavatar="Userinfo">
          <view class="avatarmodify">
            <view class="avatarmodify-item">头像</view>
            <view class="avatarmodify-img">
              <image class="avatar" :src="userinfo"></image>
              <image
                class="more"
                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/More.png"
                mode="scaleToFill"
              />
            </view>
          </view>
        </button>
        <!-- 修改昵称 -->
        <view class="Nickname" @click="inputNickname">
          <view class="avatarmodify-item">昵称</view>
          <view class="NicknameInput">
            <view class="NicknameInput-name">{{ name }}</view>
            <image
              class="more"
              src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/More.png"
              mode="scaleToFill"
            />
          </view>
        </view>
        <!-- 修改邮箱 -->
        <view class="Nickname" @click="modifyEmailAddress">
          <view class="avatarmodify-item">邮箱</view>
          <view class="NicknameInput">
            <view class="NicknameInput-name">{{
              email == "" || email == null ? "未绑定" : email
            }}</view>
            <image
              class="more"
              src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/More.png"
              mode="scaleToFill"
            />
          </view>
        </view>
        <!-- 修改密码 -->
        <view class="Nickname" @click="modifyPassword">
          <view class="avatarmodify-item">密码</view>
          <view class="NicknameInput">
            <view class="NicknameInput-name">{{ havaPassword == true ? "" : "未设置" }}</view>
            <image
              class="more"
              src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/More.png"
              mode="scaleToFill"
            />
          </view>
        </view>
        <!-- 扫码登录web端 -->
        <view class="Nickname" @click="scanCode">
          <view class="avatarmodify-item">扫码</view>
          <view class="NicknameInput">
            <image
              class="more"
              src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/More.png"
              mode="scaleToFill"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from "../../components/request.js";
import postFile from "../../components/postFile.js";
import generateFileName from "../../components/generateFileName.js";
import { goEasylogin, goEasylogout } from "../../components/goEasyTool/tool.js";

export default {
  inject: ["$global"],
  data() {
    return {
      userinfo: "",
      name: "",
      id: "",
      info: {},
      useravatar: "",
      email: null,
      havaPassword: false,
    };
  },
  onLoad(option) {
    this.id = option.id;
    this.getUserInfo();
  },
  onShow() {
    this.getUserInfo();
  },
  methods: {
    //获取个人信息
    getUserInfo() {
      request({
        url: "user/getUserInfo",
        method: "POST",
        data: {
          id: this.id,
        },
        userInfo: true,
      }).then((res) => {
        if (res.code == 200) {
          this.userinfo = res.data;
          uni.setStorageSync("userinfo", res.data);
          setTimeout(() => {
            uni.getStorage({
            key: "userinfo",
            success: (res) => {
              this.id = res.data.id;
              this.name = res.data.nickName;
              this.userinfo = this.useravatar = res.data.headerIcon;
              this.email = res.data.email;
              this.havaPassword = res.data.havaPassword;
            },
          });
          }, 300);
        } else {
          console.log(res.msg);
        }
      });
    },

    //修改密码
    modifyPassword() {
      uni.navigateTo({
        url:
          "/pages/Setting/settingmod/changePassword?id=" +
          this.id +
          "&havaPassword=" +
          this.havaPassword,
      });
    },
    // 修改邮箱
    modifyEmailAddress() {
      uni.navigateTo({
        url:
          "/pages/Setting/settingmod/changeEmail?email=" + this.email + "&id=" + this.id,
      });
    },
    // 修改昵称
    inputNickname() {
      uni.navigateTo({
        url:
          "/pages/Setting/settingmod/changeNickname?name=" + this.name + "&id=" + this.id,
      });
    },
    // 扫码登录web端
    scanCode() {
      uni.scanCode({
        success: (res) => {
          const data = JSON.parse(res.result);
          if (data.type === "qrcdoe") {
            request({
              url: "user/scan",
              method: "POST",
              data: {
                uuid: data.uuid,
                userId: this.id,
              },
              userInfo: true,
            })
              .then((res) => {
                if (res.code === 200) {
                  uni.showToast({
                    title: "登录成功",
                    icon: "success",
                  });
                } else {
                  uni.showToast({
                    title: res,
                    icon: "none",
                  });
                }
              })
              .catch((err) => {
                uni.showToast({
                  title: "登录失败",
                  icon: "none",
                });
              });
          }
          // 其他类型暂不处理
        },
      });
    },
    onBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 选择头像
    async Userinfo(e) {
      const { avatarUrl } = e.detail;
      this.userinfo = avatarUrl;
      this.changeHeaderIcon();
    },
    // 修改头像
    changeHeaderIcon() {
      goEasylogout(this.$goeasy);
      uni.showLoading({
        title: "修改中...",
        mask: true,
      });
      postFile({
        path: this.userinfo,
        name: generateFileName(),
      })
        .then((res) => {
          request({
            url: "user/updateUserInfo",
            method: "POST",
            data: {
              id: this.id,
              headerIcon: res.split("/").pop(),
              nickName: this.name,
            },
            userInfo: true,
          }).then((ress) => {
            console.log("修改调用返回", ress);
            if (ress.code === 200) {
              uni.showToast({
                title: "修改成功",
                icon: "success",
              });
              uni.setStorageSync("userinfo", ress.data.info);
              goEasylogin(
                this.$goeasy,
                String(ress.data.info.id),
                ress.data.info.headerIcon,
                ress.data.info.nickName
              );
              uni.hideLoading();
              //```````````````````````````````````````````````````````````````````````登录成功后跳转回原页面 或 首页
              uni.navigateBack({
                delta: 1,
              });
              //````````````````````````````````````````````````````````````````````
            } else {
              uni.hideLoading();
              uni.showToast({
                title: ress.msg,
                icon: "none",
              });
            }
          });
        })
        .catch((err) => {
          uni.hideLoading();
          uni.showToast({
            title: "上传失败",
            icon: "none",
          });
        });
    },
  },
};
</script>

<style scoped>
.bg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: -1;
}
.bgImg {
  width: 100%;
  height: 100%;
}
.Return {
  position: fixed;
  left: 35rpx;
  top: 120rpx;
  width: 46rpx;
  height: 46rpx;
  z-index: 2;
}
.title {
  position: fixed;
  top: 120rpx;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 34rpx;
  color: #100e0f;
  font-weight: bold;
  z-index: 1;
}
.ReturnImg {
  width: 100%;
  height: 100%;
}
.contentbox {
  position: absolute;
  top: 200rpx;
  left: 0rpx;
  right: 0rpx;
  bottom: 0rpx;
}
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.avatarmodify {
  width: 94%;
  height: 100rpx;
  background-color: #fff;
  padding-left: 3%;
  padding-right: 3%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.avatarmodify-item {
  font-size: 24rpx;
  color: #100e0f;
  line-height: 100rpx;
  font-weight: bold;
}
.avatarmodify-img {
  display: flex;
  align-items: center;
}
.login-btn {
  width: 100%;
  height: 100rpx;
  padding: 0;
  margin: 0;
  border: none;
  background-color: #fff;
  border-radius: 0rpx;
  display: flex;
}
.login-btn::after {
  border: none;
  border-radius: 0rpx;
}
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 10rpx;
}
.more {
  width: 15rpx;
  height: 30rpx;
  margin-left: 30rpx;
}
.Nickname {
  width: 94%;
  height: 100rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 3%;
  padding-right: 3%;
  background-color: #fff;
  border-top: 1rpx solid #f0f0f0;
}
.NicknameInput {
  display: flex;
  align-items: center;
}
.NicknameInput-name {
  font-size: 24rpx;
  color: #bdbdbd;
  line-height: 100rpx;
  font-weight: bold;
}
</style>
