<template>
  <div class="disaster-control-container">
    <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
      <template #deptIds>
        <el-select
          v-model="ruleFormData.deptIds"
          multiple
          collapse-tags
          collapse-tags-tooltip
          :max-collapse-tags="2"
          placeholder="请选择上报部门"
          filterable
          :filter-method="handleFilterMethod"
          class="custom-select"
        >
          <template #header v-if="isFilterData">
            <el-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAllChange">
              全部部门
            </el-checkbox>
          </template>
          <el-option
            v-for="item in disasterLevelDepts"
            :key="item.itemCode"
            :label="item.itemValue"
            :value="Number(item.itemCode)"
          />
        </el-select>
      </template>
      <template #userGroupList>
        <GroupSelect v-model="ruleFormData.userGroupList" :groupOptions="groupOptions" />
      </template>
      <template #isPush>
        <el-radio-group v-model="ruleFormData.isPush">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </template>
    </BasicForm>
  </div>
</template>

<script setup lang="ts">
  import { useRoute } from 'vue-router';
  import { onMounted, ref, watch } from 'vue';
  import BasicForm from '@/components/BasicForm.vue';
  import GroupSelect from '@/components/PersonGroup/components/GroupSelect.vue';
  import { useFormConfigHook } from '@/hooks/useFormConfigHook';
  import { useUserInfoHook, useDeptInfoHook } from '@/views/disaster/hooks';
  import { useGroupInfoHook } from '@/components/PersonGroup/hook/groupInfo';
  import type { DisposalManagementRuleForm } from '@/types/disaster-control';
  import {
    DISPOSAL_MANAGEMENT_ITEM_FROM_CONFIG_CREATE,
    DISPOSAL_MANAGEMENT_TASK_FROM_DATA,
    DISPOSAL_MANAGEMENT_ITEM_FROM_RULES_CREATE,
  } from '../config';

  const { realname } = useUserInfoHook();
  const { disasterLevelDepts, originalDisasterLevelDepts, getDisasterLevelDepts, isFilterData, handleFilterMethod } =
    useDeptInfoHook();
  const { groupOptions, getUserGroupList } = useGroupInfoHook();
  const route = useRoute();
  const taskName = route.query.taskName as string;
  const basicFormRef = ref<InstanceType<typeof BasicForm>>();

  const { ruleFormConfig, ruleFormData, formRules, cloneRuleFormData, beforeRouteLeave } =
    useFormConfigHook<DisposalManagementRuleForm>(
      DISPOSAL_MANAGEMENT_ITEM_FROM_CONFIG_CREATE,
      DISPOSAL_MANAGEMENT_TASK_FROM_DATA,
      DISPOSAL_MANAGEMENT_ITEM_FROM_RULES_CREATE,
    );

  const handleValidate = async () => {
    if (!basicFormRef.value) return;
    const parentValidateResult = await basicFormRef.value.validateForm();
    return parentValidateResult;
  };
  const getFormData = () => {
    cloneRuleFormData();
    return ruleFormData;
  };
  const checkAll = ref(false);
  const indeterminate = ref(false);
  const handleCheckAllChange = () => {
    if (checkAll.value) {
      ruleFormData.deptIds = originalDisasterLevelDepts.value.map((item) => Number(item.itemCode));
    } else {
      ruleFormData.deptIds = [];
    }
  };
  defineExpose({
    handleValidate,
    getFormData,
  });
  onMounted(() => {
    ruleFormData.createdByName = realname;
    ruleFormData.taskName = taskName;
    getDisasterLevelDepts();
    getUserGroupList();
    cloneRuleFormData();
    beforeRouteLeave();
  });
  watch(
    () => ruleFormData.deptIds,
    (newVal) => {
      checkAll.value = newVal.length === originalDisasterLevelDepts.value.length;
      indeterminate.value = newVal.length > 0 && newVal.length < originalDisasterLevelDepts.value.length;
    },
  );
</script>

<style scoped lang="scss">
  @use '../style/item-common.scss' as *;
</style>
