<template>
  <div class="detail-info">
    <el-row>
      <el-col :span="6">
        <div class="detail-left">
          <div class="fl">
            <span
              v-if="global.mediaList && global.mediaList.content && global.mediaList.content.news_item &&global.mediaList.content.news_item.length===1"
            >
              <div v-for="(art,index) in global.mediaList.content.news_item" :key="index">
                <p
                  style="white-space:normal;
                    word-break:break-all;
                    word-wrap:break-word;padding:15px 0 0 15px"
                >{{art.title}}</p>
                <img :src="art.thumb_url" style="width:220px;height:120px;margin:15px 10px">
              </div>
            </span>
            <span
              v-if="global.mediaList && global.mediaList.content && global.mediaList.content.news_item &&global.mediaList.content.news_item.length===2"
            >
              <div v-for="(art,index) in global.mediaList.content.news_item" :key="index">
                <p>{{art.title}}</p>
                <img :src="art.thumb_url">
              </div>
            </span>
            <span
              v-if="global.mediaList && global.mediaList.content && global.mediaList.content.news_item &&global.mediaList.content.news_item.length>2"
              class="three-item"
            >
              <div
                class="dv clear"
                v-for="(art,index) in global.mediaList.content.news_item"
                :key="index"
              >
                <p>{{art.title}}</p>
                <img :src="art.thumb_url">
              </div>
            </span>
          </div>
          <!-- <img :src="materianImg" class="info-img"> -->
        </div>
      </el-col>
      <el-col :span="18">
        <material-text :MediaList="MediaList"></material-text>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {mapState} from 'vuex'
import MaterialText from './MaterialText'
export default {
  data () {
    return {
      materianImg: ''
    }
  },
  props: ['MediaList'],
  components: {
    MaterialText
  },
  computed:{
    ...mapState(['global']),
    item(){
      return this.global.mediaList
    }
  }
}
</script>
<style lang="stylus" scoped>
.detail-info
  .detail-left
    margin-right 10px
    .info-img
      width 100%
      height 100%
</style>
