<template>
    <div class="notice">
      <div class="notice-container">
        <div class="notice-title">
          <span>最新公告<em>/Latest announcement</em></span>
          <router-link to="/notice">更多></router-link>
        </div>
        <div class="notice-list">
          <router-link :to="{path: '/detail', query: {contentId: firstNotice.contentId}}" tag="div" class="first" :title="firstNotice.title">
            <img :src="newsUrl + 'route/file/download/true/' + firstNotice.coverPhotos" alt="">
            <p>{{ firstNotice.title }}</p>
          </router-link>
          <div class="list">
            <ul>
              <router-link :to="{path: '/detail', query: {contentId: news.contentId}}" tag="li" v-for="(news,idx) in noticeList" :key="idx" :title="news.title">
                <div class="news-title">
                  <a href="javascript: void(0);">{{ news.title }}</a>
                  <span>{{ news.publishDate }}</span>
                </div>
                <p>{{ news.summary }}</p>
              </router-link>
            </ul>
          </div>
        </div>
      </div>
      <div class="link" v-if="!token">
        <h3>身份登录<em>/Identity login</em></h3>
        <router-link to="/login">
          <img src="@/assets/images/login-box1.png" alt="">
        </router-link>
        <a href="http://1.180.60.42:8092/signup/" target="_blank">
          <img src="@/assets/images/login-box2.png" alt="">
        </a>
      </div>
      <div class="mid" v-else>
        <h3>线上查询<em>/Online enquiry</em></h3>
        <div class="mid-box">
          <a href="javascript: void(0);" @click="goCenter(1)"></a>
          <a href="javascript: void(0);" @click="goCenter(3)"></a>
          <a href="javascript: void(0);" @click="goCenter(4)"></a>
          <a href="javascript: void(0);" @click="goCenter(5)"></a>
        </div>
      </div>
    </div>
</template>

<script>
import MidLink from './MidLink'
import url from '@/assets/public/url'
export default {
    name: 'Notice',
    components: {
      MidLink
    },
    props: {
      noticeList: Array,
      firstNotice: Object
    },
    watch: {
      token: function () {
        if (this.token) {
          this.isFull = false
        } else {
          this.isFull = true
        }
      }
    },
    data () {
        return {
          token: window.sessionStorage.getItem('token'),
          isFull: false,
          newsUrl: url.signUrl,
        }
    },
    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 45px
  overflow hidden
  .notice-container
    float left
    width 845px
    box-sizing border-box
    .notice-title
      height 50px
      span
        display inline-block
        line-height 50px
        font-size 24px
        color #005aa5
        em
          color #999
          font-size 16px
          margin-left 10px
      a
        float right
        font-size 18px
        line-height 50px
        color #0d6ec0
    .notice-list
      overflow hidden
      .first
        float left
        width 420px
        height 305px
        cursor pointer
        position relative
        p
          position absolute
          left 0
          right 0
          bottom 0
          padding 0 10px
          height 35px
          line-height 35px
          background rgba(0,0,0,0.6)
          font-size 16px
          color #fff
          white-space nowrap
          overflow hidden
          text-overflow ellipsis
        img
          width 100%
          height 100%
      .list
        float right
        width 405px
        ul
          li
            cursor pointer
            padding-bottom 15px
            border-bottom 1px dashed #dcdcdc
            margin-bottom 15px
            &:last-child
              margin-bottom 0
            .news-title
              margin-bottom 5px
              a
                font-size 16px
                color #333
                display inline-block
                max-width 70%
                white-space nowrap
                overflow hidden
                text-overflow ellipsis
                &:hover
                  color #005aa5
              span
                float right
                font-size 16px
                color #333
            p
              font-size 14px
              color #999
              white-space nowrap
              overflow hidden
              text-overflow ellipsis
    &.full
      width 100%
  .link
    float right
    width 315px
    padding 20px 20px 15px
    box-sizing border-box
    background url("~@/assets/images/login-box-bg.png") no-repeat center
    background-size 100% 100%
    h3
      font-size 24px
      color #005aa5
      font-weight normal
      margin-bottom 25px
      em
        font-size 16px
        color #999
        margin-left 10px
    a
      display block
      width 100%
      margin-bottom 30px
      &:last-child
        margin-bottom 0
      img
        width 100%
  .mid
    float right
    width 315px
    padding 20px 20px 15px
    box-sizing border-box
    background url("~@/assets/images/login-box-bg.png") no-repeat center
    background-size 100% 100%
    h3
      font-size 24px
      color #005aa5
      font-weight normal
      margin-bottom 20px
      em
        font-size 16px
        color #999
        margin-left 10px
        .mid-box
          overflow hidden
    a
      width 125px
      height 125px
      display block
      margin-bottom 20px
      &:nth-child(odd)
        float left
      &:nth-child(even)
        float right
      &:nth-child(1)
        background url("~@/assets/images/online1.png") no-repeat
        background-size 100% 100%
        &:hover
          background url("~@/assets/images/online1-on.png") no-repeat
          background-size 100% 100%
      &:nth-child(2)
        background url("~@/assets/images/online2.png") no-repeat
        background-size 100% 100%
        &:hover
          background url("~@/assets/images/online2-on.png") no-repeat
          background-size 100% 100%
      &:nth-child(3)
        background url("~@/assets/images/online3.png") no-repeat
        background-size 100% 100%
        margin-bottom 0
        &:hover
          background url("~@/assets/images/online3-on.png") no-repeat
          background-size 100% 100%
      &:last-child
        background url("~@/assets/images/online4.png") no-repeat
        background-size 100% 100%
        margin-bottom 0
        &:hover
          background url("~@/assets/images/online4-on.png") no-repeat
          background-size 100% 100%
</style>
