<template>
  <van-cell-group class="cellGroup" @click="onDetail">
    <!-- {{ JSON.stringify(item) }} -->
    <van-cell center title-class="titleClass">
      <template #icon>
        <img src="./images/icon_timer.png" class="icon_timer" />
      </template>
      <template #title>
        {{ sendTime }}
      </template>
      <div class="class">
        {{ groupIds.length }}个群组
        <img src="./images/icon_arrow.png" />
      </div>
    </van-cell>

    <van-cell>
      <div class="message_content van-multi-ellipsis--l3">
        发送内容：{{ item.messageContent }}
      </div>
      <div class="access" v-if="item.fileUrl">
        <p class="title">附件</p>
        <div class="file" v-if="item.messageType == 'FILE'">
          <img src="./images/icon_file.png" />
          <span class="van-ellipsis" style="width: 80%">{{
            item.fileName
          }}</span>
        </div>
        <div class="file" v-if="item.messageType == 'IMG'">
          <!-- <img src="./images/icon_file.png" /> -->
          <van-image :src="item.fileUrl" class="img" />
          <span class="van-ellipsis" style="width: 80%">{{
            item.fileName
          }}</span>
        </div>
      </div>
    </van-cell>
  </van-cell-group>
</template>

<script>
import dayjs from "dayjs";
export default {
  name: "item",
  props: ["item"],
  computed: {
    groupIds() {
      const targetIds = this.item.targetIds
        ? this.item.targetIds.split(",")
        : [];
      return targetIds;
    },
    sendTime() {
      return dayjs(this.item.sendTime).format("YYYY-MM-DD HH:mm");
    },
  },
  methods: {
    onDetail() {
      this.$listeners.onDetail(this.item);
    },
  },
};
</script>

<style lang="less" scoped>
.cellGroup {
  margin: 0.1rem 0.14rem;
  border-radius: 0.1rem;
  overflow: hidden;
  .titleClass {
    font-size: 0.14rem;
    font-weight: 500;
    color: #333333;
  }
}
.icon_timer {
  width: 0.16rem;
  height: 0.16rem;
  margin-right: 0.08rem;
}
.class {
  display: inline-block;
  line-height: 0.18rem;
  background: #fff4f2;
  border-radius: 0.04rem;
  padding: 0 0.03rem;
  font-size: 0.12rem;
  color: #ff5c00;
  img {
    margin-left: 0.03rem;
    width: 0.05rem;
    height: 0.07rem;
  }
}
.message_content {
  font-size: 0.14rem;
  color: #666666;
  line-height: 0.28rem;
}
.access {
  padding-top: 0.14rem;
  padding-bottom: 0.08rem;
  .title {
    font-size: 0.14rem;
    color: #999999;
    line-height: 0.28rem;
  }
  .file {
    display: flex;
    align-items: center;
    background: #f6f8f9;
    border-radius: 0.06rem;
    padding: 0.12rem;
    img {
      width: 0.22rem;
      height: 0.26rem;
      margin-right: 0.1rem;
    }

    .img {
      border-radius: 0.06rem;
      width: 0.4rem;
      height: 0.4rem;
      margin-right: 0.1rem;
      overflow: hidden;
    }
  }
}
</style>
