<template>
  <el-dialog
    v-model="dialogOpened"
    title="选择审批人"
    align-center
    :close-on-click-modal="false"
    style="height: 583px"
    :width="731"
    :destroy-on-close="true"
    class="workShopDialog"
  >
    <PersonGroupFilter
      ref="dialogInstance"
      :init-selected="selectedUser"
      @cancel="closeDialog"
      @submit="handlePersonDialogSubmit"
    />
  </el-dialog>
</template>

<script lang="ts" setup>
  import PersonGroupFilter from '@/components/PersonSelector/PersonGroupFilter.vue';
  import { ref } from 'vue';
  import { PersonGroupItem } from '@/types/person-group/type';

  const emits = defineEmits<{
    (e: 'submit', selectedPerson: PersonGroupItem[]): void;
  }>();

  const dialogOpened = ref(false);

  const selectedUser = ref<PersonGroupItem[]>([]);

  const handlePersonDialogSubmit = (selectedData: PersonGroupItem[]) => {
    selectedUser.value = selectedData;
    emits('submit', selectedUser.value);
  };

  function openDialog() {
    dialogOpened.value = true;
  }

  function closeDialog() {
    selectedUser.value = [];
    dialogOpened.value = false;
  }

  function setSelectedUser(selectedData: PersonGroupItem[]) {
    selectedUser.value = selectedData;
  }

  defineExpose({
    openDialog,
    closeDialog,
    setSelectedUser,
  });
</script>

<style scoped></style>
