<template>
    <cube-slide ref="slide" :data="list">
      <cube-slide-item v-for="(item, index) in list" :key="index" @click.native="clickHandler(item, index)">
        <a :href="item.url">
          <ImageFormat :lazy="false" class="item-imge" :src="item.src" :width="750" :height="200"></ImageFormat>
        </a>
      </cube-slide-item>
    </cube-slide>
</template>

<script>
import Vue from 'vue'
import { Style, Slide } from 'cube-ui';
import ImgSize from '../../../../components/img-size';
// import { createNamespacedHelpers } from 'vuex';
// const {mapState} = createNamespacedHelpers('channel');

export default {
  name: 'slide',
  props: {
    list: {
      type: Array,
      default: true
    },
  },
  data() {
    return {
      items: [
        {
          url: 'http://www.didichuxing.com/',
          image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
        },
        {
          url: 'http://www.didichuxing.com/',
          image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
        },
        {
          url: 'http://www.didichuxing.com/',
          image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
        }
      ]
    }
  },
  components: {
    Style,
    Slide,
    cubeSlide: Slide,
    cubeSlideItem: Slide.Item,
    ImgSize,
  },
  computed: {
    // ...mapState(['resource'])
  },
  methods: {
    
  }
};
</script>

<style lang="scss" scoped>
.cube-slide {
  width: 100%;
  margin-bottom: 20px;
}
</style>