<template>
    <div class="dm-imgText__item__wrap" >
      <div v-for="(v,i) in item.itemList" :key="i">
        <div class="dm-imgText__item" v-if="i === 0" @mouseover="v.maskShow = true" @mouseout="v.maskShow = false">
          <div v-show="v.maskShow" class="dm-imgText__item__mask" @click="window.open(v.mediaUrl)">预览文章</div>
          <p class="ellipsis-l2">{{v.titleName}}</p>
          <img :src="v.qcloudImageUrl || loadErrorImg" alt="" srcset="">
          <p class="ellipsis fz13 gray-color">{{v.remark}}</p>
        </div>
        <div class="dm-imgText__item__other clearfix" v-else  @mouseover="v.maskShow = true" @mouseout="v.maskShow = false">
          <div v-show="v.maskShow" class="dm-imgText__item__other__mask" @click="window.open(v.mediaUrl)">预览文章</div>
          <img  :src="v.qcloudImageUrl || loadErrorImg" alt="" srcset="">
          <p class="ellipsis-l2">{{v.titleName}}</p>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name:'item-teletext',
  data(){
    return {
      maskShow:false,
      loadErrorImg:require('../assets/img/loaderror.png')
    }
  },
  props:{
    item:{
      type: Object,
      default() {
        return {
          itemList:[]
        }
      }
    }
  },
  created() {
    if (this.item.itemList instanceof Array) {
      this.item.itemList.forEach(v => {
        v.maskShow = false
      })
    }
  }
}
</script>

