<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
import { useTaskPermissions } from '../composables/use-task-permissions';
import AssigneeCurrentPanel from './execution-assignee-current-panel.vue';
import AssigneeLogPanel from './execution-assignee-log-panel.vue';

defineOptions({ name: 'ProjectExecutionAssigneeDialog' });

interface Props {
  execution: Api.Project.ProjectExecution | null;
  assignees: Api.Project.ExecutionAssignee[];
  userOptions: Api.SystemManage.UserSimple[];
  loading: boolean;
}

interface Emits {
  (e: 'add', payload: Api.Project.CreateExecutionAssigneeParams): void;
  (e: 'inactive', assignee: Api.Project.ExecutionAssignee, payload: Api.Project.InactiveExecutionAssigneeParams): void;
  (e: 'change-owner', payload: Api.Project.ChangeExecutionOwnerParams): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const visible = defineModel<boolean>('visible', {
  default: false
});

const { canManageExecutionAssignee, canChangeExecutionOwner } = useTaskPermissions();

const resolvedCanManageAssignee = computed(() =>
  props.execution ? canManageExecutionAssignee(props.execution) : false
);
const resolvedCanChangeOwner = computed(() => (props.execution ? canChangeExecutionOwner(props.execution) : false));

type TabName = 'current' | 'log';

const activeTab = ref<TabName>('current');

const currentPanelRef = ref<InstanceType<typeof AssigneeCurrentPanel> | null>(null);

const dialogTitle = computed(() =>
  props.execution ? `执行协办人管理：${props.execution.executionName}` : '执行协办人管理'
);

const projectId = computed(() => props.execution?.projectId || '');
const executionId = computed(() => props.execution?.id || '');

function handleAdd(payload: Api.Project.CreateExecutionAssigneeParams) {
  emit('add', payload);
}

function handleInactive(assignee: Api.Project.ExecutionAssignee, payload: Api.Project.InactiveExecutionAssigneeParams) {
  emit('inactive', assignee, payload);
}

function handleChangeOwner(payload: Api.Project.ChangeExecutionOwnerParams) {
  emit('change-owner', payload);
}

watch(
  () => visible.value,
  value => {
    if (value) {
      activeTab.value = 'current';
      return;
    }

    currentPanelRef.value?.reset();
  }
);
</script>

<template>
  <BusinessFormDialog v-model="visible" :title="dialogTitle" preset="lg" :show-footer="false" :scrollbar="false">
    <ElTabs v-model="activeTab" class="execution-assignee-dialog__tabs">
      <ElTabPane label="当前协办人" name="current">
        <AssigneeCurrentPanel
          ref="currentPanelRef"
          :execution="execution"
          :assignees="assignees"
          :user-options="userOptions"
          :loading="loading"
          :can-manage-assignee="resolvedCanManageAssignee"
          :can-change-owner="resolvedCanChangeOwner"
          @add="handleAdd"
          @inactive="handleInactive"
          @change-owner="handleChangeOwner"
        />
      </ElTabPane>
      <ElTabPane label="变更历史" name="log" lazy>
        <AssigneeLogPanel
          v-if="projectId && executionId"
          :project-id="projectId"
          :execution-id="executionId"
          :user-options="userOptions"
          :active="activeTab === 'log'"
        />
      </ElTabPane>
    </ElTabs>
  </BusinessFormDialog>
</template>

<style scoped lang="scss">
.execution-assignee-dialog__tabs {
  --el-tabs-header-height: 40px;
}
</style>
