<template>
  <div>
    <!-- 新区域，放在头部 -->
   <el-row style="display: flex; justify-content: center;">
		
      <el-col :span="24">
        <div style="width:100%;height:68px;background-color:#3c80ff;">
          <el-row>
            <el-col :span="6">
              <el-input
                style="width: 80%;margin-top: 20px;margin-left:10px;"
                :suffix-icon="Search"
              />
            </el-col>

            <el-col :span="6">
				 <span style="display: flex;  margin-top: 15px;">
				    <el-avatar
				      :src="pic"
				    />
				    <span style="margin-left:5px;margin-top: 9px;">{{name}}</span>
				    <el-switch
					  style="margin-top: 4px;--el-switch-on-color: #13ce66; --el-switch-off-color: #b6bac1;"
					  v-model="lineStatus"
				      class="ml-2"
				      width="60"
				      inline-prompt
				      active-text="在线"
				      inactive-text="下线"
					  @change="handleSwitchChange"
					  
				    />
				  </span>
            </el-col>
            <el-col :span="6">
              <el-button @click="out" size="small" round style="margin-top:23px;margin-left:75%">退出</el-button>
            </el-col>

            <el-col :span="6">
              <el-menu
			  background-color="#3c80ff"
			  text-color="white"
			  active-text-color="white"
				  style="width:100%;display: flex;"
                >
                  <el-menu-item @click="userInfo" style="width:33%;height:70px" index="1">客户信息</el-menu-item>
                  <el-menu-item @click="zuoji" style="width:33%;height:70px" index="2">他的足迹</el-menu-item>
                  <!-- <el-menu-item style="width:34%;height:70px" index="3">商品信息</el-menu-item> -->
               </el-menu>
				
            </el-col>
          </el-row>

        </div>
      </el-col>
    </el-row>

    <!-- 原有的三个区域 -->
    <el-row style="display: flex; justify-content: center;">
      <!-- 会话列表 -->
      <el-col :span="6">
        <ContentWrap>
          <KeFuConversationList ref="keFuConversationRef" @change="handleChange"/>
        </ContentWrap>
      </el-col>

      <!-- 会话详情（选中会话的消息列表） -->
      <el-col :span="12">
      
          <KeFuMessageList ref="keFuChatBoxRef" @change="getConversationList"/>
      
      </el-col>

      <!-- 会员足迹（选中会话的会员足迹） -->
      <el-col :span="6">
        <ContentWrap v-show="chick == '2'">
          <MemberBrowsingHistory ref="memberBrowsingHistoryRef"/>
        </ContentWrap>
		
		<ContentWrap v-show = "chick == '1'">
		  <div style="height: 522px ;" >
		  	<div>
		  		<span style="display: flex;">
		  	   <el-avatar
		  		 style="border: 1px solid #f8f9ee;"
		  	     :src="user.avatar"
		  	   />
		  	   <span style="margin-left:5px;margin-top: 9px;">{{user.nickname}}</span>
		  	 </span>
		  	</div>
		  	
		  	 <el-divider style="border-color: #f5f5f5;margin-top: 15px;margin-bottom:15px;" />
		  	 <div>
		  		<span style="color: #5d5d59;font-size: 13px ;">手机号</span><span style="margin-left: 47px;font-size: 14px ;">{{user.mobile}}</span>
		  	 </div>
		  	 <div style="margin-top: 5px;">
		  	 	<span style="color: #5d5d59;font-size: 13px ;">分组</span><span style="margin-left: 60px;font-size: 14px ;">{{user.groupName}}</span>
		  	 </div>
		  	 <div  style="margin-top: 5px;">
		  	 	<span style="color: #5d5d59;font-size: 13px ;">用户标签</span><span style="margin-left: 33px;font-size: 14px ;">小客户</span>
		  	 </div>
		  	 <el-divider style="border-color: #f5f5f5;margin-top: 15px;margin-bottom:15px;" />
		  	 
		  	 <div>
		  	 	<span style="color: #5d5d59;font-size: 13px ;">用户等级</span><span style="margin-left: 35px;font-size: 14px ;">{{user.levelName}}</span>
		  	 </div>
		  	 <div style="margin-top: 5px;">
		  	 	<span style="color: #5d5d59;font-size: 13px ;">推荐人</span><span style="margin-left: 47px;font-size: 14px ;">客户</span>
		  	 </div>
		  	 <div  style="margin-top: 5px;">
		  	 	<span style="color: #5d5d59;font-size: 13px ;">用户类型</span><span style="margin-left: 33px;font-size: 14px ;">小客户</span>
		  	 </div>
		  	 <div  style="margin-top: 5px;">
		  	 	<span style="color: #5d5d59;font-size: 13px ;">积分</span><span style="margin-left: 60px;font-size: 14px ;">{{user.point}}</span>
		  	 </div>
		  	 <div style="margin-top: 5px;">
		  	 	<span style="color: #5d5d59;font-size: 13px ;">推广员</span><span style="margin-left: 47px;font-size: 14px ;">客户</span>
		  	 </div>
		  	 <div  style="margin-top: 5px;">
		  	 	<span style="color: #5d5d59;font-size: 13px ;">生日</span><span style="margin-left: 60px;font-size: 14px ;">{{user.birthday}}</span>
		  	 </div>
		  	 <el-divider style="border-color: #f5f5f5;margin-top: 15px;margin-bottom:15px;" />
		  </div>
		</ContentWrap>
      </el-col>
    </el-row>
  </div>
