<template>
  <view class="min-page bg-f7 color-333 u-font-28">
    <up-sticky>
      <view class="top u-flex u-row-between">
        <view></view>
        <view class="u-flex" @click="clearAllmsg">
          <text class="color-666 u-m-r-12">清空未读</text>
          <image src="/pageChat/static/clear.png" class="clear"></image>
        </view>
      </view>
    </up-sticky>
    <view class="list">
      <view
        class="item u-flex"
        v-for="(item, index) in list"
        :key="item.id"
        @click="toDetail(item)"
      >
        <view class="u-flex">
          <up-avatar
            size="118rpx"
            :src="item.avatar"
            shape="square"
            round="8rpx"
          ></up-avatar>
        </view>
        <view class="u-flex-1 u-flex u-row-between u-p-l-14">
          <view style="max-width: 364rpx">
            <view class="color-000 u-line-1">{{ item.name }}</view>
            <view class="u-m-t-28 u-line-1 u-font-24 color-999"
              >用户昵称：这里是消息内容这里,,,,</view
            >
          </view>
          <view class="color-333 u-font-24">{{ item.send_time }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import go from "@/commons/utils/go.js";

import * as chatApi from "@/http/php/chat";
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
const list = ref([]);

async function getList() {
  const res = await chatApi.messageSessionList({});
  list.value = (res.list || []).filter(v=>!v.is_del)
}

async function clearAllmsg() {
  uni.showModal({
    title: "提示",
    content: "确定要清空所有消息吗？",
    success: async (res) => {
      if (res.confirm) {
        const res = await chatApi.clearAllmsg({});
        if (res) {
          uni.showToast({
            title: "清空成功",
            icon: "none",
            duration: 2000,
          });
          getList();
        }
      }
    },
  });
}

function toDetail(item) {
  go.to("PAGES_CHAT_CHAT", { group_id: item.group_id,session_id: item.session_id });
}

onShow(getList);
</script>

<style lang="scss" scoped>
.top {
  padding: 32rpx 28rpx;
  background-color: #fff;
}
.clear {
  width: 38rpx;
  height: 38rpx;
}
.list {
  padding: 36rpx 28rpx;
  .item {
    padding: 32rpx 28rpx;
    background-color: #fff;
    border-radius: 16rpx;
    margin-bottom: 16rpx;
  }
}
</style>
