<template>
  <el-carousel id="carousel-card-body" :interval="4000" height="180px" type="card">
    <el-carousel-item v-for="(item,index) in contents" :key="item">
      <img :src=item alt="err" style="object-fit: cover;object-position:top;height: 180px; width: 600px" @click="jump(index)">
    </el-carousel-item>
  </el-carousel>
</template>

<script>

export default {
  name: "CarouselCard",
  data() {
    return {
      contents: [
        require("@/assets/carousel-java.png"),
        require("@/assets/carousel-SE2.png"),
        require("@/assets/seec-banner.png"),
      ],
      link:[],
    };
  },
  async created() {
    const rootPoint = (await this.$apis.queryCarouselChart()).data.data;
    console.log(rootPoint);
    for (let i = 0; i < rootPoint.length; i++) {
      this.contents[i] = rootPoint[i].imageUrl;
      this.link[i] = rootPoint[i].id;
    }
    this.$forceUpdate();
  },
  methods:{
    jump(k){
      if (this.link.length>k){
        this.$router.push({ name: "CourseDetail", params: {id:this.link[k] } });
      }
    }
  }
};
</script>

<style scoped>

</style>
