<!-- 嵌套列表 -->
<template>
  <div :style="{ width: item.width ? item.width + 'px' : '100%' }">
    <v-menu :close-on-content-click="closeOnContentClick" @update:modelValue="handleMenuUpdate">
      <template v-slot:activator="{ props }">
        <v-text-field
          v-bind="props"
          v-model="model_selectLabel"
          variant="outlined" hide-spin-buttons
          :density="item.dense || 'compact'"
          :type="item.type"
          :rules="item.rules"
          :disabled="item.disabled"
          :style="{width: item.width}"
          :color="item.color || 'primary'"
          :label="item.label"
          :placeholder="item.placeholder || item.label"
          :autofocus="item.autofocus"
          :required="item.required"
          :class="item.class"
          :suffix="item.suffix"
          :append-icon="item.appendIcon"
          :append-inner-icon="item.appendInnerIcon"
          :clearable="item.clearable"
          :readonly="item.readonly"
          :counter="item.counter"
          :prepend-inner-icon="item.prependInnerIcon"
          :hide-details="hideDetails || false"
          @update:modelValue="modelValueUpDate"
        ></v-text-field>
      </template>
      <listGroup
        :list="item.items"
        :option="option"
        :selectValue="value"
        class="px-1"
        style="max-height: 258px; border-radius: 5px;"
        :class="{'detailMargin': detailMargin}"
        @labelUpdate="labelTxt => labelUpdateDeal(labelTxt)"
        @clickUpdate="val => clickUpdate(val)"
      ></listGroup>
    </v-menu>
  </div>
</template>

<script setup>
import listGroup from './components/listGroup'
import { ref } from 'vue';
defineOptions({ name:'FormUI-nestedListGroup'})
const propsData = defineProps({item: Object, modelValue: [String, Number]})
const item = propsData.item
const option = {
  ...item,
  itemValue: item.itemValue || 'value',
  itemText: item.itemText || 'label',
  multiply: item.multiply || false, // 多选（待开发
  selectLevel: item.selectLevel || -1, // 可选层级，-1代表只能选最后一级
  relate: item.relate || false,
  items: []
}
const emit = defineEmits(['update:modelValue', 'change'])
const modelValueUpDate = (newText) => {
  if (option.rules) {
    model_selectLabel.value = static_selectLabel
  } else {
    model_selectLabel.value = ''
    console.log(newText)
  }
}
let static_selectLabel = ''; const model_selectLabel = ref('')
const value = ref(propsData.modelValue) // selectValue // modelValue
const clickUpdate = (val) => {
  static_selectLabel = model_selectLabel.value = val[option.itemText]
  value.value = val[option.itemValue]
  emit('update:modelValue', value.value)
  emit('change', value.value)
}
const closeOnContentClick = ref(false) // multiple

const labelUpdateDeal = (txt) => {
  static_selectLabel = model_selectLabel.value = txt
}

const hideDetails = ref(item.hideDetails || false)
const detailMargin = ref(false)

const handleMenuUpdate = (bool) => {
  if (item.hideDetails) return
  if (bool) {
    hideDetails.value = true
    detailMargin.value = true
  } else {
    hideDetails.value = item.hideDetails || false
    detailMargin.value = false
  }
}

</script>
<style lang="scss" scoped>
.showOnTop {
  bottom: 62px;
}
::-webkit-scrollbar {
  width: 4px;
  height: 10px;
  // display: none;
}
::-webkit-scrollbar-thumb, .temporaryAdd ::-webkit-scrollbar-thumb, .details_edit ::-webkit-scrollbar-thumb {
  // 滚动条-颜色
  background: #c3c3c379;
}
::-webkit-scrollbar-track, .temporaryAdd ::-webkit-scrollbar-track, .details_edit ::-webkit-scrollbar-track {
  // 滚动条-底色
  background: #e5e5e58f;
}
</style>
 