<template>
  <el-carousel indicator-position="none" height="500px" class="carousel">
    <el-carousel-item v-for="(item, index) in bannerList" :key="index">
      <img :src="item.path" alt="banner" class="banner" @click="btn(item)">
    </el-carousel-item>
  </el-carousel>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('banner')
export default {
  components: {},
  data () {
    return {}
  },
  methods: {
    ...mapActions(['getbanner']),
    btn (e) {
      localStorage.setItem('itemId', -1)
      const routeData = this.$router.resolve({
        path: `/www/page/${e._id}`,
        query: { type: 'banenr' }
      })
      window.open(routeData.href)
    }
  },
  async mounted () {
    await this.getbanner()
  },
  computed: {
    ...mapState(['bannerList'])
  }
}
</script>

<style lang="less" scoped>
.carousel {
  margin-top: 10px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
