<template>
  <div id="notice" v-loading="loading">
    <el-row>
      <el-col :span="24" class="notice">
        <el-col :span="24" class="newsTop">
          <el-col :span="18" class="text">
            {{ noticeList.title || title }}
          </el-col>
          <el-col :span="6" class="link">
            <el-link :underline="false" @click="$router.push({ path: path, query: { title: noticeList.title } })">
              MORE<i class="el-icon-circle-plus-outline" style="color:#f8b024;font-weight:bold;margin:0 5px;"></i>
            </el-link>
          </el-col>
        </el-col>
        <el-col :span="24" class="info">
          <el-col :span="24" class="list" v-for="(item, index) in infoList" :key="index" @click.native="$router.push({ path: `/detail?id=${item.id}` })">
            <span class="shu"></span>
            <span class="title">{{ item.title }}</span>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'notice',
  props: {
    noticeList: null,
  },
  components: {},
  data: () => ({
    loading: true,
    title: '通知公告',
    infoList: [],
    path: undefined,
  }),
  watch: {
    noticeList: {
      handler(val) {
        if (val) this.assignData(val);
      },
    },
  },
  created() {},
  computed: {},
  methods: {
    assignData(data) {
      let columns = _.get(data, 'children');
      let notice = [];
      for (const item of columns) {
        if (!this.path) this.path = item.path;
        let noticeList = _.get(item, `children`);
        if (noticeList) {
          notice = notice.concat(notice, noticeList);
        }
      }
      this.$set(this, `infoList`, notice);
      this.loading = false;
    },
  },
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
.newsTop {
  height: 35px;
  line-height: 35px;
  border-bottom: 2px solid #0656d1;
}
.newsTop .text {
  font-size: 20px;
  color: #0874ee;
  font-weight: 600;
  padding: 0 10px;
}
.newsTop .link {
  text-align: right;
  padding: 0 5px;
}
.info {
  margin: 15px 0 0 0;
}
.list {
  padding: 9px 0;
  border-bottom: 1px dashed #ccc;
}
.list .shu {
  display: inline-block;
  width: 2px;
  height: 16px;
  background-color: transparent;
}
.list .title {
  font-size: 14px;
  color: #5b5b5b;
  display: inline-block;
  width: 358px;
  padding: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list:hover {
  cursor: pointer;
}
.list:hover .title {
  color: #333333;
}
.list:hover .shu {
  background-color: #0656d1;
}
</style>
