<template>
  <a-config-provider :locale="locale">
    <div id="app">
      <div class="alive">
        <!-- <div @click="asyncOpenUserInfo">同步打开userinfo modal</div> -->
        <userInfoModal ref="userInfoModal" :vipID="vipID"/>
      </div>
    </div>
  </a-config-provider>
</template>

<script>
import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
import userInfoModal from "./components/userinfo/userInfoModal.vue";
import WujieVue2 from "wujie-vue2";
export default {
  name: "App",
  components: {
    userInfoModal
  },
  data() {
    return {
      locale: zhCN, //英文切换中文
      vipID: "" // 用户id 必传
    };
  },
  created() {
    const props = window.$wujie?.props;
    if (props?.platform === "employ") {
      // 驿站后台
      const token = {
        isSelfSupport: 1, // 有编辑权限
        access_token: JSON.parse(sessionStorage.getItem("CX_STAGE_USERINFO"))
          .authorization
      };
      sessionStorage.setItem("CX_Common_UserInfo", JSON.stringify(token));
      //   this.vipID = JSON.parse(sessionStorage.getItem("userInfo")).id;
    } else if (props?.platform === "front") {
      // 运营平台
      const token = {
        isSelfSupport: 0, // 无编辑权限
        access_token: JSON.parse(sessionStorage.getItem("CX_STAGE_USERINFO"))
          .authorization
      };
      sessionStorage.setItem("CX_Common_UserInfo", JSON.stringify(token));
      //   this.vipID = JSON.parse(sessionStorage.getItem("userInfo")).id;
    }
    const { bus } = WujieVue2;
    // 通知主项目打开关闭
    bus.$on("openUserInfo", event => {
      if (event.status) {
        this.asyncOpenUserInfo();
        this.vipID = event.userId;
        bus.$emit("changeUserModal", true);
      }
    });
  },
  methods: {
    // 此方法用做用户信息打开使用
    // 1. 需要通过userId获取用户相关信息
    // 2. 因为这个组件可能要复用在创薪运营平台、运营平台、驿站端、企业端，不同的端需要不同方式的处理
    // 3. 如果要把相关数据存进session 中，需要做字段重名区分
    // 4. 需要同步获取数据之后再去调用visible = true
    // 5. 组件其中 isSelfSupport 字段是自营字段，但同时也是判断是否可以修改字段
    // 6. 关闭弹窗的时候把visible 改为false
    asyncOpenUserInfo() {
      this.$refs.userInfoModal.showDrawer();
    }
  }
};
</script>

<style lang="less">
@import "./assets/style/flex.css";
</style>
