<template>
  <div id="notice">
    <el-row>
      <el-col :span="24" class="notice" v-if="haveData(notice)">
        <el-col :span="24" class="topTit">
          <el-col :span="18">
            <span :style="`border-color:${borderColor}`">{{ notice.title }}</span>
          </el-col>
          <el-col :span="5" style="text-align:right">
            <el-link :underline="false" :style="`color:${Color}`" @click="$router.push({ path: `/info/list/${notice.column.id}` })">
              MORE<i class="el-icon-video-play"></i>
            </el-link>
          </el-col>
        </el-col>
        <el-col :span="24" class="noticeMain">
          <el-col :span="24" class="noticeList" v-for="(item, index) in notice.infoList" :key="index" :name="`${index}`" @click.native="$turnTo(item)">
            <!-- $router.push({ path: `/info/detail?id=${item.id}` }) -->
            <el-col :span="4" class="time">
              {{ item.publish_time | getDate }}
            </el-col>
            <el-col :span="20" class="title">
              <el-link :underline="false">
                <p class="textOver" :title="item.title">{{ item.title }}</p>
              </el-link>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
      <el-col :span="24" v-else>
        <no-data></no-data>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import noData from '@publics/src/layout/noData.vue';
import _ from 'lodash';
export default {
  name: 'notice',
  props: {
    notice: null,
  },
  components: {
    noData,
  },
  data: () => ({
    borderColor: '#850000',
    Color: '#850000',
    test: '',
  }),
  created() {},
  computed: {},
  methods: {
    haveData(data) {
      let res = false;
      if (data !== null) {
        if (_.isArray(data)) {
          return data.length > 0;
        } else {
          let object = _.get(data, 'children', undefined);
          if (object === undefined) {
            return false;
          } else {
            return this.haveData(object);
          }
        }
      }
    },
  },
  filters: {
    getDate(date) {
      if (date) {
        let arr = date.split('-');
        return `${arr[1]}-${arr[2]}`;
      }
      return '';
    },
  },
};
</script>

<style lang="less" scoped>
p {
  margin: 0;
  padding: 0;
}
.textOver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notice {
  padding: 10px;
}
.topTit {
  border-bottom: 1px solid #ccc;
}
.topTit span {
  display: inline-block;
  height: 30px;
  border-bottom: 1px solid transparent;
}
.noticeList {
  padding: 7px 0;
  border-bottom: 1px dashed #ccc;
}
.noticeList .time {
  height: 38px;
  line-height: 38px;
  text-align: center;
  background: #850000;
  color: #fff;
  font-size: 18px;
}
.noticeList .title p {
  width: 290px;
  padding: 10px;
}
</style>
