<template>
  <div class="notice-mian">
    <ul class="assist-list">
      <template v-for="(item, index) in list">
        <template v-if="index >= 0 && index <= 3">
          <router-link :to="`/news/detail?id=${item.id}&type=home&tabs=${newsTabIndex}`" :key="index">
            <li>
              <div class="text">
                <div class="p">{{ item.title }}</div>
                <div class="time">{{ item.published_time.substring(item.published_time.indexOf(' '), 0) }}</div>
              </div>
            </li>
          </router-link>
        </template>
      </template>
      <li class="border-none">
        <div class="text cen" @click="goNewsPage">更多通知</div>
      </li>
    </ul>
  </div>
</template>
<script>
import action from '@action'
export default {
  data() {
    return {
      articleClassify: this.$store.state.classify,
      list: [],
      newsTabIndex: 1
    }
  },
  mounted() {
    this.newsList()
  },
  methods: {
    newsList() {
      // const loading = this.$loading({
      //   lock: true,
      //   text: 'Loading',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.7)'//
      // })
      if (!Object.keys(this.$store.state.classify).length) {
        setTimeout(() => {
          this.articleClassify = this.$store.state.classify
          this.newsList()
        }, 2000)
      } else {
        console.log(this.articleClassify, 'this.articleClassify')
        const findId = this.articleClassify[0].children.find(item => {
          return item.display_name === (this.newsTabIndex ? '工作动态' : '新闻动态')
        })
        action.articleAction.getArticle({ category_id: findId ? findId.id : 23 }).then(res => {
          this.list = res.data.list
          console.log(this.list, 'this.list')
        })
      }
    },
    goNewsPage() {
      this.$router.push({
        path: '/news',
        query: {
          type: this.newsTabIndex
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.section {
  width: 1200px;
  margin: 0 auto;
}
.notice-mian {
  display: flex;
  margin-top: 16px;
  .assist-list {
    width: 100%;
    background: #ffffff;
    border-radius: 4px;
    a {
      // &:nth-child(1){
      //   li{
      //     background: #A81A42;
      //     border-radius: 4px;
      //     .text{
      //       color: #fff;
      //     }
      //   }
      // }
    }
    li {
      padding: 0 20px;
      &:hover {
        background: #a81a42;
        border-radius: 4px;
        .text {
          color: #fff;
        }
      }
      cursor: pointer;
      &.border-none {
        border: none;
      }
      .text {
        display: flex;
        .p {
          width: 800px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .time {
          margin-left: auto;
        }
        // width: 423px;
        // margin: 0 auto;
        height: 55px;
        border-bottom: 1px solid #eee;
        line-height: 55px;
        font-size: 18px;
        color: #444444;
        &.cen {
          text-align: center;
        }
      }
    }
  }
  .slide-box {
    cursor: pointer;
    position: relative;
    width: 713px;
    height: 280px;
    margin-left: auto;
    .item-swiper {
      width: 100%;
      height: 100%;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .assist {
      display: flex;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 44px;
      background: rgba(0, 0, 0, 0.3);
      z-index: 99;
      .text {
        font-size: 14px;
        color: #ffffff;
        line-height: 44px;
        margin-left: 24px;
      }
    }
    .pagination {
      display: flex;
      margin-left: auto;
      align-items: center;
      padding-right: 40px;
      span {
        width: 8px;
        height: 8px;
        background: #000000;
        opacity: 0.2;
        border-radius: 50%;
        margin-left: 8px;
        &.active {
          opacity: 1;
          background: #fff;
        }
      }
    }
  }
}
</style>
