<script setup>
import { useVModel } from '@vueuse/core'
// import StructureCascade from './StructureCascade.vue'
import StructureCascade from 'components/StructureCascade.vue'
import { getUserDeptTreeApi } from '@/api/system'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:modelValue', 'confirm'])
const show = useVModel(props, 'modelValue', emit)
const close = () => {
  show.value = false
}
const strResults = ref([])
const confirm = () => {
  emit('confirm', strResults.value)
  close()
}
const open = () => {
  console.log('open popup')
}

const treeData = ref([
  // {
  //   id: 1,
  //   name: '一级_1',
  //   children: [
  //     {
  //       id: 2,
  //       name: '二级_1-1',
  //       parentId: 1
  //     },
  //     {
  //       id: 3,
  //       name: '二级_1-2',
  //       parentId: 1
  //     }
  //   ]
  // }
])

watch(
  () => show.value,
  async (val) => {
    if (val) {
      const { data } = await getUserDeptTreeApi()
      treeData.value = data
    }
  }
)
</script>

<template>
  <up-popup :show="show" mode="top" @close="close" @open="open">
    <view w-full h-auto>
      <StructureCascade
        ref="structureCascade"
        v-model="strResults"
        top-title="组织架构"
        value-field="id"
        label-field="label"
        :tree-data="treeData"
      />
      <view w-full px-20>
        <up-button text="确认" size="small" type="primary" @tap="confirm" />
      </view>
    </view>
  </up-popup>
</template>
