<template>
  <q-field v-bind="attrs" v-model="valueLabel">
    <template v-slot:control>
      <div class="fit q-pt-xs" @click.stop.prevent="showOptions=true">{{ valueLabel }}</div>
    </template>
  </q-field>
  <q-dialog position="bottom" v-model="showOptions"
      class="dialog-full-height">
    <q-card class="full-width" >
      <div class="row justify-between">
        <q-btn flat color="grey" class="q-py-sm" label="取消" @click="onCancel"/>
        <q-btn flat color="primary" class="q-py-sm" label="确定" @click="onOk"/>
      </div>
      <q-separator />
      <div class="row no-warp " style="height:40vh;">
        <template  v-for="level in props.level" :key="level">
          <div class="col full-height overflow-auto">
            <q-list>
              <q-item v-for="item,i in options[level-1]" :key="i"
              @click="onClickItem(level-1,i,item)" clickable>
              <q-item-section class="" :class="{'text-primary': values[level-1]?.[props.valueKey] == item[props.valueKey]}">
                <span :class="{'text-body1':values[level-1]?.[props.valueKey] == item[props.valueKey]}">{{ item[props.labelKey] }}</span>
              </q-item-section>
              <q-item-section side>
                <q-icon name="check" size="16px" color="primary" v-if="values[level-1]?.[props.valueKey] == item[props.valueKey]"/>
              </q-item-section>
              </q-item>
            </q-list>
            <div class="safe-padding-bottom"></div>
          </div>
          <q-separator vertical />
        </template>
    </div>
    </q-card>
  </q-dialog>
</template>
<script setup>
import { useAttrs, ref, computed, watchEffect,reactive } from 'vue';
const emits = defineEmits(['update:model-value'])
const attrs = useAttrs()
const props = defineProps({
  modelValue:{type: Array},
  options:{
    type: Array,
  },
  level: {
    type: Number,
    default: 1
  },
  labelKey:{
    type: String,
    default: 'label'
  },
  valueKey:{
    type: String,
    default: 'value'
  },
  childrenKey:{
    type: String,
    default: 'children'
  }
})
const showOptions = ref(false)

const values = reactive([])
const options = reactive([props.options])
watchEffect(()=>{
  let arr = props.options
  options[0] = props.options
  for(let i=0;i<props.level;i++){
    let idx = arr?.findIndex((item)=>item[props.valueKey]==props.modelValue[i])
    if(idx>=0){
      values[i] = {
        index: idx,
        [props.valueKey]: arr[idx][props.valueKey],
        [props.labelKey]: arr[idx][props.labelKey]
      }
      arr = arr[idx][props.childrenKey]
    }else{
      values[i] = null
      arr = []
    }
    if(i+1<props.level){
      options[i+1] = arr || [];
    }
    break
  }
})
const valueLabel = computed(()=>{
  let arr = []
  for(let item of values){
    if(item){
      arr.push(item[props.labelKey])
      continue
    }
    break
  }
  return arr.join('/')
})
function onClickItem(levelIndex, index, item){
  values[levelIndex] = {
    index,
    [props.valueKey]: item[props.valueKey],
    [props.labelKey]: item[props.labelKey]
  }
  for(let i=levelIndex+1;i<values.length;i++){
    values[i] = null
  }
  if(levelIndex < props.level-1){
    options[levelIndex+1] = item[props.childrenKey]||[]
  }
}

function onCancel(){
  showOptions.value = false
}
function onOk(){
  let arr = []
  for(let item of values){
    if(item){
      arr.push(item[props.valueKey])
      continue
    }
    break
  }
  showOptions.value = false
  emits('update:model-value',arr)
}
</script>
<style lang="scss" scoped>

</style>
