<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
import type { WorklogChangedPayload } from '../shared';
import TaskInfoReadonly from './task-info-readonly.vue';
import TaskWorklogContent from './task-worklog-content.vue';

defineOptions({ name: 'ProjectExecutionTaskDetailDialog' });

interface Props {
  task: Api.Project.ProjectTask | null;
  userOptions?: Api.SystemManage.UserSimple[];
  taskOptions?: Api.Project.ProjectTask[];
  /** 弹层打开时默认激活的 tab；'info' = 任务信息，'worklog' = 工作日志 */
  defaultTab?: 'info' | 'worklog';
}

interface Emits {
  (e: 'worklog-changed', payload: WorklogChangedPayload): void;
}

const props = withDefaults(defineProps<Props>(), {
  userOptions: () => [],
  taskOptions: () => [],
  defaultTab: 'info'
});
const emit = defineEmits<Emits>();

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

type TabName = 'info' | 'worklog';
const activeTab = ref<TabName>('info');

const dialogTitle = computed(() => '任务详情');

watch(visible, val => {
  if (val) {
    activeTab.value = props.defaultTab;
  }
});
</script>

<template>
  <BusinessFormDialog
    v-model="visible"
    :title="dialogTitle"
    width="1100px"
    max-body-height="78vh"
    :show-footer="false"
    :scrollbar="false"
  >
    <ElTabs v-model="activeTab" class="task-detail-dialog__tabs">
      <ElTabPane label="任务信息" name="info">
        <TaskInfoReadonly :task="task" :user-options="userOptions" :task-options="taskOptions" />
      </ElTabPane>
      <ElTabPane label="工作日志" name="worklog" lazy>
        <TaskWorklogContent
          :task="task"
          :active="activeTab === 'worklog' && visible"
          @changed="payload => emit('worklog-changed', payload)"
        />
      </ElTabPane>
    </ElTabs>
  </BusinessFormDialog>
</template>

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

// 任务信息 tab 自然高度较大；给 tab 内容一个最小高度（超过两个 tab 的自然高度），切换时弹层不缩水
.task-detail-dialog__tabs :deep(.el-tabs__content),
.task-detail-dialog__tabs :deep(.el-tab-pane) {
  min-height: 640px;
}
</style>
