<template>
  <div :style="{ marginLeft: divLeft, width: imgWidth }" class="div_out">
    <slider
      class="slider"
      :style="sliderStyle"
      :interval="interval"
      @change="change"
      :auto-play="autoplay"
      :infinite="infinite"
    >
      <div v-for="(item, index) in slItems" :key="index" @click="imgClicked(item, index)">
        <image
          :resize="imgResize"
          :style="{ width: imgWidth, height: imgHeight, backgroundColor: imageBgColor }"
          :src="item.url"
          :placeholder="phImgUrl"
          class="image"
        >
        </image>
      </div>
      <indicator class="indicator" :style="indicatorStyle" v-if="showIndicator && !_isColmo"></indicator>
    </slider>
    <div class="indicator-box" v-if="showIndicator && _isColmo">
      <div
        :class="['indicator-item', i === slItems.length - 1 && 'isLast', i == active && 'active']"
        :style="indicatorStyle"
        v-for="(item, i) in slItems"
        :key="i"
      ></div>
    </div>
  </div>
</template>

<style>
.indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  item-color: rgba(255, 255, 255, 0.5);
  item-selectedcolor: rgba(255, 255, 255, 1);
  item-size: 14px;
}
.slider {
  /* background-color: #f2f2f2; */
  /* margin-left: 32px; */
  border-radius: 16px;
}
.image {
  border-radius: 16px;
  /* background-color: #f2f2f2; */
}
.div_out {
  border-radius: 16px;
  position: relative;
}
</style>
<style scoped src="./colmo.css"></style>

<script>
const icon = require('../setting/icon.base64')
var PLACEHOLDERIMAGE = icon['ic_img_null@2x']
const modal = weex.requireModule('modal')
import ColmoMixin from '../../mixins/colmo'

export default {
  mixins: [ColmoMixin],
  props: {
    sliderStyle: {
      type: Object,
      default: () => ({
        width: '686px',
        height: '280px',
        position: 'relative'
      })
    },
    indicatorStyle: {
      type: Object,
      default: () => ({})
    },
    items: {
      type: Array,
      default: () => []
    },
    interval: {
      type: Number,
      default: 3000
    },
    autoplay: {
      type: Boolean,
      default: true
    },
    infinite: {
      type: Boolean,
      default: true
    },
    imgResize: {
      type: String,
      default: 'cover'
    },
    imgWidth: {
      type: String,
      default: '686px'
    },
    divLeft: {
      type: String,
      default: '32px'
    },
    imgHeight: {
      type: String,
      default: '280px'
    },
    showIndicator: {
      type: Boolean,
      default: true
    },
    phImgUrl: {
      type: String,
      default: PLACEHOLDERIMAGE
    },
    imageBgColor: {
      type: String,
      default: '#f2f2f2'
    }
  },
  data: function() {
    return {
      slItems: [],
      active: 0
    }
  },
  created() {
    if (this.items.length > 10) {
      this.slItems.splice(0)
      this.slItems = this.items.slice(0, 10)
    } else if (this.items.length <= 10) {
      this.slItems.splice(0)
      this.slItems = this.items.slice(0)
    }
  },
  methods: {
    imgClicked(target, index) {
      this.$emit('dofSwiperClicked', { target, index })
    },
    change(val) {
      this.active = val.index
    }
  }
}
</script>
