<template>
  <div class="info-container">
    <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
      <template #taskType>
        <div class="task-type-container">
          <el-select v-model="ruleFormData.taskType" placeholder="请选择检查类型" @change="handleTaskTypeChange">
            <el-option v-for="item in TASK_TYPE_OPTIONS" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-select v-model="ruleFormData.taskTemplate" placeholder="请选择关联模板" disabled>
            <el-option v-for="item in TASK_TEMPLATE_LIST" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </div>
      </template>
      <template #checkUser>
        <el-select
          v-model="ruleFormData.checkUser"
          value-key="id"
          multiple
          placeholder="请选择人员"
          @click="userInfo = true"
        >
          <el-option
            v-for="user in userOptions"
            :key="user.id"
            :label="`${user.username}-${user.realname}`"
            :value="user"
          />
        </el-select>
      </template>
      <template #isPush>
        <el-radio-group v-model="ruleFormData.isPush">
          <el-radio :value="true">是</el-radio>
          <el-radio :value="false">否</el-radio>
        </el-radio-group>
      </template>
    </BasicForm>
    <el-dialog
      v-model="userInfo"
      title="添加人员"
      align-center
      :close-on-click-modal="false"
      :destroy-on-close="true"
      class="customDialog--pushObject"
    >
      <User :customUserList="ruleFormData.checkUser" @cancel="userInfo = false" @submit="handleSubmit" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import BasicForm from '@/components/BasicForm.vue';
  import User from '@/views/disaster/components/User.vue';
  import { useFormConfigHook } from '@/hooks/useFormConfigHook';
  import { TASK_MANAGEMENT_FROM_CONFIG, TASK_MANAGEMENT_FROM_DATA, TASK_MANAGEMENT_FROM_RULES } from '../config';
  import { onMounted, ref } from 'vue';
  import { TaskManagementRuleForm } from '../type';
  import { TASK_TYPE_OPTIONS } from '../constants/task-execution';
  import { TASK_TEMPLATE_LIST } from '../constants/template-detail';
  import { getTaskManagementItem } from '@/api/task-execution/tableData';
  import type { UserInfo } from '@/types/push-object';
  import type { TreeNodeData } from '@/views/disaster/types';

  const props = defineProps<{
    id: number;
  }>();

  const userInfo = ref(false);

  const userOptions = ref<UserInfo[]>([]);
  const basicFormRef = ref<InstanceType<typeof BasicForm>>();

  const handleTaskTypeChange = (taskType: number | null) => {
    ruleFormData.taskTemplate = taskType;
  };

  const { ruleFormConfig, ruleFormData, formRules,cloneRuleFormData, beforeRouteLeave } =
    useFormConfigHook<TaskManagementRuleForm>(
      TASK_MANAGEMENT_FROM_CONFIG,
      TASK_MANAGEMENT_FROM_DATA,
      TASK_MANAGEMENT_FROM_RULES,
    );

  const handleSubmit = (selectedPersonList: TreeNodeData[]) => {
    ruleFormData.checkUser = selectedPersonList.map((user) => {
      return {
        id: user.id,
        username: user.name.split('-')[0],
        realname: user.name.split('-')[1],
      };
    });
    userOptions.value = ruleFormData.checkUser;
  };

  const getTaskManagementItemInfo = async () => {
    const res = await getTaskManagementItem(props.id);
    userOptions.value = res.checkUser;
    for (const key in res) {
      if (key in ruleFormData) {
        ruleFormData[key] = res[key as keyof typeof res];
      }
    }
    cloneRuleFormData();
  };

  const handleValidate = async () => {
    if (!basicFormRef.value) return;
    const parentValidateResult = await basicFormRef.value.validateForm();
    return parentValidateResult;
  };
  const getFormData = () => {
    cloneRuleFormData();
    return ruleFormData;
  };
  defineExpose({
    handleValidate,
    getFormData,
  });

  onMounted(() => {
    getTaskManagementItemInfo();
    beforeRouteLeave();
  });
</script>

<style scoped lang="scss">
  @use '@/views/disaster/style/info-container.scss' as *;
  @use '../style/task-item.scss' as *;
</style>
