<template>
<<<<<<< HEAD
  <div style="height: 100%">
    <div class="jolkp">
      <div class="fan" :style="{ marginRight: statue == 0 ? '56%' : '70%' }">
        <span @click="hui(0)">消息</span>
      </div>
      <!-- <TUIContact v-else-if="statue==1"  :stu="2" /> -->
      <div @click="hui(1)" class="jolkp_h" v-if="statue == 0"></div>
      <div @click="fnkiopl" class="jolkp_l"></div>
      <!-- 弹出框 -->
      <div v-if="isPopupVisible" class="popup">
        <ul>
          <li @click="handleAddFriend">添加好友/群聊</li>
          <li @click="handleMenu()">发起群聊</li>
          <li>扫一扫</li>
        </ul>
      </div>
    </div>

    <div class="three">
      <div class="con">
        <div class="three_div1"></div>
        <div class="title">点赞</div>
      </div>
      <div class="con">
        <div class="three_div2"></div>
        <div class="title">关注</div>
      </div>

	  <div class="con">
        <div class="three_div3"></div>
        <div class="title">评论</div>
      </div>
    </div>
    <!-- 搜索添加 -->
    <TUIContactsea v-if="statue == 2" />
    <!-- 联系人 -->
    <TUIContact v-else-if="statue == 1"   style="height: 100%;" />
    <SelectFriend v-else-if="statue == 3" @con="confn" />
    <SelectFriendqlioa v-else-if="statue == 4" @concen="concen" />
    <!-- 会话 -->
    <TUIConversation style="height: 100%;" v-else />
  </div>
</template>

<script>
// 导入组件
import TUIConversation from "@/TUIKit/components/TUIConversation/index";
import TUIContact from "@/TUIKit/components/TUIContact/index";
import TUIContactsea from "@/TUIKit/components/TUIContact/indexsea";
import { TUILogin } from "@tencentcloud/tui-core";
import ContactSearch from "@/TUIKit/components/TUIContact/contact-search/index.vue";
import { TUIChatKit } from "@/TUIKit";
import SelectFriend from "@/TUIKit/components/TUIContact/select-friend/index.vue";
import SelectFriendqlioa from "@/TUIKit/components/TUIGroup/index.vue";
import TUICore, { ExtensionInfo, TUIConstants } from "@tencentcloud/tui-core";
import storage from "@/utils/storage.js";
import { getUserimInfo } from "@/api/members";
TUIChatKit.init();
let vueVersion = 2;
// vueVersion = 3;

export default {
  // 注册组件
  components: {
    TUIConversation,
    TUIContact,
    TUIContactsea,
    ContactSearch,
    SelectFriend,
    SelectFriendqlioa,
    TUIChatKit,
  },
  data() {
    return {
      statue: 0, //1联系人 2添加好友/群聊 0对话记录 3建群  4群名称
      isPopupVisible: false, // 控制弹出框的显示与隐藏
      isq: false,
    };
  },
  created() {},
  onShow() {
    // 每次进入页面时调用的方法
    //获取用户信息
    getUserimInfo()
      .then(({ data }) => {
        if (data.code == 200) {
          const par = data.result;
          TUILogin.login({
            SDKAppID: par.sdkAppId,
            userID: par.userID,
            userSig: par.userSig,
            useUploadPlugin: true, // If you need to send rich media messages, please set to true.
            framework: `vue${vueVersion}`, // framework used vue2 / vue3
          });
        } else {
          // 接口返回非 200 状态码，跳转登录页面
          uni.navigateTo({
            url: "/pages/passport/login",
          });
        }
      })
      .catch(() => {
        // 请求失败，跳转登录页面
        uni.navigateTo({
          url: "/pages/passport/login",
        });
      });
  },
  mounted() {},
  methods: {
    //完成跳转群名
    confn() {
      this.statue = 4;
    },
    concen() {
      this.statue = 0;
      this.isPopupVisible = false;
    },
    hui(index) {
      this.statue = index;
    },
    fnkiopl() {
      this.isPopupVisible = !this.isPopupVisible;
    },
    handleMenu() {
      const fn = [
        ...TUICore.getExtensionList(
          TUIConstants.TUISearch.EXTENSION.SEARCH_MORE.EXT_ID
        ),
      ];
      const item = fn[1];
      const {
        listener = {
          onClicked: () => {},
        },
      } = item;
      listener?.onClicked?.(item);
      this.statue = 3;
    },
    // 处理添加好友/群聊点击事件
    handleAddFriend() {
      this.statue = 2;
      this.isPopupVisible = false;
    },

    // // 打开会话列表
    // openConversationList() {
    // 	uni.navigateTo({
    // 		url: '/TUIKit/components/TUIConversation/index'
    // 	});
    // },
    // // 打开联系人
    // openContact() {
    // 	uni.navigateTo({
    // 		url: '/TUIKit/components/TUIContact/index'
    // 	});
    // },
  },
};
</script>

<style scoped>
uni-page-body,
html,
body,
page {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
}
.jolkp {
  height: 66px;
  display: flex;
  font-size: 15px;
  justify-content: end;
  /* 设置背景图 */
  background-image: url("@/static/im/Rectangle.png");
  /* 让背景图覆盖整个元素 */
  background-size: cover;
  /* 背景图不重复 */
  background-repeat: no-repeat;
}

.jolkp_l {
  width: 2rem;
  height: 2rem;
  background-image: url("@/static/im/Frame.png");
  /* 让背景图覆盖整个元素 */
  background-size: cover;
  /* 背景图不重复 */
  background-repeat: no-repeat;
  margin-top: 35px;
  margin-right: 20px;
}

.jolkp_h {
  width: 2rem;
  height: 2rem;
  background-image: url("@/static/im/user.png");
  /* 让背景图覆盖整个元素 */
  background-size: cover;
  /* 背景图不重复 */
  background-repeat: no-repeat;
  margin-top: 35px;
  margin-right: 20px;
}

.popup {
  position: absolute;
  top: 65px;
  /* 调整弹出框的位置 */
  right: 5px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 3;
}

.popup ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.popup li {
  padding: 10px 20px;
  cursor: pointer;
}

.popup li:hover {
  background-color: #f0f0f0;
}

.fan {
  width: 10%;
  height: "100%";
  font-size: 18px;
  display: flex;
  align-items: end;
  padding: 5px;
}

.three {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgb(255, 255, 255);
}
.con{
	width: 100%;
	height: 100%;
	display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.three_div1 {
  height: 3rem;
  width: 40%;
  background-image: url("@/static/im/kf.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: end;
}

.three_div2 {
	width: 40%;
  height: 3rem;
  background-image: url("@/static/im/hy.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 40%;
}

.three_div3 {
  height: 3rem;
  background-image: url("@/static/im/da.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 40%;
}

</style>
=======
	<div>im</div>
</template>
>>>>>>> c54a5f1b1facd9cb72935a34c87d845e48157c03
