<template>
  <div class="bindWechat">
    <s-header :name="$t('wechat.headerName')" :noback="false" />

    <!-- 内容区域 -->
    <div class="content">
      <!-- 欢迎标题 -->
      <div class="welcome">
        <h2 class="title">{{ $t("bindWechat.welcomeTitle") }}</h2>
        <p class="subtitle">{{ $t("bindWechat.welcomeSubtitle") }}</p>
      </div>

      <!-- 微信头像卡片 -->
      <div class="avatar-card">
        <div class="avatar-container">
          <van-image
            width="120px"
            height="120px"
            fit="cover"
            :src="wechatInfo.avatarUrl"
            radius="50%"
            class="avatar-image"
          />
        </div>
      </div>

      <!-- 底部按钮区域 -->
      <div class="action-buttons">
        <van-button
          v-if="wechatInfo.avatarUrl !== ''"
          round
          size="normal"
          class="cancel-btn"
          @click="unbindClick"
        >
          <van-icon name="close" class="btn-icon" size="20px" />
          {{ $t("bindWechat.unbind") }}
        </van-button>

        <van-button
          v-if="wechatInfo.avatarUrl === ''"
          round
          type="primary"
          class="bind-btn"
          @click="onSubmit"
        >
          <van-icon name="wechat" class="btn-icon" size="20px" />
          {{ $t("bindWechat.bindCommit") }}
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, ref } from "vue";
import { showSuccessToast, showFailToast, showConfirmDialog } from "vant";
import { bindWechat, getAvatar, unbindWechat } from "@/service/bindWechat";
import {
  setLocal,
  getLocal,
  navigatorLanguage,
  getLoginUser,
} 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() {
    let languageName = ref(getLocal("curLang"));
    const { t } = useI18n();

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

    const user = getLoginUser();

    // 解绑
    const unbindClick = async () => {
      showConfirmDialog({
        title: t("user.tips"),
        message: t("bindWechat.unbindTips"),
      })
        .then(async () => {
          const { data } = await unbindWechat({ adminId: user.id });
          if (data.code === "00000") {
            showSuccessToast(t("bindWechat.unbindSuccess"));
            setTimeout(() => {
              router.go(0);
            }, 1500);
          } else {
            showFailToast(data.message);
          }
        })
        .catch((error) => {
          console.error(error);
        });
    };

    // 绑定微信
    const onSubmit = async () => {
      try {
        const { data } = await bindWechat(user.id);
        if (data.code === "00000") {
          // 在当前窗口打开链接
          window.location.href = data.data;
          // 绑定成功
          showSuccessToast(t("bindWechat.bindSuccess"));
        } 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,
      unbindClick,
      wechatInfo,
    };
  },
  components: { sHeader },
};
</script>

<style lang="less" scoped>
@primary-color: #4d6add;
@light-blue: #5b86e5;
@light-cyan: #36d1dc;
@text-dark: #333;
@text-gray: #666;
@border-color: #e4e7ec;
@bg-color: #f8fafb;
@success-green: #4caf50;
@card-bg: #ffffff;
@radius: 16px;

.bindWechat {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  background: @bg-color;
}

.content {
  flex: 1;
  overflow: auto;
  overflow-x: hidden;
  width: 100%;
}

.welcome {
  text-align: center;
  margin-bottom: 40px;

  .title {
    font-size: 24px;
    font-weight: 600;
    color: @text-dark;
    margin-bottom: 12px;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 3px;
      background: linear-gradient(to right, @light-cyan, @light-blue);
      border-radius: 2px;
    }
  }

  .subtitle {
    font-size: 15px;
    color: @text-gray;
    line-height: 1.6;
    max-width: 320px;
    margin: 0 auto;
  }
}

.avatar-card {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.avatar-container {
  margin-bottom: 25px;

  .avatar-image {
    border: 3px solid white;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  }
}

.action-buttons {
  display: flex;
  justify-content: center;

  .cancel-btn {
    border: 1px solid @border-color;
    background: #fb725f;
    color: #f5f7ff;
    transition: all 0.3s ease;
    padding: 0 55px;

    .btn-icon {
      margin-right: 5px;
    }

    &:active {
      background: #f5f7ff;
    }
  }

  .bind-btn {
    background: linear-gradient(to right, @light-cyan, @light-blue);
    border: none;
    box-shadow: 0 5px 15px rgba(91, 134, 229, 0.4);
    transition: all 0.3s ease;
    padding: 0 55px;

    .btn-icon {
      margin-right: 5px;
    }

    &:active {
      transform: translateY(2px);
      box-shadow: 0 3px 10px rgba(91, 134, 229, 0.4);
    }
  }
}

// 响应式设计
@media (max-width: 480px) {
  .welcome {
    .title {
      font-size: 22px;
    }

    .subtitle {
      font-size: 14px;
    }
  }

  .avatar-container {
    .avatar-image {
      width: 100px;
      height: 100px;
    }
  }
}
</style>
