<script setup>
import { reactive, toRefs, onMounted, ref, unref } from "vue";
import { Button, Toast } from "vant";
import "vant/es/toast/style";
import { getWxSign, getUser } from "@/api/api.js";
import { useRouter, useRoute } from "vue-router";
import { wxconfig } from "@/util/wxLogin";
import imgUrl_bg from "@/assets/img/bg_icon.png";
import imgUrl_card from "@/assets/img/card_bg.png";
const router = useRouter();

/**
 * 获取用户详情
 */
const userInfo = ref({});
const permissionList = ref([]);
const getUse = async () => {
  if (localStorage.getItem("Authorization")) {
    let res = await getUser();
    if (res.Ret === 200) {
      userInfo.value = res.Data;
      permissionList.value = userInfo.value.Permission.split(",") || [];
    }
  }
};

/**
 * 点击跳转推送规则
 */
const goChangeTag = () => {
  router.push("/revamp");
};
/**
 * 点击跳转小程序
 */
const handleLaunchFn = () => {
  console.log("sss");
  // alert('11')
};

const handleErrorFn = () => {
  // alert('ff')
  console.log("eee");
};

getUse();
wxconfig();
onMounted(() => {
  document.title = "登录";
  //资源加载
  function resourceLoad() {
    let imgs = [imgUrl_bg, imgUrl_card];
    for (let img of imgs) {
      let image = new Image();
      image.src = img;
      image.onload = (e) => {
        console.log("背景图预加载成功");
      };
      image.onerror = (e) => {
        console.log("背景图预加载失败", e);
      };
    }
  }
  resourceLoad();
  var btn = document.getElementById("launch-btn");
  btn.addEventListener("launch", function (e) {
    console.log("success");
  });
  btn.addEventListener("error", function (e) {
    console.log("fail", e.detail);
  });
  btn.addEventListener("ready", function (e) {
    console.log("ready	");
  });
});
</script>

<template>
  <div class="container-index">
    <div class="content">
      <p class="is-info" v-if="userInfo.HasPermission && userInfo.HasPermission != 3">您已登录成功！</p>
      <p class="is-info" v-else>暂无您的客户信息</p>
      <div class="synopsis">
        <p v-if="userInfo.HasPermission && userInfo.HasPermission != 3">我们将为您推送近期所有的研究更新与活动提醒</p>
      </div>
      <div class="personal-details">
        <div class="head-portrait">
          <img :src="userInfo.Headimgurl" v-if="userInfo.Headimgurl" />
          <img src="@/assets/img/init_imgurl.png" v-else />
        </div>
        <div class="details-item">
          <template v-if="userInfo.HasPermission == 1 || userInfo.HasPermission == 2">
            <p class="name">{{ userInfo.RealName }}</p>
            <p class="phone">{{ userInfo.Mobile }}</p>
            <p class="company">{{ userInfo.CompanyName }}</p>
          </template>
        </div>
      </div>
      <div class="authority">
        <template v-if="userInfo.HasPermission == 1">
          <div class="item" v-for="item in permissionList" :key="item">{{ item }}</div>
        </template>
        <template v-else-if="userInfo.HasPermission == 2">
          <div class="item">暂无权限</div>
        </template>
      </div>
      <div class="bottom-box">
        <p class="inform" v-if="userInfo.HasPermission == 1">您亦可在【推送规则】中更改您关注的赛道，让小助手更好地理解您的需求，为您降噪哦~</p>
        <p class="inform" v-else-if="userInfo.HasPermission == 2">当前无行业权限，可前往【查研观向】小程序申请开通试用权限</p>
        <p class="inform" v-else-if="userInfo.HasPermission == 3">请先前往【查研观向】小程序绑定您的联系方式并申请开通试用权限</p>
        <div class="bottom-btn" v-if="userInfo.HasPermission == 1" @click="goChangeTag">去更改</div>
        <div class="bottom-btn" v-else>
          去小程序
          <wx-open-launch-weapp id="launch-btn" class="wx-app" username="gh_a9d3744e1072" path="pages/index/index">
            <div v-is="'script'" type="text/wxtag-template">
              <div class="btn">&nbsp;</div>
            </div>
          </wx-open-launch-weapp>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container-index {
  width: 100%;
  height: 100vh;
  background: url("@/assets/img/bg_icon.png") no-repeat;
  background-size: 100% 100%;
  padding: 25% 15px 0;
  .content {
    width: 100%;
    height: 842px;
    padding: 60px 35px 0;
    background: url("@/assets/img/card_bg.png") no-repeat;
    background-size: 100% 100%;
    color: #fff;
    .is-info {
      font-size: 61px;
      font-weight: 500;
    }
    .synopsis {
      font-size: 28px;
      padding: 10px 0;
      height: 80px;
    }
    .personal-details {
      display: flex;
      .head-portrait {
        width: 126px;
        height: 126px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .details-item {
        margin-left: 30px;
        font-size: 28px;
        .name {
          font-size: 34px;
          font-weight: 500;
        }
        .phone {
          padding: 10px 0 5px;
        }
      }
    }
    .authority {
      height: 238px;
      width: 105%;
      overflow: hidden;
      padding-top: 10px;
      .item {
        width: 148px;
        height: 50px;
        font-size: 24px;
        border-radius: 4px;
        display: inline-block;
        margin: 20px 20px 0 0;
        text-align: center;
        line-height: 48px;
        border: 1px solid #e5cfb1;
        font-weight: 400;
        color: #e5cfb1;
      }
    }
    .bottom-box {
      font-size: 28px;
      color: #fff;
      text-align: center;
      .inform {
        margin-bottom: 50px;
      }
      .bottom-btn {
        width: 337px;
        height: 62px;
        background: linear-gradient(180deg, #e5cfb1 0%, #caaf8b 100%);
        border-radius: 78px;
        margin: 0 auto;
        line-height: 62px;
        font-size: 32px;
        font-weight: 500;
        color: #3e3d3c;
        position: relative; // 相对定位
        z-index: 0;
        
      }
      .wx-app {
        position: absolute; // 绝对定位
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        opacity: 0;
        .btn {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
