<template>
  <div>
    <div style="text-align: center" v-if="hasTabs">
      <el-radio-group v-model="radioActive" class="my-radio-group">
        <el-radio-button label="20">通知公告</el-radio-button>
        <el-radio-button label="12">工作动态</el-radio-button>
      </el-radio-group>
    </div>
    <div class="notice-main">
      <ul class="notice-list" v-if="list.length">
        <li :key="index" v-for="(item, index) in list">
          <router-link :to="{ path: '/news/detail', query: { id: item.id, type: 'home', category_id: radioActive } }">
            <div class="text">
              <div class="p">{{ item.title }}</div>
              <div class="time">{{ item.published_time.split(' ')[0] }}</div>
            </div>
          </router-link>
        </li>
        <li>
          <router-link :to="{ path: '/news', query: { category_id: radioActive } }">
            <div class="text cen">更多通知</div>
          </router-link>
        </li>
      </ul>
      <noData v-else />
    </div>
  </div>
</template>

<script>
import noData from '@/components/noData.vue'

import { getArticle } from '@/api/article'

export default {
  components: { noData },
  props: {
    hasTabs: { type: Boolean, default: false },
    categoryId: { type: String, default: '20' },
  },
  data() {
    return {
      radioActive: this.categoryId,
      list: [],
    }
  },
  watch: {
    categoryId(val) {
      this.radioActive = val
    },
    radioActive: {
      handler() {
        this.fetchList()
      },
      immediate: true,
    },
  },
  methods: {
    async fetchList() {
      const res = await getArticle({ category_id: this.radioActive, page_size: 4 })
      this.list = res.data.list
    },
  },
}
</script>
<style lang="scss">
.my-radio-group {
  margin-bottom: 40px;
  background-color: #fff;
  border-radius: 20px !important;
  .el-radio-button__inner {
    font-size: 20px;
    min-width: 150px;
    padding: 10px 20px;
    border: 0 !important;
    border-radius: 20px !important;
  }
}
.notice-main {
  margin-top: 16px;
  .notice-list {
    width: 100%;
    background: #ffffff;
    border-radius: 4px;
    a {
      display: block;
    }
    li + li {
      border-top: 1px solid #eee;
    }
    li {
      padding: 0 20px;
      line-height: 55px;
      font-size: 18px;
      color: #444;
      .text {
        display: flex;
        .p {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .time {
          min-width: 100px;
          text-align: right;
        }
        &.cen {
          text-align: center;
        }
      }
      &:hover {
        background: #a81a42;
        border-radius: 4px;
        .text {
          color: #fff;
        }
      }
    }
  }
}
</style>
