<template>
  <BasicModal :title="title" @register="registerModal" :minHeight="40" :width="600" @ok="handleOk" :canFullscreen="false">
    <table style="width: 100%; margin-top: 8px">
      <tr>
        <td style="width: 80px; vertical-align: middle">
          <span>选择用户：</span>
        </td>
        <td style="vertical-align: middle">
          <a-input
            :value="selectedUser ? selectedUser.realname : ''"
            :placeholder="'请选择人员'"
            disabled
            style="width: 100%"
          >
            <template v-if="selectedUser" #suffix>
              <CloseCircleOutlined @click="selectedUser = null" style="cursor: pointer; color: rgba(0,0,0,0.45)" />
            </template>
          </a-input>
        </td>
        <td style="width: 80px; vertical-align: middle; padding-left: 8px">
          <a-button type="primary" @click="openSelectModal">选择</a-button>
        </td>
      </tr>
    </table>

    <a-modal
      :title="'选择' + title"
      :width="1000"
      v-model:open="selectVisible"
      centered
      :destroyOnClose="true"
      :okButtonProps="{ disabled: !tempSelectedUser }"
      @ok="onSelectConfirm"
    >
      <SzSingleDeptUserSelect ref="selectRef" :departId="innerDepartId" :secLevel="0" :role="1" :checkedUser="tempSelectedUser" @select="onUserSelect" />
    </a-modal>
  </BasicModal>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { useUserStore } from '/@/store/modules/user';
import { CloseCircleOutlined } from '@ant-design/icons-vue';
import SzSingleDeptUserSelect from './SzSingleDeptUserSelect.vue';
import type { UserItem } from './types';

const props = withDefaults(
  defineProps<{
    title?: string;
    departId?: string;
  }>(),
  {
    title: '选择人员',
    departId: '',
  }
);

const emit = defineEmits(['selected', 'register']);

const userStore = useUserStore();
const selectRef = ref<InstanceType<typeof SzSingleDeptUserSelect> | null>(null);
const taskId = ref('');
const selectedUser = ref<UserItem | null>(null);
const tempSelectedUser = ref<UserItem | null>(null);
const selectVisible = ref(false);

const innerDepartId = computed(() => {
  return props.departId || userStore.getUserInfo?.orgCode || '';
});

const [registerModal, { closeModal }] = useModalInner((data) => {
  selectedUser.value = null;
  tempSelectedUser.value = null;
  taskId.value = data.taskId || '';
});

function openSelectModal() {
  tempSelectedUser.value = selectedUser.value ? { ...selectedUser.value } : null;
  selectVisible.value = true;
}

function onUserSelect(user: UserItem | null) {
  tempSelectedUser.value = user;
}

function onSelectConfirm() {
  if (!tempSelectedUser.value) return;
  selectedUser.value = tempSelectedUser.value;
  selectVisible.value = false;
}

function handleOk() {
  if (!selectedUser.value) return;
  emit('selected', {
    taskId: taskId.value,
    taskAssignee: selectedUser.value.id,
    taskAssigneeName: selectedUser.value.realname,
  });
  closeModal();
}
</script>

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