<!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->
<!-- Created by Tw93 on 17/07/28. -->

<template>
  
    <slider :auto-play="autoPlay" class="Imgslider"
            :interval="interval"
            :infinite="infinite"
            :style="{ height: height  + 'px', width: width  + 'px'}">
      <div v-if="type == 'normal' || type == undefined"
           v-for="(v,index) in imageList"
           :style="{ height: height  + 'px', width: width  + 'px'}"
           @click="imgClick(index)"
           :key="index">
        <image resize="cover"
               :src="v.src"
               :style="{ height: height + 'px', width: width  + 'px', borderRadius: borderRadius  + 'px'}"></image>
        <div v-if="v.imgInfo" class="imgInfo" :style="imgInfoStyle">
            <text class="imgInfo-text" :style="imgInfoTextStyle">{{v.imgInfo}}</text>
        </div>       
      </div>
      <slot ></slot>
      <indicator class="indicator" v-if="showIndicator=='true'"
                 :style="indicatorStyle"></indicator>
    </slider>

</template>

<style scoped>
  .Imgslider{ align-items: center;}
  .indicator {
    position: absolute;
    item-color: #399DE2;
    item-selected-color: #0785DB;
    item-size: 20px;
    height: 20px;
    bottom: 24px; 
  }
  .imgInfo{width: 750px; height: 60px; position: absolute; bottom: 0; left: 0;
   padding-left: 25px; justify-content: center; background-color: rgba(0,0,0,0.4);}
  .imgInfo-text{ color: #fff; font-size: 28px; lines:1; text-overflow: ellipsis;}
</style>

<script>
  import LcMask from '../lc-mask';

  export default {
    components: {
      LcMask
    },
    props: {
      type: {
        type: String,
        default: "normal" //"normal" or "custom"
      },
      autoPlay:false,
      infinite:true,
      imgInfoStyle:{
        default:''
      },
      imgInfoTextStyle:{
        default:''
      },
      interval:{
        type: String,
        default: "3000"
      },
      borderRadius: {
        type: [Number],
        default: 0
      },
      width: {
        type: [Number, String],
        default: 750
      },
      height: {
        type: [Number, String],
        default: 750
      },
      imageList: Array,
      showIndicator: true,
      indicatorColor: {
        type: Object,
        default: () => ({
          'item-color': '#399DE2',
          'item-selected-color': '#0785DB',
          'item-size': '20px'
        })
      }
    },
    computed: {
      indicatorStyle () {
        return {
          width: this.width + 'px',
          ...this.indicatorColor
        }
      }
    },
    methods: {
      imgClick (index) {
        this.$emit('lcImgClick',{index});
      }
    }
  };
</script>
