<template>
  <div class="list-item">
    <van-image
      class="avatar"
      round
      width="40px"
      height="40px"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
    />
    <div class="info">
      <li><div class="title">王五</div></li>
      <li>
        <van-text-ellipsis
          rows="5"
          :content="'123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123'"
          expand-text="全文"
          collapse-text="收起"
        />
      </li>
      <li>
        <van-grid :border="false" :column-num="2">
          <van-grid-item>
            <van-image
              width="140"
              height="90"
              fit="cover"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
              @click="showImage('https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg')"
            />
          </van-grid-item>
          <van-grid-item>
            <van-image
              width="140"
              height="90"
              fit="cover"
              src="/xmsu7.jpg"
              @click="showImage('/xmsu7.jpg')"
            />
          </van-grid-item>
        </van-grid>
      </li>
      <li>
        <div class="action">
          <span class="time">46分钟前</span>
          <div class="action-area">
            <div class="action-item" @click="actionItemClick('zan')">
              <img :src="getIconUrl('btn_zan_gray_16')" alt="" class="content-icon" />
              <span style="color: #66667e">0</span>
            </div>
            <div class="action-item" @click="actionItemClick('comment')">
              <img :src="getIconUrl('btn_comment_gray_16')" alt="" class="content-icon" />
              <span style="color: #66667e">0</span>
            </div>
            <div class="action-item" @click="actionItemClick('share')">
              <img :src="getIconUrl('btn_share_gray_16')" alt="" class="content-icon" />
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="comment">
          <div class="rank">
            <img :src="getIconUrl('btn_zan_line_16')" alt="" />
            <span class="rank-names">张三、李四</span>
          </div>
          <div class="comment-item">
            <span class="name">王五：</span>
            <span class="text">七八不得不七八不得不七八不得不七八不得不</span>
          </div>
        </div>
      </li>
    </div>
  </div>
</template>

<script setup>
  import { getIconUrl } from '@/utils/utils'
  import { showImagePreview } from 'vant'
  import { getCurrentInstance } from 'vue'
  const { proxy } = getCurrentInstance()
  const props = defineProps({
    data: { type: Object, default: () => {} }
  })
  const showImage = data => {
    showImagePreview({
      images: [data]
    })
  }

  const emit = defineEmits(['comment'])

  const actionItemClick = action => {
    switch (action) {
      case 'zan':
        proxy.$showToast('点赞')
        break
      case 'comment':
        // 发射评论事件，传递当前项的数据
        emit('comment', props.data)
        break
      case 'share':
        proxy.$showToast('分享')
        break
    }
  }
</script>

<style lang="scss" scoped>
  .list-item {
    display: flex;
    &:not(:first-child) {
      margin-top: 20px;
    }
    .info {
      li {
        &:not(:first-child) {
          margin-top: 10px;
        }
      }
      width: calc(100% - 36px - 15px);
      margin-left: 10px;
      .title {
        color: #4e75c6;
        font-weight: 700;
        font-size: 14px;
      }
      .message {
        font-size: 14px;
        color: #000;
        font-weight: 400;
        width: 100%;
        word-break: break-all; // 添加这行
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        overflow: hidden;
        text-overflow: ellipsis;
        &.full-text {
          -webkit-line-clamp: unset;
          display: block;
        }
      }
      .toggle-btn {
        color: #5c80ca;
        font-size: 12px;
        margin-left: 8px;
        cursor: pointer;
      }
      .action {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .time {
          font-size: 12px;
          color: rgba(153, 153, 153, 1);
        }
        .action-area {
          display: flex;
          align-items: center;
          .action-item {
            display: flex;
            align-items: center;
            span {
              margin-left: 3px;
            }
            &:not(:last-child) {
              margin-right: 15px;
            }
          }
        }
      }
      .comment {
        background-color: rgba(248, 248, 248, 1);
        border-radius: 4px;
        box-sizing: border-box;
        padding: 8px;
        .rank {
          display: flex;
          img {
            width: 16px;
            height: 16px;
            text-align: center;
            margin-top: 1px;
          }
          .rank-names {
            color: #5c80ca;
            font-size: 14px;
            font-weight: 500;
            margin-left: 5px;
          }
        }
        .comment-item {
          display: flex;
          margin-top: 5px;
          .name {
            font-size: 14px;
            color: #5c80ca;
            white-space: nowrap;
            font-weight: 600;
          }
          .text {
            font-size: 14px;
            color: #000;
          }
        }
      }
    }
  }
</style>
