<template>
    <view
        :style="{
            'padding-top': paddingTop,
            'padding-bottom': paddingBottom,
            'text-align': align,
        }"
        class="indicator"
    >
        <view
            v-for="(dot, index) in lengthArray"
            :key="index"
            :style="{
                backgroundColor: curIndex === index ? selectedColor : color,
            }"
            :class="{'indicator-item-selected': curIndex === index}"
            class="indicator-item"
        />
    </view>
</template>
<script>
/**
 * @file 保险商城运营banner的分页点
 * @author yinlejia
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        /**
         * 指示器的长度
         */
        length: {
            type: Number,
            default: 0
        },
        /**
         * 当前选中的索引
         */
        curIndex: {
            type: [Number, String],
            default: 0
        },
        /**
         * 方位
         */
        align: {
            type: String,
            default: 'center'
        },
        /**
         * 选中的颜色
         */
        selectedColor: {
            type: String,
            default: '#ff6050'
        },
        /**
         * 颜色
         */
        color: {
            type: String,
            default: '#d8d8d8'
        },
        /**
         * padding-top
         */
        paddingTop: {
            type: String,
            default: '0px'
        },
        /**
         * padding-bottom
         */
        paddingBottom: {
            type: String,
            default: '0px'
        }
    },
    computed: {
        lengthArray() {
            let array = [];
            for (let i = 0; i < this.length; i++) {
                array.push(i);
            }
            return array;
        }
    }
};
</script>
<style lang="less" scoped>
.indicator {
    white-space: nowrap;
    line-height: 1;
    font-size: 0;
    overflow: hidden;
}
.indicator-item {
    position: relative;
    display: inline-block;
    margin:0 2.5px;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    transition: all .38s cubic-bezier(.2, 0, .2, 1);
    &-selected {
        width: 8px;
    }
}
</style>
