<template>
  <view class="chatting-records-container">

    <!-- 聊天记录列表 -->
    <view class="records-list">
      <view v-if="isLoading" class="loading">加载中...</view>
      <view v-else-if="recordsList.length === 0" class="empty-records">暂无聊天记录</view>
      <view v-else>
        <view v-for="record in recordsList" :key="record.id">
          <view class="record-item" @tap="goToChatPage(record)">
            <image class="record-avatar" :src="record.avatar || '/static/logo.png'" mode="aspectFill"></image>
            <view class="record-info">
              <view class="record-title-row">
                <text class="record-title">{{ record.contact_name }}</text>
                <text class="record-time">{{ record.update_time }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  request,
  picUrl,
  NavgateTo,
  menuButtonInfo,
} from "../../../utils/index";
import { apiArr } from "../../../api/customerService";

export default {
  data() {
    return {
      // 聊天记录列表
      recordsList: [],
      // 是否加载中
      isLoading: false,
      page_num: 1,
      page_size: 10,
    };
  },
  onLoad() {
    // 加载聊天记录列表
    this.loadChattingRecords();
  },
  onShow() {
    // 页面显示时重新加载聊天记录
    this.loadChattingRecords();
  },
  methods: {
    // 加载聊天记录列表
    async loadChattingRecords() {
      try {
        this.isLoading = true;

        // 获取聊天记录列表
        request(apiArr.csGetMsgList, "POST", {
          open_id: uni.getStorageSync("openId"),
          page_num: this.page_num,
          page_size: this.page_size,
        }).then((res) => {
          this.recordsList = res.msg_list
        })
      } catch (error) {
        console.error('加载聊天记录失败', error);
      } finally {
        this.isLoading = false;
      }
    },
    // 格式化时间
    formatTime(time) {
      const date = new Date(time);
      const now = new Date();
      const diff = now - date;

      // 小于1分钟显示"刚刚"
      if (diff < 60 * 1000) {
        return '刚刚';
      }

      // 小于1小时显示"XX分钟前"
      if (diff < 60 * 60 * 1000) {
        return Math.floor(diff / (60 * 1000)) + '分钟前';
      }

      // 小于24小时显示"XX小时前"
      if (diff < 24 * 60 * 60 * 1000) {
        return Math.floor(diff / (60 * 60 * 1000)) + '小时前';
      }

      // 小于7天显示"XX天前"
      if (diff < 7 * 24 * 60 * 60 * 1000) {
        return Math.floor(diff / (24 * 60 * 60 * 1000)) + '天前';
      }

      // 其他情况显示具体日期
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return month + '-' + day;
    },

    // 跳转到聊天页面
    goToChatPage(record) {
      const params = {
        mch_id: record.mch_id,
      }

      request(apiArr.csGetMchContactList, "POST", params).then((res) => {
        if (res.rows && res.rows.length > 0) {
          res.rows.map(item => {
            item.employee_image = picUrl + item.employee_image;
          })
          const itemObj = res.rows.find(item => item.employee_mobile === record.two.account)

          // 跳转到聊天页面
          uni.navigateTo({
            url: '/packages/customerService/index/index?item=' + JSON.stringify(itemObj)
          });
        } else {
          console.log("没有获取到客服列表数据");
          uni.showToast({
            title: '该客服不存在',
            icon: 'none'
          })
        }
      })
    }
  }
};
</script>

<style>
@import url("./index.css");
</style>