<template>
   <!-- 美团授权已过期 -->
   <!-- <jx-empty  v-if="imOnlineStatus === -1" title="美团授权已过期" /> -->

  <!-- IM状态 -->
  <view  v-if="store.getters['storeInfo/imStatus']" style="position:absolute;bottom:0;width:100%">
    <view class="notice"  @tap="jumpToSetUp">
      <text>{{store.getters['storeInfo/imStatus']}}IM单聊状态已经关闭</text>
      <jx-icon icon="gengduo" color="red"></jx-icon>
    </view>
    <!-- IM状态已经关闭，是否打开 -->
  </view>

    <!-- 用户列表 -->
    <template v-if="userListData.length > 0">
      <uni-list :border="false">
        <view class="chat-border" v-for="item in userListData" :key="item.userID">
          <uni-list-chat
            :clickable="true"
            @click="charItem(item)"
            :avatar-circle="true"
            :title="
              item.vendorID == 1
                ? `【美团${item.orderDesc}】${item.userID === '0' ? '群发消息' : item.userID}`
                : item.vendorID == 3 ? `【淘宝闪购】${item.userID}` : `【京东】${item.userID}`
            "
            :avatar="
              item.vendorID == 1
                ? 'https://image.jxc4.com/image/75654ab606494a0efdb0cf7d7ad060d9.png'
                : item.vendorID == 3 ? 'https://image.jxc4.com/image/6c2f1dfd95890df8ef5e27bde15c4e7f.png'
                : 'https://image.jxc4.com/image/884664b80ffd2eda64a4aab9f4dc402e.png'
            "
            :note="item.latestMsg"
            :time="item.latestTime"
            badge-positon="left"
            :badge-text="item.NewMessageNum"
          />
        </view>
      </uni-list>
    </template>
    
    <jx-empty v-else title="暂无消息" />


  <!-- 公共组件 -->
  <jx-login-empty title="马上登录，查看消息" />
  <jx-loading />
</template>

<script lang="ts" setup >
import messageFn from './index'
const {
  charItem, // 聊天详情
  userListData, // 用户列表
  jumpToSetUp,       // 跳到设置页面
  store
} = messageFn()
</script>

<style lang="scss" scoped>
.chat-border:nth-child(1) {
  border-top: 2rpx solid rgb(230, 230, 230);
}
.chat-border {
  border-bottom: 2rpx solid rgb(230, 230, 230);
}
.notice {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  padding: 20rpx;
  background-color: #fef5f6;
  color: #e91d37;
  font-size: 28rpx;
}
</style>