<script lang="ts" setup>
import { ref } from 'vue'
import { useConfig } from '@/store/modules/asideConfig'

const props = defineProps<{
  value: [number, number]
  label: string
}>()

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

const range = ref<[number, number]>(props.value || [])

const marks = {
  0: '0',
  50: '50',
  100: '100',
}
const isLoadValue = ref(false)
const configUseStore = useConfig()

configUseStore.$subscribe(() => {
  if (isLoadValue.value) {
    isLoadValue.value = false
    return
  }
  const asideValue = configUseStore.getAsideValue
  if (asideValue.izsimilarity)
    range.value = asideValue.izsimilarity
  else
    range.value = [0, 100]

  console.log(range.value, 'range.value')
  //  else {
  //   range.value = [0, 100];
  // }
})

function onChange(value: number & number[]) {
  value = value.sort((a, b) => a - b)
  range.value = value as any
  isLoadValue.value = true
  emit('update:value', range.value as any)
}
</script>

<template>
  <div class="wrapper">
    <n-collapse :default-expanded-names="['1']" arrow-placement="right">
      <n-collapse-item :title="label" name="1">
        <n-space vertical>
          <n-slider
            v-model:value="range"
            range
            :marks="marks"
            :step="10"
            @update-value="onChange"
          />
        </n-space>
      </n-collapse-item>
    </n-collapse>
  </div>
</template>

<style lang="less" scoped>
.wrapper {
  padding: 10px;
}
::v-deep(.n-collapse-item-arrow) {
  color: #999999 !important;
}
</style>
