<template>
  <wd-segmented
    v-model:value="current"
    :options="list"
    custom-class="main-view"
    @change="handleChange"
  >
    <!--    <template #label="{ option }">-->
    <!--      <view class="option-view">{{ option.value }}</view>-->
    <!--    </template>-->
  </wd-segmented>
</template>

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

const props = defineProps({
  value: {
    type: Number,
    required: true,
  },
  list: {
    type: Array,
    required: true,
  },
});

const emit = defineEmits(['update:value']);

const current = ref(0);

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

const handleChange = (value: number) => {
  current.value = value;
  emit('update:value', value);
};
</script>

<style scoped lang="scss">
.main-view {
  padding: 0;
  height: 52rpx;
  line-height: 52rpx;
  border-radius: 10rpx;
  overflow: hidden;

  :deep(.wd-segmented__item) {
    background-color: #f7f8fa;
    font-size: 26rpx;
    padding: 0;
    border-radius: 0;
    &.is-active {
      background-color: #615dff;
      color: white;
    }
  }

  :deep(.wd-segmented__item--active) {
    display: none;
    background-color: #615dff;
    //z-index: 1 !important;
    height: 100%;
    color: white !important;
  }
}

.option-view {
  //background-color: #f7f8fa;
}
</style>
