<script setup lang="ts">
import { computed, ref, watch } from 'vue'

defineOptions({ name: 'MjSegment' })

const props = defineProps<{
  modelValue: any
  options: {
    label: string
    value: any
  }[]
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: any): void
}>()

const value = computed({
  get: () => props.modelValue,
  set: val => {
    emit('update:modelValue', val)
  },
})

// 选项
const values = ref([] as string[])

// 点击
function click({ index }) {
  value.value = props.options[index].value
}

watch(
  () => props.options,
  newVal => {
    values.value = newVal.map(item => item.label)
  },
  { immediate: true },
)
</script>

<template>
  <tui-segmented-control :values="values" @click="click" />
</template>
