<template>
  <!-- 轮播图栏目 -->
  <div class="home-carousel">
    <el-carousel v-loading="loading" :interval="interval">
      <el-carousel-item
        v-for="item in imgList"
        :key="item.id"
        style="text-align: center"
      >
        <el-image
          :src="item.imgUrl"
          fit="cover"
          @click="openParticulars(item.id)"
        ></el-image>
      </el-carousel-item>
    </el-carousel>
    <carousel-detail ref="carouselDetail" />
  </div>
</template>

<script>
  import { getNewsList } from '@/api/portal.js'
  import { fileUrl } from '@/api/portal.js'
  import CarouselDetail from './CarouselDetail.vue'
  export default {
    name: 'HomeCarousel',
    components: {
      CarouselDetail,
    },
    props: {
      classifyId: {
        type: String,
        default: 'all',
      },
      height: {
        type: [String, Number],
        default: 500,
      },
      interval: {
        type: [String, Number],
        default: 3000,
      },
    },
    data() {
      return {
        loading: false,
        imgList: [],
      }
    },
    created() {
      this.initData()
    },
    methods: {
      async initData() {
        this.loading = true
        const list = await getNewsList(this.classifyId)
        if (list && list.length) {
          for (let i = 0; i < list.length; i++) {
            const imgUrl = fileUrl(list[i].rotatingDisplayPictures)
            list[i].imgUrl = imgUrl
          }
          this.imgList = list
          this.loading = false
        }
      },
      openParticulars(id) {
        this.$refs.carouselDetail.openDetailDialog(id)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .home-carousel {
  }
</style>
