<template>
  <div class="news-com" @click="recordClick">
    <div class="news-img">
      <img :src="props.data.cover_image" alt="" style="object-fit: cover">
      <div class="featured" v-if="props.data.featured">
        Featured
      </div>
    </div>
    <div class="news-title">
      {{ props.data.title }}
    </div>
    <div class="news-content">
      {{ props.data.description }}
    </div>
<!--    <div class="news-date" v-if="data.link.length">-->
<!--      <a :href="data.link" :style="`${data.link && data.link.length > 40 ? 'width: 200px' : 'width: fit-content'}`"  @click="recordClick" target="_blank">-->
<!--        {{ data.link }}-->
<!--      </a>-->
<!--    </div>-->
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import {clickMediaApi} from "../api/manage.js";
import {data} from "autoprefixer";

// 路由对象
const router = useRouter()

const props = defineProps({
  data: Object,
})

const recordClick = ()=>{
  clickMediaApi({media_id: props.data.id})

  if (props.data.link) {
    window.open(props.data.link, '_blank')
  }
}



</script>

<style lang="scss" scoped>



.news-com {
  width: calc(100% / 2) !important;
  padding: 33px 10px 12px;

  .news-img {
    width: 100%;
    position: relative;

    .featured {
      width: 60px;
      background: rgba(255, 255, 255, 0.75);
      position: absolute;
      top: 13px;
      right: 0;
      text-align: center;
      line-height: 17px;
      font-family: 'Libre Bodoni';
      font-style: normal;
      font-weight: 400;
      font-size: 14Px;
      color: #FF6D00;
    }

    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      .status {
        text-align: center;
        font-family: 'Raleway';
        font-weight: 900;
        font-size: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .upcoming {
      background-color: rgba(255, 255, 255, 0.75);
      color: #FF6D00;
    }

    .past {
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
    }

    img {
      width: 100%;
      height: 160px;
      object-fit: cover;
    }
  }

  .news-title {
    font-family: 'Libre Bodoni';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.3;
    margin: 16px 0 8px;
    color: #000000;
  }

  .news-content {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    font-size: 14Px;
    line-height: 14px;
    text-align: left;
    color: rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    overflow: hidden;
    white-space: normal !important;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .news-date {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    font-size: 14Px;
    color: #FF6D00;
    // text-decoration: underline;
    margin: 10px 0;
    a{
      padding: 4px 0;
      color: #FF6D00;
      text-overflow: ellipsis;
      overflow: hidden;
      cursor: pointer;
      display: block;
      border-bottom: 1px solid #ff6d00;
    }
  }

  @media screen and (min-width:1440Px) and (max-width: 100vw) {
    width: calc(100% / 3) !important;
    padding: 16px 24px 40px;

    .news-title {
      font-size: 16px;
      line-height: 1.3;
    }

    .news-content {
      margin-top: 20px;
      font-size: 16Px;
      line-height: 16px;
    }

    .featured {
      width: 60px;
      top: 13px;
      font-size: 14Px;
      line-height: 17px;
    }
  }

  @media (max-width: 1439Px) {
    .news-img {
      img {
        height: 200px;
      }
    }
  }
  @media (max-width: 769Px) {
    .news-img {
      img {
        height: 120px;
      }
    }
  }
  @media screen and (min-width:0Px) and (max-width: 431Px) {
    width: 100% !important;
    padding: 0px 0px 44px !important;
    .news-img {
      img {
        height: 160px;
      }
    }
    .news-title {
      font-size: 18px;
      line-height: 1.3;
    }

    .news-content {
      margin-top: 18px;
      font-size: 14Px;
      line-height: 18px;
    }

    .news-date {
      font-size: 12px;
    }

    .featured {
      width: 80px !important;
      top: 13px;
      right: 0;
      font-size: 12Px;
      line-height: 22px !important;
    }
  }

}
</style>
