<script setup lang="ts">
import { ref } from 'vue'

const request = function ({ pageNo }: any) {
  return new Promise(resolve => {
    setTimeout(() => {
      const data = {
        list: [
          {
            id: 1,
            label: '研发1组',
            children: [
              {
                id: 4,
                label: '张三'
              }
            ]
          },
          {
            id: 2,
            label: '研发2组',
            children: [
              {
                id: 5,
                label: '李四'
              },
              {
                id: 6,
                label: '王武'
              }
            ]
          },
          {
            id: 3,
            label: '警务协作平台',
            children: [
              {
                id: 7,
                label: '监区负责人'
              },
              {
                id: 8,
                label: '监区1',
                children: [
                  {
                    id: 9,
                    label: '1区领导'
                  },
                  {
                    id: 10,
                    label: '测试人员'
                  }
                ]
              }
            ]
          }
        ]
      }
      resolve(data)
    }, 1500)
  })
}

const data = ref<any>([])

const tabsList = ref<any>([
  {
    label: '部门',
    children: []
  },
  {
    label: '角色',
    children: []
  },
  {
    label: '岗位',
    children: []
  }
])
const getlist = (res: any) => {
  console.log('拿到的数据', res)
}
</script>

<template>
  <el-card header="选择组织" shadow="never">
    {{ data }}
    <el-form label-width="80px" style="max-width: 320px" @submit.prevent="">
      <el-form-item label="选择组织">
        <fs-complex-select
          v-model="data"
          :request="request"
          :tabsList="tabsList"
          @clickChild="getlist"
        ></fs-complex-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style scoped lang="scss"></style>
