<template>
    <div class="digital-resource">
      <div class="digital-title">
        <span class="part-title">数图资源</span>
        <i class="english-title">Folk Literature</i>
        <router-link to="/resource" class="more">MORE>></router-link>
      </div>
      <div class="digital-swiper">
        <swiper :options="swiperOption" v-if="literature && literature.length > 0">
          <swiper-slide class="slide-box" v-for="(list,idx) in literature" :key="idx">
            <div class="digital-slide-box" @click="goDetail(list.newsContentLink, list.templateRecordUrl)" :title="list.newsContentTitle">
              <img :src="url + 'route/file/downloadfile/false/' + list.newsContentCoverList" alt="" class="digital-slide-img">
              <p class="digital-slide-desc">{{list.newsContentTitle}}</p>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import axios from 'axios'
import common from '@/common/components/common.js'
export default {
  name: 'DigitalResource',
  components: {
    swiper,
    swiperSlide
  },
  // props: {
  //   literature: Array
  // },
  data () {
    return {
      swiperOption: {
        observer: true,
        observeParents: true,
        autoplay: 3000,
        slidesPerView: 5,
        spaceBetween: 30
      },
      url: common.url,
      literature: [],
      literaturePage: {
        page: 1,
        rows: 8,
        totalPage: 1,
        newsDirectoriesId: '',
        newsDirectoriesParentId: '98c74389-2088-499b-a046-8611bdc57ea4'
      }
    }
  },
  methods: {
    goDetail: function (link, url) {
      if (link) {
        window.open(link)
      } else {
        window.location.href = this.url + url
      }
    },
    getLiterature: function () {
      var self = this
      axios.get(self.url + 'app/newscontent/listpagenewscontentrelease', {
        params: self.literaturePage
      }).then(function (res) {
        for (var i = 0; i < res.data.rows.length; i++) {
          res.data.rows[i].newsContentCoverList = res.data.rows[i].newsContentCoverList[0].contentCoverId
        }
        self.literature = res.data.rows
      })
    }
  },
  mounted: function () {
    this.getLiterature()
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import "~styles/public.styl"
.digital-resource
  width 1200px
  margin 20px auto 0
  .digital-title
    border-bottom solid 1px #dedede
    font-family '宋体'
    .part-title
      font-size 22px
      line-height 40px
      color #565656
      display inline-block
      border-bottom $main-color 2px solid
      margin-right 10px
    .english-title
      font-style normal
      font-size 14px
      color rgba(168, 168, 168, 0.8)
    .more
      display inline-block
      float right
      width 70px
      height 26px
      background-color $main-color
      border-radius 4px
      color #ffffff
      text-align center
      line-height 26px
      font-size 12px
      margin-top 7px
  .digital-swiper
    margin-top 15px
    .slide-box
      width 220px
      padding 20px
      box-sizing border-box
      background #fafafa
      margin-right 10px
      .digital-slide-box
        display block
        text-align center
        cursor pointer
        .digital-slide-img
          width 100%
          height 184px
        .digital-slide-desc
          font-family '宋体'
          font-weight bold
          font-size 16px
          overflow hidden
          white-space nowrap
          text-overflow ellipsis
          color #333
          margin 10px 0
</style>
