<template>
  <div id="noticeNews">
    <el-row>
      <el-col :span="24" style="width:460px;height:304px;" v-loading="loading">
        <el-tabs v-model="activeName" type="card" :before-leave="handleClick">
          <el-tab-pane v-for="(item, index) in infoList" :key="index">
            <span slot="label">{{ item.title }}</span>
            <el-col :span="24" v-for="(tag, index) in item.children" :key="index" class="list" @click.native="$router.push({ path: `/detail?id=${tag.id}` })">
              <el-col :span="18" class="title">
                <i class="el-icon-caret-right icon"></i>
                <p class="textOver">{{ tag.title }}</p>
              </el-col>
              <el-col :span="5" class="date">{{ tag.meta | getDate }}</el-col>
            </el-col>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'noticeNews',
  props: {
    noticeNewsList: null,
  },
  components: {},
  data: () => ({
    activeName: '',
    infoList: [],
    loading: true,
  }),
  watch: {
    noticeNewsList: {
      handler(val) {
        if (val) this.assignData(val);
      },
    },
  },
  created() {},
  computed: {},
  methods: {
    handleClick(tab, event) {},
    assignData(data) {
      let columns = _.get(data, 'children');
      // let notice = [];
      // for (const item of columns) {
      //   if (!this.path) this.path = item.path;
      //   let noticeNewsList = _.get(item, `children`);
      //   if (noticeNewsList) {
      //     notice = notice.concat(notice, noticeNewsList);
      //   }
      // }
      this.$set(this, `infoList`, columns);
      this.loading = false;
    },
  },
  filters: {
    getDate(meta) {
      let createdAt = _.get(meta, `createdAt`);
      let date = new Date(createdAt)
        .toLocaleDateString()
        .replace('/', '-')
        .replace('/', '-');
      return date;
    },
  },
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
.textOver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/deep/.el-tabs__item {
  font-size: 16px;
}
/deep/.el-tabs--card > .el-tabs__header {
  border-bottom: 1px solid #176ebb;
}
/deep/.el-tabs__header {
  margin: 0;
}
/deep/.el-tabs--card > .el-tabs__header .el-tabs__item {
  border-bottom: none;
}
/deep/.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
}
/deep/.el-tabs__item.is-active {
  color: #fff;
  background: #176ebb;
}
.list {
  padding: 7px 10px 7px 0;
}
.list .title {
  font-size: 16px;
}
.list .title .icon {
  float: left;
  padding: 4px 4px;
  // color: #176ebb;
}
.list .date {
  font-size: 16px;
}
.list:hover {
  cursor: pointer;
}
.list:hover .title {
  color: #a32324;
}
.list:hover .date {
  color: #a32324;
}
</style>
