<template>
  <div class="p-2" v-loading="pageLoading">
    <approvalButton
      class="mb-3"
      @submitForm="submitForm"
      @approvalVerifyOpen="approvalVerifyOpen"
      @handleApprovalRecord="handleApprovalRecord"
      :buttonLoading="buttonLoading"
      :id="form.tempTaskId as any"
      :status="form.flowStatus as any"
      :pageType="pageType"
      :mode="false"
    >
      <el-button v-if="canCloseTask" type="success" icon="CircleCheck" @click="openCloseDialog" v-hasPermi="['oa:erp:tempTask:close']"
        >关闭任务</el-button
      >
      <el-button v-if="canCreateChange" type="warning" icon="EditPen" @click="openChangeDialog" v-hasPermi="['oa:erp:tempTask:change']"
        >发起变更</el-button
      >
    </approvalButton>

    <el-card shadow="never" class="mb-3">
      <el-form ref="tempTaskFormRef" :model="form" :rules="rules" label-width="120px" :disabled="isReadOnly">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="任务编号" prop="tempTaskCode">
              <el-input v-model="form.tempTaskCode" placeholder="后端自动生成" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务标题" prop="taskTitle">
              <el-input v-model="form.taskTitle" placeholder="请输入任务标题" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="任务描述" prop="taskDesc">
              <el-input v-model="form.taskDesc" type="textarea" :rows="4" placeholder="请输入临时任务描述" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="优先级" prop="priority">
              <el-select v-model="form.priority" placeholder="请选择优先级" clearable>
                <el-option v-for="dict in temp_task_priority" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="紧急原因" prop="urgentReason">
              <el-input v-model="form.urgentReason" placeholder="紧急/特急必须填写" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="需求时间" prop="requireTime">
              <el-date-picker v-model="form.requireTime" type="date" value-format="YYYY-MM-DD" clearable placeholder="请选择需求时间" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="确认完成时间" prop="confirmFinishTime">
              <el-date-picker v-model="form.confirmFinishTime" type="date" value-format="YYYY-MM-DD" clearable placeholder="领导确认后填写" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预计工时" prop="estimateWorkload">
              <el-input-number v-model="form.estimateWorkload" :min="0" :step="0.5" :precision="1" controls-position="right" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="主报工项目" prop="projectCode">
              <el-input v-model="form.projectCode" placeholder="请选择项目" readonly>
                <template #suffix>
                  <el-icon class="cursor-pointer" @click="openProjectSelect"><Search /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-model="form.projectName" disabled placeholder="选择项目后自动填充" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发起人" prop="requesterName">
              <el-input v-model="form.requesterName" disabled placeholder="后端按当前用户回填" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发起部门" prop="requestDeptName">
              <el-input v-model="form.requestDeptName" disabled placeholder="后端按当前部门回填" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业务状态" prop="taskStatus">
              <el-select v-model="form.taskStatus" disabled>
                <el-option v-for="dict in temp_task_status" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="指派人" prop="dispatcherName">
              <el-input v-model="form.dispatcherName" readonly placeholder="请选择指派人">
                <template #suffix>
                  <el-icon class="cursor-pointer" @click="openUserSelect('dispatcher')"><Search /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="软件部领导" prop="softwareLeaderName">
              <el-input v-model="form.softwareLeaderName" readonly placeholder="请选择软件部领导">
                <template #suffix>
                  <el-icon class="cursor-pointer" @click="openUserSelect('leader')"><Search /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="主执行人" prop="assigneeName">
              <el-input v-model="form.assigneeName" readonly placeholder="请选择主执行人">
                <template #suffix>
                  <el-icon class="cursor-pointer" @click="openUserSelect('assignee')"><Search /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联原任务" prop="relatedTaskCode">
              <el-input v-model="form.relatedTaskCode" readonly placeholder="关闭后延续/返工时选择">
                <template #append>
                  <el-button icon="Search" @click="openRelatedTaskDialog" />
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联原因" prop="relateReason">
              <el-select v-model="form.relateReason" placeholder="请选择关联原因" clearable>
                <el-option v-for="dict in temp_task_relate_reason" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="关联说明" prop="relateRemark">
              <el-input v-model="form.relateRemark" type="textarea" :rows="2" placeholder="请输入关联说明" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="附件" prop="ossId">
              <FileUpload
                v-model="ossIdString"
                :limit="5"
                :file-size="20"
                :file-type="['png', 'jpg', 'jpeg', 'doc', 'docx', 'pdf', 'xls', 'xlsx', 'txt']"
                :disabled="isReadOnly"
                :is-show-tip="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card v-if="form.tempTaskId" shadow="never">
      <template #header>
        <div class="flex justify-between items-center">
          <span>变更历史</span>
          <el-button
            v-if="canCreateChange"
            type="warning"
            plain
            icon="EditPen"
            size="small"
            @click="openChangeDialog"
            v-hasPermi="['oa:erp:tempTask:change']"
          >
            发起变更
          </el-button>
        </div>
      </template>
      <el-table :data="changeList" border>
        <el-table-column type="index" label="序号" width="70" align="center" />
        <el-table-column label="变更类型" prop="changeType" width="120" align="center">
          <template #default="scope">
            <dict-tag :options="temp_task_change_type" :value="scope.row.changeType" />
          </template>
        </el-table-column>
        <el-table-column label="变更原因" prop="changeReason" min-width="180" show-overflow-tooltip align="center" />
        <el-table-column label="变更前" prop="beforeContent" min-width="160" show-overflow-tooltip align="center">
          <template #default="scope">
            <span>{{ formatChangeContent(scope.row.beforeContent) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="变更后" prop="afterContent" min-width="160" show-overflow-tooltip align="center">
          <template #default="scope">
            <span>{{ formatChangeContent(scope.row.afterContent) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="工时影响" prop="workloadEffect" min-width="140" show-overflow-tooltip align="center" />
        <el-table-column label="时间影响" prop="timeEffect" min-width="140" show-overflow-tooltip align="center" />
        <el-table-column label="审批结论" prop="approveResult" width="120" align="center">
          <template #default="scope">
            <dict-tag :options="temp_task_change_result" :value="scope.row.approveResult" />
          </template>
        </el-table-column>
        <el-table-column label="审批状态" prop="flowStatus" width="110" align="center">
          <template #default="scope">
            <dict-tag :options="wf_business_status" :value="scope.row.flowStatus" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="90" fixed="right" align="center">
          <template #default="scope">
            <el-button
              v-if="!scope.row.approveResult"
              link
              type="primary"
              @click="openApproveChangeDialog(scope.row)"
              v-hasPermi="['oa:erp:tempTask:changeApprove']"
            >
              审批
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="closeDialog.visible" title="关闭临时任务" width="720px" append-to-body>
      <el-form ref="closeFormRef" :model="closeForm" :rules="closeRules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="实际开始时间" prop="actualStartTime">
              <el-date-picker v-model="closeForm.actualStartTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实际消耗工时" prop="actualWorkload">
              <el-input-number v-model="closeForm.actualWorkload" :min="0" :step="0.5" :precision="1" controls-position="right" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="完成结果" prop="finishResult">
              <el-select v-model="closeForm.finishResult" placeholder="请选择完成结果">
                <el-option v-for="dict in temp_task_finish_result" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="终止原因" prop="terminateReason">
              <el-select v-model="closeForm.terminateReason" placeholder="不执行/终止时必填" clearable>
                <el-option v-for="dict in temp_task_terminate_reason" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="完成说明" prop="finishRemark">
              <el-input v-model="closeForm.finishRemark" type="textarea" :rows="4" placeholder="请输入完成说明" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="closeDialog.visible = false">取消</el-button>
        <el-button type="primary" :loading="buttonLoading" @click="handleCloseTask">确定关闭</el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="changeDialog.visible" :title="changeDialog.title" width="760px" append-to-body>
      <el-form ref="changeFormRef" :model="changeForm" :rules="changeRules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="变更类型" prop="changeType">
              <el-select v-model="changeForm.changeType" placeholder="请选择变更类型" :disabled="changeApproveMode" @change="handleChangeTypeChange">
                <el-option v-for="dict in temp_task_change_type" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="changeApproveMode">
            <el-form-item label="审批结论" prop="approveResult">
              <el-select v-model="changeForm.approveResult" placeholder="请选择审批结论">
                <el-option v-for="dict in temp_task_change_result" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="变更原因" prop="changeReason">
              <el-input v-model="changeForm.changeReason" type="textarea" :rows="3" :disabled="changeApproveMode" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="变更前" prop="beforeContent">
              <el-input
                v-if="isStructuredChange"
                :model-value="formatChangeContent(changeForm.beforeContent)"
                disabled
                placeholder="选择变更类型后自动带出"
              />
              <el-input v-else v-model="changeForm.beforeContent" type="textarea" :rows="3" :disabled="changeApproveMode" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="变更后" prop="afterContent">
              <el-input
                v-if="changeForm.changeType === '4'"
                :model-value="formatChangeContent(changeForm.afterContent)"
                readonly
                :disabled="changeApproveMode"
                placeholder="请选择新的主执行人"
              >
                <template #suffix>
                  <el-icon v-if="!changeApproveMode" class="cursor-pointer" @click="openUserSelect('changeAssignee')"><Search /></el-icon>
                </template>
              </el-input>
              <el-input
                v-else-if="changeForm.changeType === '5'"
                :model-value="formatChangeContent(changeForm.afterContent)"
                readonly
                :disabled="changeApproveMode"
                placeholder="请选择新的主报工项目"
              >
                <template #suffix>
                  <el-icon v-if="!changeApproveMode" class="cursor-pointer" @click="openProjectSelect('changeProject')"><Search /></el-icon>
                </template>
              </el-input>
              <el-input v-else v-model="changeForm.afterContent" type="textarea" :rows="3" :disabled="changeApproveMode" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工时影响" prop="workloadEffect">
              <el-input v-model="changeForm.workloadEffect" type="textarea" :rows="2" :disabled="changeApproveMode" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="时间影响" prop="timeEffect">
              <el-input v-model="changeForm.timeEffect" type="textarea" :rows="2" :disabled="changeApproveMode" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="执行影响" prop="scopeEffect">
              <el-input v-model="changeForm.scopeEffect" type="textarea" :rows="2" :disabled="changeApproveMode" />
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="changeApproveMode">
            <el-form-item label="审批意见" prop="approveComment">
              <el-input v-model="changeForm.approveComment" type="textarea" :rows="3" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="changeDialog.visible = false">取消</el-button>
        <el-button type="primary" :loading="buttonLoading" @click="handleSubmitChange">{{
          changeApproveMode ? '提交审批结论' : '保存变更'
        }}</el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="relatedDialog.visible" title="选择已结束原任务" width="900px" append-to-body>
      <el-table v-loading="relatedDialog.loading" :data="relatedTaskList" border @row-dblclick="selectRelatedTask">
        <el-table-column type="index" label="序号" width="70" align="center" />
        <el-table-column label="任务编号" prop="tempTaskCode" width="150" align="center" />
        <el-table-column label="任务描述" prop="taskDesc" min-width="220" show-overflow-tooltip align="center" />
        <el-table-column label="完成结果" prop="finishResult" width="130" align="center">
          <template #default="scope">
            <dict-tag :options="temp_task_finish_result" :value="scope.row.finishResult" />
          </template>
        </el-table-column>
        <el-table-column label="关闭时间" prop="actualFinishTime" width="160" align="center" />
        <el-table-column label="操作" width="90" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="selectRelatedTask(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" />
    <approvalRecord ref="approvalRecordRef" />
    <ProjectSelect ref="projectSelectRef" :multiple="false" @confirm-call-back="handleProjectSelect" />
    <UserSelect ref="userSelectRef" :multiple="userSelectMode === 'cc'" @confirm-call-back="handleUserSelect" />
  </div>
</template>

<script setup name="TempTaskEdit" lang="ts">
import {
  addTempTask,
  addTempTaskChange,
  approveTempTaskChange,
  closeTempTask,
  getTempTask,
  getTempTaskList,
  listTempTaskChange,
  tempTaskSubmitAndFlowStart,
  updateTempTask
} from '@/api/oa/erp/tempTask';
import type { TempTaskChangeForm, TempTaskChangeVO, TempTaskForm, TempTaskVO } from '@/api/oa/erp/tempTask/types';
import type { ProjectInfoVO } from '@/api/oa/erp/projectInfo/types';
import { FlowCodeEnum } from '@/enums/OAEnum';
import ApprovalButton from '@/components/Process/approvalButton.vue';
import SubmitVerify from '@/components/Process/submitVerify.vue';
import ApprovalRecord from '@/components/Process/approvalRecord.vue';
import ProjectSelect from '@/components/ProjectSelect/index.vue';
import UserSelect from '@/components/UserSelect/index.vue';
import FileUpload from '@/components/FileUpload/index.vue';

type UserSelectMode = 'dispatcher' | 'leader' | 'assignee' | 'cc' | 'changeAssignee';
type ProjectSelectMode = 'main' | 'changeProject';

const { proxy } = getCurrentInstance() as any;
const route = useRoute();
const router = useRouter();

const {
  temp_task_priority,
  temp_task_status,
  temp_task_finish_result,
  temp_task_terminate_reason,
  temp_task_relate_reason,
  temp_task_change_type,
  temp_task_change_result,
  wf_business_status
} = toRefs<any>(
  proxy?.useDict(
    'temp_task_priority',
    'temp_task_status',
    'temp_task_finish_result',
    'temp_task_terminate_reason',
    'temp_task_relate_reason',
    'temp_task_change_type',
    'temp_task_change_result',
    'wf_business_status'
  )
);

const pageLoading = ref(false);
const buttonLoading = ref(false);
const pageType = ref<string>((route.query.type as string) || 'add');
const tempTaskFormRef = ref<ElFormInstance>();
const closeFormRef = ref<ElFormInstance>();
const changeFormRef = ref<ElFormInstance>();
const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
const projectSelectRef = ref<InstanceType<typeof ProjectSelect>>();
const userSelectRef = ref<InstanceType<typeof UserSelect>>();

const userSelectMode = ref<UserSelectMode>('dispatcher');
const projectSelectMode = ref<ProjectSelectMode>('main');
const taskVariables = ref<Record<string, unknown>>({});
const changeList = ref<TempTaskChangeVO[]>([]);
const relatedTaskList = ref<TempTaskVO[]>([]);

const initFormData: TempTaskForm = {
  tempTaskId: undefined,
  tempTaskCode: undefined,
  taskTitle: undefined,
  taskDesc: undefined,
  priority: '1',
  urgentReason: undefined,
  requireTime: undefined,
  confirmFinishTime: undefined,
  actualStartTime: undefined,
  actualFinishTime: undefined,
  projectId: undefined,
  projectCode: undefined,
  projectName: undefined,
  pmId: undefined,
  pmName: undefined,
  contractId: undefined,
  contractCode: undefined,
  requesterId: undefined,
  requesterName: undefined,
  requestDeptId: undefined,
  requestDeptName: undefined,
  dispatcherId: undefined,
  dispatcherName: undefined,
  softwareLeaderId: undefined,
  softwareLeaderName: undefined,
  assigneeId: undefined,
  assigneeName: undefined,
  estimateWorkload: undefined,
  actualWorkload: undefined,
  finishResult: undefined,
  terminateReason: undefined,
  finishRemark: undefined,
  relatedTaskId: undefined,
  relatedTaskCode: undefined,
  relateReason: undefined,
  relateRemark: undefined,
  taskStatus: '1',
  flowStatus: 'draft',
  ccUserIds: undefined,
  ossId: undefined,
  remark: undefined,
  flowCode: FlowCodeEnum.TEMP_TASK_CODE,
  variables: {},
  bizExt: {}
};

const form = ref<TempTaskForm>({ ...initFormData });

const rules: ElFormRules = {
  taskDesc: [{ required: true, message: '任务描述不能为空', trigger: 'blur' }],
  requireTime: [{ required: true, message: '需求时间不能为空', trigger: 'change' }],
  priority: [{ required: true, message: '优先级不能为空', trigger: 'change' }],
  urgentReason: [
    {
      validator: (_rule, value, callback) => {
        if (['3', '4'].includes(form.value.priority || '') && !value) {
          callback(new Error('优先级为紧急/特急时必须填写紧急原因'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ],
  relateReason: [
    {
      validator: (_rule, value, callback) => {
        if (form.value.relatedTaskId && !value) {
          callback(new Error('关联原任务时必须选择关联原因'));
        } else {
          callback();
        }
      },
      trigger: 'change'
    }
  ]
};

const closeDialog = reactive({ visible: false });
const closeForm = ref<TempTaskForm>({});
const closeRules: ElFormRules = {
  actualWorkload: [{ required: true, message: '实际消耗工时不能为空', trigger: 'blur' }],
  finishResult: [{ required: true, message: '完成结果不能为空', trigger: 'change' }],
  finishRemark: [{ required: true, message: '完成说明不能为空', trigger: 'blur' }]
};

const changeDialog = reactive({ visible: false, title: '发起变更' });
const changeApproveMode = ref(false);
const changeForm = ref<TempTaskChangeForm>({});
const changeRules: ElFormRules = {
  changeType: [{ required: true, message: '变更类型不能为空', trigger: 'change' }],
  changeReason: [{ required: true, message: '变更原因不能为空', trigger: 'blur' }],
  afterContent: [
    {
      validator: (_rule, value, callback) => {
        if (!changeApproveMode.value && ['1', '2', '3', '4', '5'].includes(changeForm.value.changeType || '') && !value) {
          callback(new Error('变更后内容不能为空'));
        } else {
          callback();
        }
      },
      trigger: 'change'
    }
  ],
  approveResult: [{ required: true, message: '审批结论不能为空', trigger: 'change' }]
};

const relatedDialog = reactive({ visible: false, loading: false });

const isReadOnly = computed(() => pageType.value === 'view' || pageType.value === 'approval');
const canCloseTask = computed(
  () => !!form.value.tempTaskId && !form.value.finishResult && pageType.value !== 'view' && form.value.taskStatus === '2'
);
const canCreateChange = computed(() => !!form.value.tempTaskId && !form.value.finishResult && form.value.taskStatus === '2');
const isStructuredChange = computed(() => ['4', '5'].includes(changeForm.value.changeType || ''));

const ossIdString = computed({
  get() {
    return form.value.ossId ? String(form.value.ossId) : '';
  },
  set(val: string) {
    form.value.ossId = val || undefined;
  }
});

const openProjectSelect = (mode: ProjectSelectMode = 'main') => {
  if (mode === 'main' && isReadOnly.value) {
    return;
  }
  if (mode === 'changeProject' && changeApproveMode.value) {
    return;
  }
  projectSelectMode.value = mode;
  projectSelectRef.value?.open();
};

const handleProjectSelect = (data: ProjectInfoVO[]) => {
  const project = data?.[0];
  if (!project) {
    return;
  }
  if (projectSelectMode.value === 'changeProject') {
    changeForm.value.afterContent = serializeChangeContent({
      projectId: project.projectId,
      projectCode: project.projectCode,
      projectName: project.projectName,
      pmId: project.managerId,
      pmName: (project as any).managerName
    });
    return;
  }
  form.value.projectId = project.projectId;
  form.value.projectCode = project.projectCode;
  form.value.projectName = project.projectName;
  form.value.pmId = project.managerId;
  form.value.pmName = (project as any).managerName;
};

const openUserSelect = (mode: UserSelectMode) => {
  if (mode !== 'changeAssignee' && isReadOnly.value) {
    return;
  }
  if (mode === 'changeAssignee' && changeApproveMode.value) {
    return;
  }
  userSelectMode.value = mode;
  userSelectRef.value?.open();
};

const handleUserSelect = (users: Array<Record<string, any>>) => {
  const selected = users?.[0];
  if (!selected) {
    return;
  }
  const userId = selected.userId;
  const name = selected.nickName || selected.userName;
  if (userSelectMode.value === 'dispatcher') {
    form.value.dispatcherId = userId;
    form.value.dispatcherName = name;
  } else if (userSelectMode.value === 'leader') {
    form.value.softwareLeaderId = userId;
    form.value.softwareLeaderName = name;
  } else if (userSelectMode.value === 'assignee') {
    form.value.assigneeId = userId;
    form.value.assigneeName = name;
  } else if (userSelectMode.value === 'changeAssignee') {
    changeForm.value.afterContent = serializeChangeContent({
      assigneeId: userId,
      assigneeName: name
    });
  } else {
    form.value.ccUserIds = users.map((item) => item.userId).join(',');
  }
};

const serializeChangeContent = (content: Record<string, unknown>) => {
  return JSON.stringify(content);
};

const parseChangeContent = (content?: string) => {
  if (!content) {
    return undefined;
  }
  const text = String(content).trim();
  if (!text.startsWith('{')) {
    return undefined;
  }
  try {
    return JSON.parse(text) as Record<string, any>;
  } catch {
    return undefined;
  }
};

const formatChangeContent = (content?: string) => {
  const parsed = parseChangeContent(content);
  if (!parsed) {
    return content || '';
  }
  if (parsed.assigneeName) {
    return parsed.assigneeName;
  }
  if (parsed.projectCode || parsed.projectName) {
    return [parsed.projectCode, parsed.projectName].filter(Boolean).join(' / ');
  }
  return parsed.label || parsed.name || parsed.value || '';
};

const handleChangeTypeChange = () => {
  if (changeApproveMode.value) {
    return;
  }
  changeForm.value.beforeContent = buildCurrentChangeContent(changeForm.value.changeType);
  changeForm.value.afterContent = undefined;
};

const buildCurrentChangeContent = (changeType?: string) => {
  if (changeType === '1') {
    return form.value.taskDesc;
  }
  if (changeType === '2') {
    return form.value.estimateWorkload == null ? undefined : String(form.value.estimateWorkload);
  }
  if (changeType === '3') {
    return form.value.confirmFinishTime;
  }
  if (changeType === '4') {
    return serializeChangeContent({
      assigneeId: form.value.assigneeId,
      assigneeName: form.value.assigneeName
    });
  }
  if (changeType === '5') {
    return serializeChangeContent({
      projectId: form.value.projectId,
      projectCode: form.value.projectCode,
      projectName: form.value.projectName,
      pmId: form.value.pmId,
      pmName: form.value.pmName
    });
  }
  return undefined;
};

const loadDetail = async (id: string | number) => {
  const res = await getTempTask(id);
  form.value = {
    ...initFormData,
    ...res.data,
    flowCode: FlowCodeEnum.TEMP_TASK_CODE
  };
  await loadChangeList();
};

const loadChangeList = async () => {
  if (!form.value.tempTaskId) {
    changeList.value = [];
    return;
  }
  const res = await listTempTaskChange(form.value.tempTaskId);
  changeList.value = res.data || [];
};

const buildVariables = () => {
  taskVariables.value = {
    ignore: true,
    has_dispatcher: form.value.dispatcherId ? '1' : '0',
    extra_approval_required: (form.value.variables as Record<string, unknown>)?.extra_approval_required || '0',
    has_change: (form.value.pendingChangeCount || 0) > 0 ? '1' : '0',
    dispatcherId: form.value.dispatcherId,
    requesterId: form.value.requesterId,
    requestDeptId: form.value.requestDeptId,
    softwareLeaderId: form.value.softwareLeaderId,
    assigneeId: form.value.assigneeId,
    ccUserIds: form.value.ccUserIds,
    taskTitle: form.value.taskTitle,
    taskDesc: form.value.taskDesc,
    priority: form.value.priority,
    urgentReason: form.value.urgentReason,
    requireTime: form.value.requireTime,
    confirmFinishTime: form.value.confirmFinishTime,
    projectId: form.value.projectId,
    contractId: form.value.contractId,
    estimateWorkload: form.value.estimateWorkload,
    actualWorkload: form.value.actualWorkload,
    actualStartTime: form.value.actualStartTime,
    finishResult: form.value.finishResult,
    terminateReason: form.value.terminateReason,
    finishRemark: form.value.finishRemark
  };
  Object.keys(taskVariables.value).forEach((key) => {
    if (taskVariables.value[key] === undefined || taskVariables.value[key] === null || taskVariables.value[key] === '') {
      delete taskVariables.value[key];
    }
  });
  form.value.variables = { ...taskVariables.value };
  form.value.bizExt = {
    businessId: form.value.tempTaskId,
    businessCode: form.value.tempTaskCode,
    businessTitle: `${form.value.tempTaskCode || '临时任务'}-${form.value.taskDesc || form.value.taskTitle || ''}`
  };
};

const validateMainForm = async () => {
  if (!tempTaskFormRef.value) {
    return true;
  }
  return await tempTaskFormRef.value.validate().catch(() => false);
};

const submitForm = async (status: string) => {
  const valid = await validateMainForm();
  if (!valid) {
    return;
  }
  buttonLoading.value = true;
  try {
    buildVariables();
    if (status !== 'draft') {
      const res = await tempTaskSubmitAndFlowStart(form.value);
      form.value = { ...initFormData, ...res.data, flowCode: FlowCodeEnum.TEMP_TASK_CODE };
      proxy?.$modal.msgSuccess('操作成功');
    } else {
      form.value.taskStatus = '1';
      form.value.flowStatus = 'draft';
      if (form.value.tempTaskId) {
        await updateTempTask(form.value);
      } else {
        await addTempTask(form.value);
      }
      proxy?.$modal.msgSuccess('暂存成功');
    }
    proxy?.$tab.closePage(route);
    router.go(-1);
  } finally {
    buttonLoading.value = false;
  }
};

const openCloseDialog = () => {
  closeForm.value = {
    tempTaskId: form.value.tempTaskId,
    actualStartTime: form.value.actualStartTime,
    actualWorkload: form.value.actualWorkload,
    finishResult: form.value.finishResult,
    terminateReason: form.value.terminateReason,
    finishRemark: form.value.finishRemark
  };
  closeDialog.visible = true;
};

const handleCloseTask = async () => {
  const valid = await closeFormRef.value?.validate().catch(() => false);
  if (!valid) {
    return;
  }
  buttonLoading.value = true;
  try {
    await closeTempTask(closeForm.value);
    proxy?.$modal.msgSuccess('关闭成功，请继续完成当前流程节点审批');
    closeDialog.visible = false;
    if (form.value.tempTaskId) {
      await loadDetail(form.value.tempTaskId);
    }
  } finally {
    buttonLoading.value = false;
  }
};

const openChangeDialog = () => {
  changeApproveMode.value = false;
  changeDialog.title = '发起变更';
  changeForm.value = {
    tempTaskId: form.value.tempTaskId,
    tempTaskCode: form.value.tempTaskCode
  };
  changeDialog.visible = true;
};

const openApproveChangeDialog = (row: TempTaskChangeVO) => {
  changeApproveMode.value = true;
  changeDialog.title = '审批变更';
  changeForm.value = { ...row };
  changeDialog.visible = true;
};

const handleSubmitChange = async () => {
  const valid = await changeFormRef.value?.validate().catch(() => false);
  if (!valid) {
    return;
  }
  buttonLoading.value = true;
  try {
    if (changeApproveMode.value) {
      await approveTempTaskChange(changeForm.value);
    } else {
      await addTempTaskChange(changeForm.value);
    }
    proxy?.$modal.msgSuccess('操作成功');
    changeDialog.visible = false;
    await loadChangeList();
    if (form.value.tempTaskId) {
      await loadDetail(form.value.tempTaskId);
    }
  } finally {
    buttonLoading.value = false;
  }
};

const openRelatedTaskDialog = async () => {
  if (isReadOnly.value) {
    return;
  }
  relatedDialog.visible = true;
  relatedDialog.loading = true;
  try {
    const res = await getTempTaskList({ taskStatus: '3', pageNum: 1, pageSize: 50 });
    relatedTaskList.value = res.data || [];
  } finally {
    relatedDialog.loading = false;
  }
};

const selectRelatedTask = (row: TempTaskVO) => {
  form.value.relatedTaskId = row.tempTaskId;
  form.value.relatedTaskCode = row.tempTaskCode;
  relatedDialog.visible = false;
};

const approvalVerifyOpen = async () => {
  buildVariables();
  const taskId = route.query.taskId as string;
  if (taskId) {
    await submitVerifyRef.value?.openDialog(taskId);
  }
};

const handleApprovalRecord = () => {
  if (form.value.tempTaskId) {
    approvalRecordRef.value?.init(form.value.tempTaskId);
  }
};

const submitCallback = async () => {
  await proxy?.$tab.closePage(route);
  router.go(-1);
};

onMounted(async () => {
  pageLoading.value = true;
  try {
    pageType.value = (route.query.type as string) || 'add';
    const id = route.query.id as string | number | undefined;
    if (id) {
      await loadDetail(id);
    }
  } finally {
    pageLoading.value = false;
  }
});
</script>
