<template>
  <div class="list-card" :vid="itemData.ID">
    <div class="card-img">
      <img :src="itemData.PIC_PATH" alt="">
    </div>
    <div class="card-content">
      <p class="title" @click="viewDetail">{{itemData.TIT}}</p>
      <div class="center">
        <div class="l">
          <span class="top" v-if="itemData.IS_TOP>0">置顶</span>
          <span class="time">{{itemData.PUB_DT.replace(':000', '')}}</span>
        </div>
        <div class="r">
          <div v-if="!itemData.purchase">
            <img src="@/assets/locked.png" alt="" class="lock-img">
            <span class="lock-status">待解锁</span>
          </div>
          <div v-else>
            <img src="@/assets/no_locked.png" alt="" class="lock-img">
            <span class="lock-status">已解锁</span>
          </div>  
          <!-- <span class="lock-num">222人解锁</span> -->
        </div>
      </div>
      <p class="describe">{{itemData.ABST}}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    itemData: {
      type: Object,
      default: ()=>({})
    }
  },
  methods: {
    viewDetail() {
      this.$router.push({
        path: '/article',
        query: {
          id: this.itemData.ID,
          purchase: this.itemData.purchase
        }
      })
    }
  }
}
</script>

<style scope>
.list-card {
  display: flex;
  padding: 25px 0;
  border-bottom: 2px dashed rgba(255,255,255,.15);
}
.list-card .title {
  font-size: 18px;
  color: #EAEBF0;
  text-align: left;
  line-height: 26px;
  cursor: pointer;
}
.list-card .title:hover {
  color: #1496f5;
}
.list-card .describe {
  color: #C2C4CD;
  text-align: justify;
  line-height: 22px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.card-img img{
  margin-right: 20px;
  display: inline-block;
  width: 240px;
  height: 140px;
}
.card-content .center{
  display: flex;
  height: 40px;
  align-items: center;
}
.card-content .top {
  color: #EB333B;
  margin-right: 10px;
}
.card-content .center .l {
  margin-right: 50px;
}
.card-content .center .time {
  color: #C7C9CC;
}
.card-content .center .r {
  display: flex;
  align-items: center;
}
.card-content .lock-status {
  color: #C7C9CC;
  margin: 0 15px 0 5px;
}
.card-content .lock-num {
  color: #767C8A;
}
.lock-img{
  position: relative;
  top: 3px;  
}
</style>