<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 :src="getAvatarUrl(record)" class="record-avatar" 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 { menuButtonInfo, picUrl, request } from '../../../utils'
import { apiArr } from '../../../api/customerService'

export default {
  data(){
    return {
      // 聊天记录列表
      recordsList: [],
      // 是否加载中
      isLoading: false,
      page_num: 1,
      page_size: 10,
      itemObj: {},
      merchantId: ''
    }
  },
  onLoad(options){
    this.merchantId = JSON.parse(options.merchant_id)
  },
  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.filter(item => item.client_id_one !== item.client_id_two && item.mch_id == this.merchantId)
        })
      } catch (error) {
        console.error('加载聊天记录失败', error)
      } finally {
        this.isLoading = false
      }
    },
    getAvatarUrl(record){
      if(record.client_id_one == uni.getStorageSync('openId')){
        return record.two && record.two.avatar ? picUrl + record.two.avatar : 'https://static.hshuishang.com/defaultTx.png'
      }else{
        return record.one && record.one.avatar ? picUrl + record.one.avatar : 'https://static.hshuishang.com/defaultTx.png'
      }
    },
    // 格式化时间
    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){

      this.$set(record, 'type', 2)
      // 跳转到聊天页面
      uni.navigateTo({
        url: '/packages/customerService/index/index?item=' + JSON.stringify(record)
      })
    }
  }
}
</script>

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