<template>
  <lc-mask :width="width"
            :height="height"
            aria-hidden="true"
            mask-bg-color="transparent"
            overlay-opacity="0.8"
            :show="show"
            :top="top"
            :show-close="false"
            @LcMaskSetHidden="maskOverlayClick">
    <slider auto-play="false"
            v-if="show"
            :style="{ height: height  + 'px'}">
      <div v-for="(v,index) in imageList"
           :style="{ height: height  + 'px'}"
           :key="index">
        <image resize="cover"
               :src="v.src"
               :style="{ height: height + 'px', width: width  + 'px'}"></image>
      </div>
      <indicator class="indicator"
                 :style="indicatorStyle"></indicator>
    </slider>
  </lc-mask>
</template>

<style scoped>
  .indicator {
    position: absolute;
    item-color: rgba(255, 195, 0, .5);
    item-selected-color: #ffc300;
    item-size: 20px;
    height: 20px;
    bottom: 24px;
  }
</style>

<script>
  import LcMask from '../lc-mask';
  export default {
    components: {
      LcMask
    },
    props: {
      width: {
        type: [Number, String],
        default: 750
      },
      top: {
        type: [Number, String]
      },
      height: {
        type: [Number, String],
        default: 750
      },
      show: {
        type: Boolean,
        default: false
      },
      imageList: Array,
      indicatorColor: {
        type: Object,
        default: () => ({
          'item-color': 'rgba(255, 195, 0, .5)',
          'item-selected-color': '#ffc300',
          'item-size': '20px'
        })
      }
    },
    computed: {
      indicatorStyle () {
        return {
          width: this.width + 'px',
          ...this.indicatorColor
        }
      }
    },
    methods: {
      maskOverlayClick () {
        this.$emit('LcLightboxOverlayClicked', {});
      }
    }
  };
</script>