<template>
  <div id="news">
    <el-row>
      <el-col :span="24" class="news">
        <el-col :span="24" class="topTit">
          <el-col :span="20">
            <span :style="`border-color:${borderColor}`">{{ news.title }}</span>
          </el-col>
          <el-col :span="4" style="text-align:right;">
            <el-link :underline="false" :style="`color:${Color}`" @click="$router.push({ path: `/info/list/${news.column.id}` })">
              MORE<i class="el-icon-video-play"></i>
            </el-link>
          </el-col>
        </el-col>
        <el-col :span="24" class="newsMain">
          <el-col :span="14" class="block">
            <el-carousel ref="shubiao">
              <el-carousel-item v-for="(item, index) in news.infoList" :key="index" :name="`${index}`">
                <el-link :underline="false" @click="$router.push({ path: `/info/detail?id=${item.id}` })"><img :src="item.pic" class="newsList"/></el-link>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :span="10" class="newsLi">
            <ul>
              <li
                v-for="(tag, index) in news.infoList"
                :key="index"
                :type="tag.type"
                @mouseover="shuYi(index)"
                :class="newListActive(tag)"
                @click="$router.push({ path: `/info/detail?id=${tag.id}` })"
              >
                <el-link :underline="false" class="newsListTit">{{ tag.title }}</el-link>
              </li>
            </ul>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'news',
  props: {
    news: null,
  },
  components: {},
  data: () => ({
    borderColor: '#850000',
    Color: '#850000',
  }),
  created() {},
  computed: {},
  methods: {
    shuYi(index) {
      this.$refs.shubiao.setActiveItem(`${index}`);
    },
    // eslint-disable-next-line no-unused-vars
    newListActive(item) {},
  },
};
</script>

<style lang="less" scoped>
ul {
  margin: 0;
  padding: 0;
}
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.news {
  padding: 10px;
}
.topTit {
  border-bottom: 1px solid #ccc;
}
.topTit span {
  display: inline-block;
  height: 30px;
  border-bottom: 1px solid transparent;
}
.newsMain {
  padding: 10px 0;
}
.block {
  height: 250px;
  width: 453px;
}
.newsList {
  height: 250px;
}
.newsLi ul li {
  padding: 9px;
  border-bottom: 1px dashed #ccc;
}
.newsListTit {
  color: #606266;
}
/deep/.newsListTit .el-link--inner {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 315px;
}
</style>
