<template>
  <div class="materialist clear">
    <ul :style="{width: ulWidth}">
      <li v-for="(item,index) in imgList" :key="index" @click="handleClick(item)" class="fl">
        <span v-if="item.content.news_item.length===1" v-for="(art,index) in item.content.news_item" :key="index">
          <div>
            <p style="white-space:normal;
                    word-break:break-all;
                    word-wrap:break-word;padding:15px 0 0 15px;height:45px">{{art.title}}</p>
            <img :src="art.thumb_url" style="width:220px;height:120px;margin:5px 10px">
          </div>
        </span>
        <span v-if="item.content.news_item.length===2"  v-for="(art,index) in item.content.news_item" :key="index" class="two-item">
          <div style="border-top:1px solid #eee;height:60px;">
              <p style="width:185px;
                    white-space:normal;
                    word-break:break-all;
                    word-wrap:break-word;padding: 5px 0 0 5px;display:inline-block;">{{art.title}}</p>
              <img style="width:40px;heigth:40px; margin-top: 8px;" :src="art.thumb_url">
          </div>
        </span>

        <span v-if="item.content.news_item.length>2"  v-for="(art,index) in item.content.news_item" :key="index" class="three-item">
          <div class="dv clear">
            <p>{{art.title}}</p>
            <img :src="art.thumb_url">
          </div>
        </span>

      </li>
    </ul>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
  data () {
    return {
      materialList: []
    }
  },
  computed: {
    ulWidth () {
      return this.imgList.length * 247 + 100 + 'px'
    }
  },
  props: ['imgList'],
  methods: {
    ...mapMutations(['MEDIA_LIST']),
    handleClick (item) {
      this.MEDIA_LIST(item)
      this.$emit('sendid', item.media_id)
    }
  }
}
</script>
<style lang="stylus" scoped>
.materialist
  width 1000px
  overflow-x scroll
  ul
    width 3000px
    height 217px
    white-space nowrap
    overflow-x scroll
    margin-bottom 5px
    li
      display inline-block
      margin-left 5px
      width 247px
      height 195px
      border 1px solid #eee
      background #fff
      .three-item
        float left
        div
          width 247px
          height 46px
          border-bottom 1px solid #ccc
          p
            display inline-block
            line-height 43px
          img
            width 30px
            height 30px
            float right
            margin-top 6px
            margin-right 5px
      .two-item:nth-child(1) 
        div
          height 132px !important
          margin-bottom 5px
          border-bottom 1px solid #eee
          p
            float left
            position relative
            top 99px
            z-index 6622222
            width 247px !important
            background-color rgba(0,0,0,0.2)
            padding 10px 0 !important
          img
            width 244px !important
            height 131px !important
            float left
            margin-top -33px !important
      .three-item:nth-child(1)
        height 100px
        border-bottom 1px solid #ccc
        padding-bottom 5px
        p
          font-size 20px
          position relative
          top 58px
          z-index 6622222
          float left
          width 247px
          background-color rgba(0,0,0,0.2)
        img 
          width 247px
          float left
          height 100px
          position relative
          top -49px
    li:hover
      border 2px solid skyblue
      box-shadow 2px 2px 2px skyblue
/* 定义滚动条高宽及背景 */
::-webkit-scrollbar
  width 16px
  height 6px
/* 滑块 */
::-webkit-scrollbar-thumb
  border-radius 7px
  background-color rgba(127, 127, 127, 1)
</style>
