<template>
  <v-select 
    v-bind="filteredAttrs" 
    :items="items" 
    item-title="codeValue" 
    item-value="code" 
    :multiple="multi"
    :menu-props="{ offsetY: true }" 
    @update:model-value="$emit('update:modelValue', $event)"
  />
</template>

<script setup>
import { ref, onMounted, useAttrs, computed } from 'vue'
import Request from "@/commons/request";

// 定义组件名称和选项
defineOptions({
  name: "VtkSelect",
  inheritAttrs: false
});

// 定义 props
const props = defineProps({
  // 数据库字段名字(DISABLE_TYPE) 或 静态的字段（0:否/1:是）
  list: {
    type: String,
    default: null,
  },
  multi: {
    type: Boolean,
    default: false,
  },
});

// 定义 emits
const emit = defineEmits(['update:modelValue']);

// 获取所有传递的属性
const attrs = useAttrs();

// 过滤属性，排除组件内部使用的属性
const filteredAttrs = computed(() => {
  const { list, multi, ...rest } = attrs;
  return rest;
});

// 响应式数据
const items = ref([]);

// 方法定义
const miscs = () => {
  Request.getForm(`dict/misc/list/${props.list}`).then((res) => {
    items.value = res.data;
  });
};

const statc = () => {
  if (!props.list) return;
  
  props.list.split("/").forEach((it) => {
    const its = it.split(":");
    items.value.push({ code: its[0], codeValue: its[1] });
  });
};

// 生命周期钩子
onMounted(() => {
  if (props.list) {
    if (props.list.includes(":")) {
      statc();
    } else {
      miscs();
    }
  }
});

// 使用方式
// <vtk-select
//   v-model="value"
//   list="YOUR_LIST"
//   variant="outlined"      <!-- 样式变体 -->
//   density="compact"       <!-- 密度 'default' | 'comfortable' | 'compact' -->
//   clearable               <!-- 可清除 -->
//   placeholder="请选择"     <!-- 占位符 -->
//   :rules="rules"          <!-- 验证规则 -->
//   disabled                <!-- 禁用状态 -->
//   readonly                <!-- 只读状态 -->
//   hide-details            <!-- 隐藏详情信息 -->
// />

</script>

<style>
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  border-radius: 3px;
  height: 100px;
  background-color: #007acc;
}
</style>