<template>
  <div class="content-item" v-if="data">
    <div class="head">
      <div class="cell picture">
        <img :src="data.cover"/>
      </div>
      <div class="cell title">
        {{data.producerName}}
      </div>
    </div>
    <div class="body">
      <div class="info">
        <div class="title">{{data.mainTitle}}</div>
        <div class="des">{{data.subheading}}</div>
        <div class="date">{{data.releaseTime}}</div>
      </div>
      <div class="poster">
        <div class="frame" v-if="data.producerPicUrl!==''" :style="{backgroundImage: 'url(' + data.producerPicUrl + ')' }"></div>
        <div class="frame" v-if="data.producerPicUrl===''" :style="{backgroundImage: 'url(' + producerPicUrl + ')' }"></div>
        <!-- <img :src="data.producerPicUrl !== '' ? data.producerPicUrl : producerPicUrl"/> -->
      </div>
    </div>
  </div>
</template>

<script>
import _producerPicUrl from '../assets/images/org-default-picture.png'

export default {
  name: 'ContentItem',
  data () {
    return {
      producerPicUrl: _producerPicUrl
    }
  },
  props: ['data'],
  created () {
  },
  mounted: function () {
  },
  computed: {
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content-item {
  padding: 0.5em;
  border-bottom:1px solid #eee;
  min-height: 8em;
}
.content-item > .head {
  display:table;
  width:100%;
  padding:0.6em 0;
}
.content-item > .head > .cell {
  display: table-cell;
  vertical-align: middle;
}
.content-item > .head > .cell.picture{
  width: 2.5em;
}
.content-item > .head > .cell.picture > img{
  width: 100%;
}
.content-item > .head > .cell.title {
  font-size: 1em;
  padding-left: 10px;
}

.content-item > .body {
  display:table;
  width:100%;
}
.content-item > .body > .info,
.content-item > .body > .poster {
  display: table-cell;
  vertical-align: middle;
  color:#999999;
}
.content-item > .body > .info {
  vertical-align: top;
  position:relative;
  padding-bottom: 1em;
  /* width: 70% */
}
.content-item > .body > .info > .title {
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 0.2em;
  color: #4B5760;
  white-space:nowrap;
  text-overflow:ellipsis;
  max-width: 13em;
  overflow:hidden;
}
.content-item > .body > .info > .date {
  position:absolute;
  width:100%;
  bottom:0;
  left:0;
}
.content-item > .body > .poster{
  width: 7em;
}
.content-item > .body > .poster > .frame {
  width: 7em;
  height: 7em;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.content-item > .body > .poster > img {
  width: 100%;
}
</style>