<template>
  <div :class="{ 'one-px-b': true, visited: item.read }">
    <van-row>
      <van-col :span="item.url ? 16 : 24">
        <div class="listItem">
          <p
            class="van-multi-ellipsis--l3 listItemTitle"
            v-text="item.title"
          ></p>
        </div>
      </van-col>
      <van-col span="8"> </van-col>
    </van-row>
    <div class="subTitle">
      <p v-if="item.subTitle" v-text="item.subTitle"></p>
      <van-image
        width="100%"
        height="100%"
        lazy-load
        v-if="item.url"
        fit="contain"
        :src="item.url"
      />
      <br v-if="item.url" />
    </div>
    <div class="relation">
      <div class="relationSon">
        <span v-text="item.orisource"></span>
        <span v-if="item.releaseTime">
          {{ item.releaseTime | dateChange }}
        </span>
        <span class="progress" v-if="item.progress >= 0">
          {{ item.progress | percentage }}
        </span>
      </div>
      <div class="relationSon"></div>
    </div>
  </div>
</template>

<script>
import { Col as vanCol, Row as vanRow, Image as VanImage } from "vant";
import "vant/lib/row/style";
import "vant/lib/image/style";
import "vant/lib/col/style";
export default {
  name: "app",
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data: function() {
    return {};
  },
  filters: {
    dateChange(time) {
      let t = time.replace(/-/g, "/");
      const D = new Date(t);
      const year = D.getFullYear();
      const month =
        D.getMonth() + 1 > 9 ? D.getMonth() + 1 : "0" + (D.getMonth() + 1);
      const day = D.getDate() > 9 ? D.getDate() : "0" + D.getDate();
      const hour = D.getHours() > 9 ? D.getHours() : "0" + D.getHours();
      const min = D.getMinutes() > 9 ? D.getMinutes() : "0" + D.getMinutes();
      const sec = D.getSeconds() > 9 ? D.getSeconds() : "0" + D.getSeconds();
      return (
        year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + sec
      );
    },
    percentage(number) {
      return number * 100 + "%";
    }
  },
  methods: {},
  mounted() {},
  beforeDestroy: function() {},
  components: { vanCol, vanRow, VanImage }
};
</script>
<style lang="scss" scoped>
.listItem {
  padding: 0.1rem;
  .listItemTitle {
    font-weight: 600;
    font-size: 0.15rem;
  }
}
.subTitle {
  padding: 0 0.1rem;
  font-size: 0.12rem;
  color: #abb2b8;
  line-height: 0.2rem;
  p {
    margin-bottom: 0.1rem;
  }
}
.relation {
  line-height: 2.5em;
  font-size: 0.12rem;
  color: #abb2b8;
  .relationSon {
    padding: 0 0.1rem;
    position: relative;
    .progress {
      position: absolute;
      right: 0.15rem;
      font-size: 0.15rem;
      color: #e42417;
    }
  }
}
</style>
