<template>
    <div>
      <Header></Header>
      <div class="main">
        <div class="left">
          <div class="left-title">
            <div class="title">
              公司介绍和荣誉
            </div>
          </div>
          <div class="tab-list">
            <ul>
              <li :class="{active: tab == 0}" @click="tab = 0">公司介绍</li>
              <li :class="{active: tab == 1}" @click="tab = 1">公司荣誉</li>
            </ul>
          </div>
        </div>
        <div class="right">
          <div class="location">
            当前位置：<router-link to="/">首页</router-link> > 公司介绍和荣誉
          </div>
          <div class="right-content" v-if="tab == 0" v-html="introContent"></div>
          <div class="right-content qualify-list" v-if="tab == 1">
            <ul v-if="hasData">
              <li v-for="(honor, idx) in honorList" :key="idx" @click="goDetail(honor.newsContentLink, honor.templateRecordUrl, honor.newsContentType, honor.newsContentContent)">
                <div class="img-box">
                  <img :src="requestUrl + '/news/route/file/downloadfile/true/' + honor.newsContentCoverList" alt="">
                </div>
                <div class="img-title">
                  {{honor.newsContentTitle}}
                </div>
              </li>
            </ul>
            <div class="no-data" v-else>
              <img src="@/assets/images/no-data.png" alt="">
            </div>
          </div>
          <div class="pager" v-if="tab == 1 && hasData">
            <span @click="paging(1)">首页</span>
            <span @click="paging(page.page - 1)" v-if="page.page > 1">上一页</span>
            <ul v-if="page.totalPage > 0 && page.totalPage <= 5">
              <li v-for="cpage in page.totalPage" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
                {{cpage}}
              </li>
            </ul>
            <ul v-if="page.totalPage > 5">
              <li v-if="page.page < 3" v-for="cpage in 5" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
                {{cpage}}
              </li>
              <li v-if="page.page > page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.totalPage - 5 + cpage)}" :key="cpage" @click="paging(page.totalPage - 5 + cpage)">
                {{page.totalPage - 5 + cpage}}
              </li>
              <li v-if="page.page >= 3 && page.page <= page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.page - (3 - cpage))}" :key="cpage" @click="paging(page.page - (3 - cpage))">
                {{page.page - (3 - cpage)}}
              </li>
            </ul>
            <span @click="paging(page.page + 1)" v-if="page.page < page.totalPage">下一页</span>
            <span @click="paging(page.totalPage)">尾页</span>
          </div>
        </div>
      </div>
      <div class="loading" v-if="isLoading">
        <img src="@/assets/images/loading.gif" alt="">
      </div>
      <Footer></Footer>
    </div>
</template>

<script>
import Header from '@/assets/components/Header'
import Footer from '@/assets/components/Footer'
import url from '@/assets/public/url'
import axios from 'axios'
export default {
    name: 'CompanyQualify',
    components: {
      Header,
      Footer
    },
    data () {
        return {
          requestUrl: url.url,
          tab: 0,
          page: {
            page: 1,
            rows: 12,
            totalPage: 10,
            newsDirectoriesId: 'a6674c61-ff68-4364-a9c4-61af3e4a3b58',
          },
          introContent: '',
          honorList: [],
          isLoading: false
        }
    },
    computed: {
      hasData () {
        return this.honorList.length > 0
      }
    },
    methods: {
      goDetail: function (link, url, type, outlink) {
        if (type === '6') {
          window.open(outlink)
        } else {
          if (link) {
            window.open(link)
          } else {
            window.location.href = this.url + url
          }
        }
      },
      getIntro: function () {
        var self = this
        var info = {
          page: 1,
          rows: 10,
          newsDirectoriesId: 'a2c3ed88-5ea4-4a60-8af6-f25733e6886f',
        }
        self.isLoading = true
        axios.get(self.requestUrl + '/news/app/newscontent/listpagenewscontentrelease', {
          params: info
        }).then(function (res) {
          self.getIntroDetail(res.data.rows[0].newsContentId)
        })
      },
      getIntroDetail: function (id) {
        var self = this
        axios.get(self.requestUrl + '/news/app/newscontent/getnewscontentbyidrelease/' + id).then(function (res) {
          self.introContent = res.data.newsContentContent
          self.isLoading = false
        })
      },
      getHonor: function () {
        var self = this
        self.isLoading = true
        axios.get(self.requestUrl + '/news/app/newscontent/listpagenewscontentrelease', {
          params: self.page
        }).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.honorList = res.data.rows
          self.page.page = res.data.page
          self.page.totalPage = Math.ceil(res.data.total / self.page.rows)
          self.isLoading = false
        })
      },
      paging: function (page) {
        this.page.page = page
        // this.isLoading = true
        this.getHonor()
      },
    },
    mounted: function () {
      this.getIntro()
      this.getHonor()
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.loading
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
  background rgba(255,255,255,0.6)
  padding 30px
  border-radius 10px
  box-shadow 0 0 17px #DEDEDE
.no-data
  padding 80px 0
  text-align center
  img
    width 200px
.main
  width 1200px
  margin 20px auto
  overflow hidden
  .left
    width 350px
    float left
    padding 0 20px
    box-sizing border-box
    border 1px solid #e3e3e3
    border-bottom 3px solid #e3e3e3
    .left-title
      height 50px
      font-size 16px
      color #333
      border-bottom 1px solid #e3e3e3
      .title
        display inline-block
        border-top 4px solid #ff4f01
        line-height 46px
        box-sizing border-box
    .tab-list
      padding 20px 0
      ul
        li
          border-bottom 1px dashed #e3e3e3
          padding-left 30px
          height 45px
          line-height 45px
          box-sizing border-box
          font-size 16px
          color #333
          position relative
          cursor pointer
          &.active
            background #ededed
            color #ff4f01
            &:after
              content ''
              display block
              width 3px
              height 100%
              background #ff4f01
              position absolute
              top 0
              left 0
  .right
    float right
    width 830px
    padding 0 20px
    box-sizing border-box
    border 1px solid #e3e3e3
    border-bottom 3px solid #e3e3e3
    .location
      height 50px
      line-height 50px
      border-bottom 1px solid #e3e3e3
      font-size 14px
      color #333
      a
        color #333
    .right-content
      margin 20px 0
      min-height 500px
      h3
        font-size 18px
        text-align center
        margin-bottom 20px
        color #333
      p
        font-size 14px
        line-height 25px
        text-indent 28px
        margin-bottom 20px
    .pager
      text-align center
      font-size 0
      margin-bottom 20px
      span
        display inline-block
        padding 0 15px
        line-height 30px
        color #333
        font-size 14px
        margin 0 5px
        vertical-align middle
        cursor pointer
        border 1px solid #CCCCCC
      ul
        display inline-block
        overflow hidden
        vertical-align middle
        li
          width 30px
          line-height 30px
          float left
          margin-right 10px
          cursor pointer
          text-align center
          font-size 14px
          color #333
          border 1px solid #CCCCCC
          &.active
            color: #ff4f01
            border 1px solid #ff4f01
            box-sizing border-box
          &:last-child
            margin 0
    .qualify-list
      padding 0 20px
      ul
        min-height 616px
        &:after
          content ''
          display block
          clear both
        li
          width 32%
          margin-right 2%
          float left
          margin-bottom 10px
          cursor pointer
          &:nth-child(3n)
            margin-right 0
          &:hover
            .img-title
              color #ff4f01
          .img-box
            padding 3px
            border 1px solid #e3e3e3
            img
              width 100%
              height 180px
          .img-title
            text-align center
            line-height 40px
            font-size 14px
            color #333
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
</style>
