<template>
    <div class="inner-container" :style="{height:height[0]+'px',fontSize:height[2]+'px'}">
        <div :style="{height:height[1]+'px',lineHeight:height[1]-2+'px'}" :class="{'now-inner':nowIndex==index}" @click="changeInner(index)" v-for="(item,index) in data" :key="'inner'+index">{{item}}</div>
    </div>
</template>

<script setup>
import { reactive, ref,onBeforeMount,toRefs  } from 'vue'
const props = defineProps({
  modelValue:{
    type: [String,Number],
    default: 0,
  },
  data: {
    type: Array,
    default: [],
  },
  default:{
    type: [String,Number],
    default: 0
  },
  height:{
    type:Array,
    default:[36,32,16]
  }
})
const emit = defineEmits(['update:modelValue','change'])

const nowIndex = ref('')

const changeInner = (val)=>{
    nowIndex.value = val
    emit('update:modelValue',val)
    emit('change',val)
}

onBeforeMount(()=>{
    nowIndex.value = props.default
})
</script>

<style scoped>
.inner-container{
    height: 36px;
	background-color: #edeef0;
	border-radius: 4px;
    padding: 2px;
    display: inline-block;
    overflow: hidden;
}
.inner-container div{
    height: 32px;
    line-height: 30px;
	border-radius: 4px;
    padding:0 15px;
    float: left;
    color: #404a62;
    cursor: pointer;
}
.inner-container .now-inner{
    background-color: #2b4695;
    color: #ffffff;
}
</style>
