<!-- z-paging聊天item -->

<template>
  <view class="chat-item">
    <view
      v-if="item.timeStr"
      class="topTime"
    >
      {{ item.timeStr }}
    </view>
    <view :class="{'chat-container':true,'chat-location-me':item.send||item.content.text.sender||item.content.text?.msgType===-1||item.content.text?.type===-1}">
      <view
        class="chat-icon-container"
      >
        <img-show
          class="chat-icon"
          :src="getChannelInfo(item,'pic')"
          mode="aspectFill"
        />
      </view>
      <view
        class="chat-content-container"
        :class="{'prod-link-content':item.content.text?.msgType===4}"
      >
        <text
          v-if="item.send||item.content.text.sender||item.content.text?.msgType===-1||item.content.text?.type===-1"
          :class="{'chat-user-name':true}"
        >
          {{ getChannelInfo(item,'nickName') }}
        </text>
        <view
          class="chat-text-container-super"
          :style="[{justifyContent:item.send?'flex-end':'flex-start'}]"
        >
          <view
            v-if="!sendStatusObj[item.clientSeq] && (item.send||item.content.text.sender||item.content.text?.msgType===-1||item.content.text?.type===-1)"
            class="read-text"
          >
            <!-- 已读/未读/发送失败文本 -->
            <text
              v-if="sendFailSeqs.includes(item.clientSeq)"
              class="fail"
            >
              {{ $t('sendFail') }}
            </text>
            <text
              v-else
              class="unread"
            >
              {{ maxReadSeq >= item.messageSeq ? $t('yiDu') : $t('weiDu') }}
            </text>
            <!-- end已读/未读/发送失败文本 -->
          </view>
          <!-- 自己发送的消息 -->
          <view
            v-if="item.send||item.content.text.sender||item.content.text?.msgType===-1||item.content.text?.type===-1"
            class="chat-text-container-me"
            :class="{'chat-text-container':true,'container-link':item.content.text?.msgType===4}"
          >
            <!-- 普通文本消息 -->
            <text
              v-if="(item.content.text?.msgType===-1||item.content.text?.msgType===1||item.content.text?.type===-5)&&item.content.text?.type!==-1"
              :class="{'chat-text':true}"
              class="chat-text-me"
            >
              {{ item.content.text.msg }}
            </text>

            <!-- end普通文本消息 -->
            <!-- 自动回复消息 -->
            <view
              v-if="item.content.text?.type===-1"
              class="chat-text chat-text-me"
              style="display: block;"
            >
              <view
                v-if="item.content.text.sendTextState"
              >
                {{ item.content.text.content }}
              </view>

              <view
                v-if="item.content.text.sendIssusState"
              >
                <view
                  v-for="issue in item.content.text.issues"
                  :key="issue.id"
                  class="issues"
                >
                  • {{ issue.issues }}
                </view>
              </view>
            </view>
            <!-- end自动回复消息 -->
            <!-- 图片消息 -->
            <view
              v-if="item.content.text?.msgType===2"
              class="bubble"
              @tap="showPic(util.checkFileUrl(item.content.text.msg))"
            >
              <img-show
                :src="util.checkFileUrl(item.content.text.msg)"
                class="longimage"
                @img-load="picLoad"
              />
            </view>
            <!-- end图片消息 -->
            <!-- 订单消息 -->
            <view
              v-if="item.content.text?.msgType===4"
              class="prod-link"
              @tap=" toProdDetail(item.content.text.msg,item.content.text.msg.orderFlag ? 1 : 0)"
            >
              <view
                v-if="item.content.text.msg.orderFlag"
                class="prod-number"
              >
                {{ $t('dingDanBianHao') }}{{ item.content.text.msg.orderNumber }}
              </view>
              <view class="link-prod prod-no">
                <img
                  :src="util.checkFileUrl(item.content.text.msg.imgs)"
                  alt=""
                  @error="errImg(index)"
                >
                <view class="link-detail">
                  <view class="prod-name">
                    {{ onHandleLang(item.content.text.msg, 'prodName') }}
                  </view>
                  <view class="prod-price">
                    <text>
                      {{ item.content.text.msg.actualTotal ? '￥' : '' }}
                      {{ item.content.text.msg.actualTotal ? item.content.text.msg.actualTotal : '' }}
                      {{ (item.content.text.msg.actualTotal && item.content.text.msg.useScore) ? '+' : '' }}
                      <text v-if="item.content.text.msg.useScore">
                        {{ item.content.text.msg.useScore }} {{ $t('jiFen') }}
                      </text>
                    </text>
                  </view>
                </view>
              </view>
            </view>
            <!-- end订单消息 -->
          </view>
          <view
            v-if="item.send===false&&!item.content.text.sender&&item.content.text?.msgType!==-1&&item.content.text?.type!==-5&&item.content.text?.type!==-1"
            :class="{'chat-text-container':true, 'container-link':item.content.text?.msgType===4}"
          >
            <!-- 普通文本消息 -->
            <text
              v-if="item.content.text?.msgType===1"
              :class="{'chat-text':true}"
            >
              {{ item.content.text.msg }}
            </text>
            <!-- end普通文本消息 -->
            <!-- 图片消息 -->
            <view
              v-if="item.content.text?.msgType===2"
              class="bubble"
              @tap="showPic(util.checkFileUrl(item.content.text.msg))"
            >
              <img-show
                :src="item.content.text.msg"
                class="longimage"
                @img-load="picLoad"
              />
            </view>
            <!-- end图片消息 -->
            <!-- 商品链接 -->
            <view
              v-if="item.content.text?.msgType===4"
              class="prod-link"
              @tap=" toProdDetail(item.content.text.msg,item.content.text.msg.orderFlag ? 1 : 0)"
            >
              <view
                v-if="item.content.text.msg.orderFlag"
                class="prod-number"
              >
                {{ $t('dingDanBianHao') }}{{ item.content.text.msg.orderNumber }}
              </view>
              <view class="link-prod prod-no">
                <img
                  :src="util.checkFileUrl(item.content.text.msg.imgs)"
                  alt=""
                  @error="errImg(index)"
                >
                <view class="link-detail">
                  <view class="prod-name">
                    {{ onHandleLang(item.content.text.msg, 'prodName') }}
                  </view>
                  <view class="prod-price">
                    <text>
                      {{ item.content.text.msg.actualTotal ? '￥' : '' }}
                      {{ item.content.text.msg.actualTotal ? item.content.text.msg.actualTotal : '' }}
                      {{ (item.content.text.msg.actualTotal && item.content.text.msg.useScore) ? '+' : '' }}
                      <text v-if="item.content.text.msg.useScore">
                        {{ item.content.text.msg.useScore }} <span>{{ $t('jiFen-0') }}</span>
                      </text>
                    </text>
                  </view>
                </view>
              </view>
            </view>
            <!-- end商品链接 -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { WKSDK } from 'wukongimjssdk'
