<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, watch } 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("");

watch(
  () => props.modelValue,
  () => {
    nowIndex.value = props.modelValue;
  }
);

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

onBeforeMount(() => {
  nowIndex.value = props.modelValue;
});
</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>
