<template>
  <view class="container">
    <button class="login-btn" open-type="chooseAvatar" @chooseavatar="Userinfo">
      <image class="avatar" :src="userinfo"></image>
    </button>
    <input
      type="nickname"
      class="weui-input"
      placeholder="请输入昵称"
      @blur="inputName"
    />
    <button class="weui-btn" @click="wxLogin">登录</button>
  </view>
</template>

<script>
import request from "../../components/request.js";
import postFile from "../../components/postFile.js";
import generateFileName from "../../components/generateFileName.js";
import { useCounterStore } from "@/stores/counter";
const counter = useCounterStore();

export default {
  inject: ["$global"],
  data() {
    return {
      userinfo:"",
      name: "",
      id: "",
      info: {},
      userSig: "",
      lastPage: "",
      picture: "",
      Filename: generateFileName(),
    };
  },
  onLoad(option) {
    uni.getStorage({
      key: "userinfo",
      success: (res) => {
        this.id = res.data.id;
      },
    });
    uni.getStorage({
      key: "userSig",
      success: (res) => {
        this.userSig = res.data;
      },
    });
    uni.getStorage({
      key: "lastPage",
      success: (res) => {
        this.lastPage = "/" + res.data;
      },
      fail: () => {
        this.lastPage = "/pages/Home/Home";
      },
    });
    // const { info } = option;
    // this.id = JSON.parse(info).id
  },
  methods: {
    // 输入昵称
    inputName(e) {
      this.name = e.detail.value;
    },
    // 选择头像
    async Userinfo(e) {
      const { avatarUrl } = e.detail;
      this.userinfo = avatarUrl;
    },
    // 微信登录
    async wxLogin(e) {
      if (
        this.name !== "" &&
        this.userinfo !== ""
      ) {
        uni.showLoading({
          title: "登录中...",
          mask: true,
        });
        const { code } = await uni.login({
          provider: "weixin",
          onlyAuthorize: true,
        });
        postFile({
          path: this.userinfo,
          name: this.Filename,
        })
          .then((ress) => {
            this.picture = ress.split("/").pop();
            const res = request({
              url: "user/inputUserInfo",
              method: "POST",
              data: {
                id: this.id,
                headerIcon: this.Filename,
                nickName: this.name,
                code,
                usersig: this.userSig.userSig,
              },
              userInfo: false,
            }).then((res) => {
              if (res.code === 200) {
                uni.showToast({
                  title: "登录成功",
                  icon: "success",
                });
                uni.setStorageSync("userinfo", res.data.info);
                counter.$patch({ myitem: res.data.info });
                uni.hideLoading();
                //```````````````````````````````````````````````````````````````````````登录成功后跳转回原页面 或 首页
                uni.reLaunch({
                  url: this.lastPage,
                });
                //````````````````````````````````````````````````````````````````````
              } else {
                uni.showToast({
                  title:  res.msg,
                  icon: "none",
                });
              }
            });
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        uni.showToast({
          title: "请填写头像昵称",
          icon: "success",
          duration: 3000,
        });
      }
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom, #11cb2a6e, #2574fc6d);
}
.login-btn {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  padding: 0px;
  margin-bottom: 60rpx;
}
.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.weui-input {
  width: 80%;
  text-align: center;
  margin-bottom: 40rpx;
}
.weui-btn {
  width: 40%;
  margin-top: 20rpx;
  background-color: #11cb2a00;
  color: #fff;
}
</style>
