<template>
  <div class="article-item">
    <AppLink :data="data" v-bind="$attrs">
      <div class="article-item-inner">
        <el-image :src="data.web_img_uri" class="article-item-pic" lazy fit="cover" />
        <div class="article-item-content">
          <div class="article-item-content__date">{{ formatDate(data.start_time) }}</div>
          <div class="article-item-content__title">{{ data.title }}</div>
          <div class="article-item-content__text">{{ data.abstract }}</div>
        </div>
      </div>
    </AppLink>
  </div>
</template>

<script setup>
defineOptions({
  name: 'ArticleListItem',
  inheritAttrs: false,
})

defineProps({
  data: {
    type: Object,
    required: true,
  },
})

const formatDate = (value) => {
  const date = new Date(value * 1000)
  return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}
</script>

<style lang="scss">
.is-pc {
  .article-item {
    border-bottom: 1px solid #e6e6e6;
    padding: 36px 0;
    cursor: pointer;
  }
  .article-item-inner {
    display: flex;
    &.set-list {
      .article-item-pic {
        width: 335px;
        object-fit: cover;
        height: 130px;
      }
      .article-item-content__text {
        -webkit-line-clamp: 2;
      }
    }
  }
  .article-item-pic {
    width: 360px;
    height: 270px;
    // height: fit-content;
    // height: 210px;
    // object-fit: cover;
  }
  .article-item-content {
    flex: 1;
    overflow: hidden;
    margin-left: 30px;
  }
  .article-item-content__date {
    font-size: 16px;
    font-weight: 300;
    line-height: 100%;
    color: #aa1941;
    // padding-top: 13px;
  }
  .article-item-content__title {
    font-size: 22px;
    font-weight: bold;
    line-height: 32px;
    color: #141414;
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .article-item-content__text {
    font-size: 14px;
    font-weight: 300;
    line-height: 24px;
    color: #666666;
    margin-top: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }
}
.is-h5 {
  .article-list-inner {
    display: flex;
  }
  .article-item {
    margin: 0.2rem;
    background-color: #fff;
  }
  .article-item-pic {
    display: block;
    width: 100%;
    // height: fit-content;
    // height: 2.99rem;
    // object-fit: cover;
  }
  .article-item-content {
    padding: 0.18rem;
  }
  .article-item-content__date {
    font-size: 0.1rem;
    color: #aa1941;
    line-height: 0.16rem;
  }
  .article-item-content__title {
    margin-top: 0.1rem;
    font-size: 0.14rem;
    font-weight: 500;
    color: #333;
    line-height: 0.24rem;
  }
  .article-item-content__text {
    margin-top: 0.2rem;
    font-size: 0.1rem;
    line-height: 0.2rem;
  }
}
</style>
