<template>
    <div class="layer">
        <div v-if="type=='rect'" class="container" :style="{height: itemHeight+'px'}">
            <div class="indicator" v-for="(item,index) in itemTotal" :key="index" :style="{width:itemWidth+'px', height: itemHeight+'px','background-color':index===selectIndex?'pink':'red', 'margin-left': index==0?'':itemMargin}"></div>
        </div>
        <div v-if="type=='cir'" class="container" :style="{height: itemRadius+'px'}">
            <div class="indicator" v-for="(item,index) in itemTotal" :key="index" :style="{width:itemRadius+'px', height: itemRadius+'px','background-color':index===selectIndex?'pink':'red', 'margin-left': index==0?'':itemMargin, 'border-radius': itemRadius+'px'}"></div>
        </div>
    </div>
</template>

<style>
.layer {
    position: absolute;
    width: 750px;
    left: 0px;
    left: 0px;
    top: 0px;
    bottom: 0px;
}
.container {
    position: absolute;
    width: 750px;
    left: 0px;
    bottom: 20px;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

</style>
<script>
export default {
    props: {
        type: { type: String, defalut: "cir" },                     // 指示器形状 cir 圆形    rect 矩形
        "item-total": { type: Number, defalut: 0 },                 // 总页数
        "item-width": { type: Number, defalut: 10 },                // 指示器矩形时的宽
        "item-height": { type: Number, defalut: 10 },               // 指示器矩形时的高
        "item-radius": { type: Number, defalut: 10 },               // 指示器圆形时的半径
        "item-color": { type: String, defalut: "#CDCDCD" },         // 指示点默认颜色（未选中态）
        "item-selected-color": { type: String, defalut: "#FFFFFF" },// 指示点选中颜色
        "item-margin": { type: Number, default: 8 },                // 指示器间的间距
        "select-index": { type: Number, defalut: 0 },               // 当前显示第几页
    },
    methods: {
        
    }
}
</script>
