<template>
    <div class="notice">
      <div class="notice-container">
        <div class="notice-title">
          <span>最新公告</span>
          <router-link to="/notice">更多></router-link>
        </div>
        <div class="notice-list">
          <ul>
            <li v-for="news in noticeList">
              <div class="date">
                <h3>{{ news.date }}</h3>
                <p>{{ news.publishDate }}</p>
              </div>
              <router-link :to="{path: '/detail', query: {contentId: news.contentId}}">{{ news.title }}</router-link>
            </li>
          </ul>
        </div>
      </div>
      <div class="link" v-if="!token">
        <router-link to="/login">
          <img src="@/assets/images/notice-img1.png" alt="">
        </router-link>
        <a href="http://124.67.110.246:8081/signup" target="_blank">
          <img src="@/assets/images/notice-img2.png" alt="">
        </a>
<!--        <router-link to="/">-->
<!--          <img src="@/assets/images/notice-img3.png" alt="">-->
<!--        </router-link>-->
      </div>
      <div class="mid" v-else>
        <ul>
          <li @click="goCenter(1)">
            <div class="link-img link-img1"></div>
            <h3>网上报名</h3>
          </li>
          <li @click="goCenter(3)">
            <div class="link-img link-img2"></div>
            <h3>打印准考证</h3>
          </li>
          <li @click="goCenter(4)">
            <div class="link-img link-img3"></div>
            <h3>成绩查询</h3>
          </li>
          <li @click="goCenter(5)">
            <div class="link-img link-img4"></div>
            <h3>证书查询</h3>
          </li>
          <!--        <li>-->
          <!--          <div class="link-img link-img5"></div>-->
          <!--          <h3>证书领取</h3>-->
          <!--        </li>-->
          <!--        <li>-->
          <!--          <div class="link-img link-img6"></div>-->
          <!--          <h3>补证&变更</h3>-->
          <!--        </li>-->
          <!--        <router-link to="/question" tag="li">-->
          <!--          <div class="link-img link-img7"></div>-->
          <!--          <h3>常见问题</h3>-->
          <!--        </router-link>-->
        </ul>
      </div>
    </div>
</template>

<script>
import MidLink from './MidLink'
export default {
    name: 'Notice',
    components: {
      MidLink
    },
    props: {
      noticeList: Array
    },
    watch: {
      token: function () {
        if (this.token) {
          this.isFull = false
        } else {
          this.isFull = true
        }
      }
    },
    data () {
        return {
          token: window.sessionStorage.getItem('token'),
          isFull: false
        }
    },
    methods: {
      goCenter: function (tab) {
        if (this.token) {
          this.$router.push({path: '/center', query:{tab: tab}})
        } else {
          this.$router.push('/login')
        }
      }
    },
    mounted: function () {}
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.notice
  width 1200px
  margin 30px auto 15px
  overflow hidden
  .notice-container
    float left
    width 815px
    border 1px solid #f1f1f1
    box-sizing border-box
    padding 0 10px
    .notice-title
      border-bottom 1px solid #f1f1f1
      height 50px
      span
        display inline-block
        line-height 50px
        font-size 24px
        color #0d6ec0
        font-weight bold
        padding 0 10px
        position relative
        &:after
          content ''
          width 100%
          height 2px
          background #e2a30c
          position absolute
          bottom 0
          left 0
      a
        float right
        font-size 18px
        line-height 50px
        color #0d6ec0
    .notice-list
      ul
        height 419px
        li
          padding 20px 0
          border-bottom 1px solid #f1f1f1
          overflow hidden
          &:last-child
            border none
          .date
            float left
            width 95px
            border-right 1px solid #f1f1f1
            box-sizing border-box
            text-align center
            color #0d6ec0
            h3
              font-size 22px
              line-height 22px
            p
              font-size 16px
          a
            display inline-block
            max-width 685px
            padding 0 20px
            line-height 43px
            box-sizing border-box
            font-size 18px
            color #000
            float left
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
            &:hover
              color #0d6ec0
    &.full
      width 100%
  .link
    float right
    width 380px
    a
      display block
      width 100%
      height 154px
      margin-bottom 5px
      &:last-child
        margin-bottom 0
      img
        width 100%
        height 100%
  .mid
    width 380px
    float right
    ul
    &:after
      content ''
      display block
      clear both
    li
      width 49.5%
      height 234px
      border 1px solid #f1f1f1
      box-sizing border-box
      text-align center
      cursor pointer
      margin-bottom 5px
      &:nth-child(odd)
        float left
      &:nth-child(even)
        float right
      .link-img
        margin 0 auto
        background url("~@/assets/images/icon_aggregate.png") no-repeat
        &.link-img1
          width 100px
          height 106px
          background-position 0 -112px
          margin-top 27px
          margin-bottom 18px
        &.link-img2
          width 91px
          height 70px
          background-position -131px 0
          margin-top 43px
          margin-bottom 38px
        &.link-img3
          width 80px
          height 84px
          background-position -252px 0
          margin-top 37px
          margin-bottom 29px
        &.link-img4
          width 79px
          height 78px
          background-position -362px 0
          margin-top 42px
          margin-bottom 28px
        &.link-img5
          width 84px
          height 83px
          background-position -458px 0
          margin-top 45px
          margin-bottom 21px
        &.link-img6
          width 81px
          height 87px
          background-position -567px 0
          margin-top 42px
          margin-bottom 30px
        &.link-img7
          width 90px
          height 80px
          background-position -678px 0
          margin-top 44px
          margin-bottom 25px
      &:hover
        background linear-gradient(to right, #27b5e9 , #32c9ef)
        .link-img1
          background-position 0 0
        .link-img2
          background-position -131px -75px
        .link-img3
          background-position -252px -86px
        .link-img4
          background-position -362px -87px
        .link-img5
          background-position -458px -82px
        .link-img6
          background-position -567px -80px
        .link-img7
          background-position -678px -85px
        h3
          color #fff
      h3
        font-size 30px
        font-weight 500
        color #1c91f4
</style>
