<template>
  <div id="xiazai">
    <el-row style="width:247px;height:369px;" v-loading="loading">
      <el-col :span="24" class="top">
        <el-col :span="16" class="topTit">
          <span>{{ xiazaiList.title || title }}</span>
        </el-col>
        <el-col :span="8" class="topLink">
          <el-link :underline="false" @click="$router.push({ path: path, query: { title: xiazaiList.title } })"
            >more<i class="el-icon-d-arrow-right"></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}` })">
          <p class="title textOver">{{ item.title }}</p>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'xiazai',
  props: {
    xiazaiList: null,
  },
  components: {},
  data: () => ({
    title: '下载专区',
    loading: true,
    infoList: [],
    path: undefined,
  }),
  watch: {
    xiazaiList: {
      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 xiazaiList = _.get(item, `children`);
        if (xiazaiList) {
          notice = notice.concat(notice, xiazaiList);
        }
      }
      this.$set(this, `infoList`, notice);
      this.loading = false;
    },
  },
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
.textOver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top {
  height: 39px;
  line-height: 39px;
  border-bottom: 1px solid #ccc;
}
.top .topTit span {
  display: inline-block;
  width: 110px;
  height: 39px;
  line-height: 39px;
  text-align: center;
  color: #000;
  font-size: 16px;
  border-bottom: 1px solid #176ebb;
}
.top .topLink {
  height: 39px;
  line-height: 39px;
  text-align: center;
}
.top .topLink .el-link {
  height: 39px;
  line-height: 39px;
  text-align: center;
  color: #000;
  font-size: 16px;
  text-transform: uppercase;
}
.top .topLink:hover .el-link {
  color: #a32324;
}
.list {
  padding: 10px;
}
.list .title {
  font-size: 16px;
}
.list:hover {
  cursor: pointer;
}
.list:hover .title {
  color: #a32324;
}
</style>
