<template>
  <!-- 绑定微信 -->
  <div class="bindWechat">
    <s-header :name="$t('wechat.headerName')" :noback="false"></s-header>
    <div class="loginFormBox">
      <van-form @submit="onSubmit">
        <!-- 微信头像 -->
        <div style="display: flex;justify-content: center;align-items: center">
          <van-image width="100px" height="100px" :src="wechatInfo.avatarUrl" fit="cover" radius="50%"
            style="margin: auto" />
        </div>
        <br>
        <br>
        <br>
        <div class="buttonBox">
          <!-- 取消绑定微信，返回登录页 -->
          <van-button round type="primary" class="register" @click="cancelClick">{{ $t('bindWechat.cancel') }}
          </van-button>
          <!-- 用户回车，默认触发 form 表单提交操作 -->
          <van-button round type="primary" native-type="submit" id="bind-btn">{{ $t('bindWechat.bindCommit') }}
          </van-button>
        </div>

      </van-form>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, ref } from "vue";
import { showSuccessToast, showFailToast } from 'vant';
import { bindWechat, getAvatar } from "@/service/bindWechat";
import { setLocal, getLocal, navigatorLanguage, getLoginUser, styleUrl } from "@/common/js/utils";
import sHeader from "@/components/SimpleHeader";
import logiLogoImgUrl from "@/assets/login/logo.png";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";

export default {
  setup: function () {
    let languageName = ref(getLocal("curLang"));
    // eslint-disable-next-line no-unused-vars
    const { t } = useI18n();

    const checked = ref(false); // 是否记住密码状态
    const userName = ref("");
    const userPwd = ref("");
    const router = useRouter();
    const sys = ref(null);
    // 页面初始化
    onMounted(async () => {
      // 加载样式
      styleUrl('bindWechat');
      // localStorage.clear();
      // 如果没有语言缓存
      if (!getLocal("curLang")) {
        //  根据浏览器语言重新缓存到localstorage
        setLocal("curLang", navigatorLanguage());
        languageName.value = getLocal("curLang");
      }
    });

    const user = getLoginUser();

    // 返回用户页
    const cancelClick = async () => {
      await router.push("/user");
    }

    // 绑定微信
    const onSubmit = async () => {
      try {
        const { data } = await bindWechat(
          user.id
        );
        if (data.code === "00000") {
          console.log(data.data);
          // 在当前窗口打开链接
          window.location.href = data.data;
          // 绑定成功
          showSuccessToast("绑定成功")
        } else {
          showFailToast("调用微信授权失败");
        }
      } catch (error) {
        console.error(error);
        showFailToast("绑定失败");
      }
    };

    // 存储微信头像的链接
    const wechatInfo = reactive({
      avatarUrl: ''
    })

    // 在页面加载时调用后端接口获取信息
    onMounted(async () => {
      try {
        const { data } = await getAvatar(user.id);
        wechatInfo.avatarUrl = data.data;
      } catch (error) {
        console.error("获取微信头像失败");
      }
    })

    return {
      logiLogoImgUrl,
      checked,
      userName,
      userPwd,
      onSubmit,
      sys,
      cancelClick,
      wechatInfo
    };
  },
  components: { sHeader },
};
</script>

<style lang="less" scoped>
@import "../common/style/mixin";
</style>