import util from '@/utils/util'
const emit = defineEmits(['toProdDetail'])
defineProps({
  item: {
    type: Object,
    default: () => ({})
  },
  maxReadSeq: {
    type: Number,
    default: 0
  },
  // 发送成功的序号号
  sendFailSeqs: {
    type: Array,
    default: () => ([])
  },
  // clientSeq为key，value为加载状态
  sendStatusObj: {
    type: Object,
    default: () => ({})
  }
})
/**
 * @param {Object} msg
 * 预览图片
 */
const showPic = (msg) => {
  const list = []
  list.push(util.checkFileUrl(msg))
  uni.previewImage({
    indicator: 'none',
    current: 0,
    urls: list
  })
}

const channelInfo = ref(null)

const getChannelInfo = (m, temp) => {
  channelInfo.value = WKSDK.shared().channelManager.getChannelInfo(m.channel)// 获取频道详情(不会触发数据源的远程获取)
  let info = channelInfo.value?.data.find((item) => m.fromUID === item.uid)
  if (!info) {
    info = channelInfo.value?.data[0] // 客服被删除使用超管的信息
  }
  if (info) {
    return info[temp]
  }
}
const onHandleLang = (conent, field) => {
  if (!conent) return
  const langKey = +uni.getStorageSync('bbcMsLangKey') || 0
  const fRes = conent?.prodLangList?.find(f => f.lang === langKey)
  return fRes?.[field] || conent[field]
}
const msgItems = ref([])

// 图片加载失败
const errImg = (index) => {
  const obj = msgItems.value[index]
  obj.prodInfo.imgs = '/static/images/def.png'
  msgItems.value[index] = obj
}
const toProdDetail = (prodInfo, type) => {
  emit('toProdDetail', prodInfo, type)
}
</script>

<style scoped lang="scss">
@use "./chat-item.scss";
</style>