</template>


<script lang="ts" setup>
  import { KeFuConversationList, KeFuMessageList,MemberBrowsingHistory,UserInfo } from './components'
  import {WebSocketMessageTypeConstants} from './components/tools/constants'
  import {KeFuConversationRespVO} from '@/api/mall/promotion/kefu/conversation'
  import {getRefreshToken, getAccessToken} from '@/utils/auth'
  import {useWebSocket} from '@vueuse/core'
  import {Search} from '@element-plus/icons-vue'
  import * as UserApi from '@/api/member/user'
  import { SupportStaffApi, SupportStaffVO } from '@/api/mall/promotion/supportstaff'



  defineOptions({name: 'KeFu'})
  
  const lineStatus = ref(true)

  const message = useMessage() // 消息弹窗
  
  const params = new URLSearchParams(window.location.search);
  const name = params.get('name');
  const pic = params.get('pic');
  const kefuId = params.get('id')
  const conversations = ref<KeFuConversationRespVO[]>([])
  // const userInfoRef =  ref<InstanceType<typeof UserInfo>>()
  const user = ref<UserApi.UserVO>({} as UserApi.UserVO)
  const userId = ref(0)
  

  // ======================= WebSocket start =======================
	const server = ref(
	  (import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') + 
		'?token=' +
		getRefreshToken() 
		 // 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：WebSocket 无法方便的刷新访问令牌
	) // WebSocket 服务地址

    const handleSwitchChange = async (value) =>{
      console.log('11111:',value)
	  let a = 0;
	  
	  if(value == true){
		  a = 1;
		  await SupportStaffApi.updateLineStatus(kefuId,a)
		  message.success('已上线')
	  }else{
		  a = 2;
		   await SupportStaffApi.updateLineStatus(kefuId,a)
	  message.success('已下线')
	  }
	  
	 
		
    }
  
 let a = 0;

 const {status, data, send, open, close} = useWebSocket(server.value, {
   onConnected: function (ws) {
     console.log('websocket 连接成功！', ws);
   },
   onDisconnected: function (ws, event) {
     console.log('WebSocket 连接断开', event);	
   },
   onError: function (ws, event) {
     console.error('WebSocket 连接错误:', event);
     if (event instanceof ErrorEvent) {
       console.error('详细错误信息:', event.message);
     } else {
       console.error('非标准错误:', event);
     }
   },
   onMessage: function (ws, event) {
       console.log('收到的 WebSocket 消息:', event.data);
	   
	   
	   a = a + 1 ;
	   if(a == 2){
		    getConversationList()
	   keFuChatBoxRef.value?.refreshMessageList()
	   a = 0;
	   }
	  
  
     },
   autoReconnect: false,  // 开启自动重连
   heartbeat: true
 });
 
 
  

  /** 监听 WebSocket 数据 */
  watchEffect(() => {
	  console.log('连接服务器得到消息:',data.value)
    if (!data.value) {
      return
    }
    try {
      // 1. 收到心跳
      if (data.value === 'pong') {
        return
      }
  
      // 2.1 解析 type 消息类型
      const jsonMessage = JSON.parse(data.value)
      const type = jsonMessage.type
	  console.log('来自用户发送的消息:',data.value)
	  
      if (!type) {
        message.error('未知的消息类型：' + data.value)
        return
      }
      // 2.2 消息类型：KEFU_MESSAGE_TYPE
      if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_TYPE) {
        // 刷新会话列表
        // TODO @puhui999：不应该刷新列表，而是根据消息，本地 update 列表的数据；
        getConversationList()
        // 刷新消息列表
        keFuChatBoxRef.value?.refreshMessageList(JSON.parse(jsonMessage.content))
        return
      }
      // 2.3 消息类型：KEFU_MESSAGE_ADMIN_READ
      if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_ADMIN_READ) {
        // 刷新会话列表
        // TODO @puhui999：不应该刷新列表，而是根据消息，本地 update 列表的数据；
        getConversationList()
      }
    } catch (error) {
      console.error(error)
    }
  })
  

  // ======================= WebSocket end =======================
  /** 加载会话列表 */
  const keFuConversationRef = ref<InstanceType<typeof KeFuConversationList>>()
  const getConversationList = () => {
    keFuConversationRef.value?.getConversationList()
  }

  /** 加载指定会话的消息列表 */
  const keFuChatBoxRef = ref<InstanceType<typeof KeFuMessageList>>()
  const memberBrowsingHistoryRef = ref<InstanceType<typeof MemberBrowsingHistory>>()
  const handleChange = (conversation: KeFuConversationRespVO) => {
	  conversations.value = conversation
	  chick.value = '2'
	  userId.value = conversation.userId
    keFuChatBoxRef.value?.getNewMessageList(conversation)
    memberBrowsingHistoryRef.value?.initHistory(conversation)
  }
  
  const out = () =>{
	    window.close();
		// window.location.href = '/kefu/support-staff';
  }
  
  
  const chick = ref('2')
  const userInfo = async () =>{
  	chick.value = '1'
  	user.value = await UserApi.getUserInfo(userId.value) 
  }
  const zuoji =  () =>{
  	  chick.value = '2'
  	  // keFuChatBoxRef.value?.getNewMessageList(conversations.value)
  	  memberBrowsingHistoryRef.value?.initHistory(conversations.value)
  }

  /** 初始化 */
  onMounted(() => {
    getConversationList()
    // 打开 websocket 连接
    open()
	 console.log('WebSocket 已初始化');
  })

  /** 销毁 */
  onBeforeUnmount(() => {
    // 关闭 websocket 连接
    close()
	 console.log('WebSocket 已关闭');
  })
</script>

<style lang="scss">
  .kefu {
    height: calc(100vh - 165px);
    overflow: auto; /* 确保内容可滚动 */

  }

  /* 定义滚动条样式 */
  ::-webkit-scrollbar {
    width: 10px;
    height: 6px;
  }

  /* 定义滚动条轨道 内阴影+圆角 */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0 rgba(240, 240, 240, 0.5);
    border-radius: 10px;
    background-color: #fff;
  }

  /* 定义滑块 内阴影+圆角 */
  ::-webkit-scrollbar-thumb {

    border-radius: 10px;
    box-shadow: inset 0 0 0 rgba(240, 240, 240, 0.5);
    background-color: rgba(240, 240, 240, 0.5);

  }
</style>
