<template>
  <el-drawer
    v-model="isDrawer"
    size="500"
    :title="props.type === 'add' ? '添加监控调阅记录' : '编辑监控调阅记录'"
    @close="handleCloseDrawer"
  >
    <el-form
      v-loading="loading"
      ref="formRef"
      :model="formParams"
      :rules="rules"
      :label-width="95"
      label-placement="left"
    >
      <el-form-item label="工号" prop="staffNo" style="margin-bottom: 18px">
        <el-input v-model="formParams.staffNo" v-if="staffNoHtmlType === 'INPUT'" placeholder="请输入工号" />
        <el-tree-select
          v-model="formParams.staffNo"
          v-else
          placeholder="请输入工号进行搜索"
          filterable
          remote
          clearable
          class="protocal-select"
          :loading="loading"
          :data="staffNoOptions"
          :render-after-expand="false"
          :default-expand-all="true"
          :remote-method="debouncedRemoteMethod"
          @clear="handleClearStaffNo"
          @change="handleChangeStaffNo"
        />
        <el-text class="text-mode" type="primary" @click="handleChangeStaff">{{
          `切换为工号${staffNoHtmlType === 'INPUT' ? '选择' : '输入'}方式`
        }}</el-text>
      </el-form-item>
      <el-form-item label="姓名" prop="userName">
        <el-input
          v-model="formParams.userName"
          :disabled="staffNoHtmlType === 'SELECT'"
          :placeholder="staffNoHtmlType === 'INPUT' ? '请输入姓名' : '请选择工号，此项自动填充'"
        />
      </el-form-item>
      <el-form-item label="所属部门" prop="deptId">
        <el-tree-select
          v-model="formParams.deptId"
          filterable
          clearable
          placement="left"
          class="protocal-select"
          :data="departmentArr"
          :default-expand-all="true"
          :render-after-expand="false"
          :filter-node-method="filterDept"
          :disabled="staffNoHtmlType === 'SELECT'"
          :placeholder="staffNoHtmlType === 'INPUT' ? '请选择部门' : '请选择工号，此项自动填充'"
          @change="handleChangeDept"
        />
      </el-form-item>
      <el-form-item label="调阅位置" prop="accessLocation">
        <el-input
          v-model="formParams.accessLocation"
          placeholder="请输入调阅位置"
          maxlength="50"
          show-word-limit
          clearable
        />
      </el-form-item>
      <el-form-item label="调阅时段" prop="accessTimeRange">
        <el-date-picker
          v-model="formParams.accessTimeRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          placement="left"
          style="width: 100%"
          @change="handleChangeAccessTimeRange"
        />
      </el-form-item>
      <el-form-item label="是否拷贝" prop="isCopy">
        <el-radio-group v-model="formParams.isCopy">
          <el-radio :value="0">否</el-radio>
          <el-radio :value="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="调阅状态" prop="accessStatus">
        <el-radio-group v-model="formParams.accessStatus">
          <el-radio :value="0">待调阅</el-radio>
          <el-radio :value="1">已调阅</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="审批单上传" prop="approvalFormUrl">
        <UploadImages
          ref="uploadImagesRef"
          :maxCount="1"
          :image-list="approvalImageList"
          @upload-success="handleApprovalUploadChange"
        />
      </el-form-item>
      <el-form-item label="记录人" prop="createdByName">
        <el-input v-model="formParams.createdByName" placeholder="记录人" disabled />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-space>
        <el-button @click="handleCloseDrawer">取消</el-button>
        <el-button type="primary" @click="handleSubmitForm(formRef)">提交</el-button>
      </el-space>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
  import { ref, reactive, watch, computed, onMounted } from 'vue';
  import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
  import { debounce } from 'lodash-es';
  import { ImageItem } from '@/types/disaster-control';
  import { useUserInfoHook } from '@/hooks/useUserInfoHook';
  import { OrganizationUserTree } from '@/views/system/user/types';
  import UploadImages from '@/components/UploadImages/UploadImages.vue';
  import {
    findUserByWorkNo,
    transformTreeData,
    TransformedTreeNode,
    findOrgCodeByWorkNo,
  } from '@/utils/findUserByWorkNo';
  import { calculateTreeData } from '@/utils';
  import { getAllDepartments } from '@/api/auth/dept';
  import { queryOrganizationUserTree } from '@/api/system/user';
  import { UPLOAD_BIZ_TYPE, uploadFileApi } from '@/api/minio';
  import {
    SurveillanceInfoStruct,
    addSurveillanceInfo,
    updateSurveillanceInfo,
  } from '@/api/security-confidentiality-surveillance';

  const props = defineProps<{
    type: string; // add or edit
    initialData: SurveillanceInfoStruct;
  }>();

  const emits = defineEmits<{
    (e: 'close'): void;
  }>();

  const { id, realname, staffNo } = useUserInfoHook();

  const formRef = ref<FormInstance>();
  const formParams = ref<SurveillanceInfoStruct & { accessTimeRange: [string, string] | null }>({
    id: 0,
    staffNo: '',
    userName: '',
    deptId: 0,
    deptName: '',
    accessLocation: '',
    accessStartTime: '',
    accessEndTime: '',
    accessTimeRange: null,
    isCopy: 0,
    accessStatus: 0,
    approvalFormUrl: '',
    createdById: id,
    createdByName: realname,
    createdByStaffNo: staffNo,
    createdAt: '',
    updatedAt: '',
    isDeleted: 0,
  });

  const rules = reactive<FormRules<SurveillanceInfoStruct & { accessTimeRange: [string, string] }>>({
    staffNo: { required: true, message: '工号不能为空', trigger: 'blur' },
    userName: { required: true, message: '姓名不能为空', trigger: 'blur' },
    deptId: { required: true, message: '所属部门不能为空', trigger: 'blur' },
    accessLocation: { required: true, message: '调阅位置不能为空', trigger: 'blur' },
    accessTimeRange: {
      required: true,
      validator: (rule, value, callback) => {
        if (!value || !Array.isArray(value) || value.length !== 2 || !value[0] || !value[1]) {
          callback(new Error('调阅时段不能为空'));
        } else {
          callback();
        }
      },
      trigger: 'change',
    },
    isCopy: { required: true, message: '请选择是否拷贝', trigger: 'change' },
    accessStatus: { required: true, message: '请选择调阅状态', trigger: 'change' },
    approvalFormUrl: { required: true, message: '请上传审批单', trigger: 'change' },
  });

  const isDrawer = ref(true);
  const loading = ref(false);
  const staffNoOptions = ref<TransformedTreeNode[]>([]); // 工号选择列表
  const OrganizationSourceData = ref<OrganizationUserTree[]>([]); // 组织结构树原始数据
  const departmentArr = ref<{ value: string | number; label: string }[]>([]);
  const sourceDepartArr = ref<{ value: string | number; label: string }[]>([]);

  // 工号输入/选择模式切换
  type STAFFNO_HTML_TYPE = 'INPUT' | 'SELECT';
  const staffNoHtmlType = ref<STAFFNO_HTML_TYPE>('SELECT');

  // 审批单上传相关
  const uploadImagesRef = ref<InstanceType<typeof UploadImages>>();
  const approvalImages = ref<ImageItem[]>([]);

  const approvalImageList = computed(() => {
    if (!formParams.value.approvalFormUrl) return [];
    // 如果是临时标记值，返回空数组
    if (formParams.value.approvalFormUrl === 'temp') return [];
    try {
      return JSON.parse(formParams.value.approvalFormUrl);
    } catch (e) {
      return [];
    }
  });

  // 通过工号查询组织结构树
  const remoteMethod = (query: string) => {
    if (query) {
      loading.value = true;
      queryOrganizationUserTree(Number(query)).then((res) => {
        if (res) {
          loading.value = false;
          staffNoOptions.value = transformTreeData(res, true);
          OrganizationSourceData.value = res;
          departmentArr.value = transformTreeData(OrganizationSourceData.value, false);
        }
      });
    } else {
      staffNoOptions.value = [];
    }
  };

  // 防抖
  const debouncedRemoteMethod = debounce(remoteMethod, 1000);

  const handleClearStaffNo = () => {
    formParams.value.staffNo = '';
    formParams.value.userName = '';
    formParams.value.deptId = undefined;
    formParams.value.deptName = '';
  };

  // 切换工号输入/选择模式
  const handleChangeStaff = () => {
    staffNoHtmlType.value = staffNoHtmlType.value === 'INPUT' ? 'SELECT' : 'INPUT';
    if (staffNoHtmlType.value === 'INPUT') {
      // 切换到输入模式时，清空工号、姓名和部门，并恢复部门列表
      formParams.value.staffNo = '';
      formParams.value.userName = '';
      formParams.value.deptId = undefined;
      formParams.value.deptName = '';
      departmentArr.value = sourceDepartArr.value;
    } else {
      // 切换到选择模式时，清空工号、姓名和部门
      formParams.value.staffNo = '';
      formParams.value.userName = '';
      formParams.value.deptId = undefined;
      formParams.value.deptName = '';
    }
  };

  // 递归查找树结构中的节点
  const findNodeInTree = (tree: any[], value: string | number): any => {
    for (const node of tree) {
      // 检查当前节点
      if (node.value === value) {
        return node;
      }
      // 检查子节点（如果有）
      if (node.children && node.children.length > 0) {
        const foundNode = findNodeInTree(node.children, value);
        if (foundNode) {
          return foundNode;
        }
      }
    }
    return null;
  };

  const handleChangeStaffNo = (value) => {
    const findUser = findUserByWorkNo(OrganizationSourceData.value, value);
    const deptId = Number(findOrgCodeByWorkNo(OrganizationSourceData.value, value));
    const dept = findNodeInTree(departmentArr.value, deptId);
    if (findUser) {
      formParams.value.staffNo = findUser.idtUserWorkNo;
      formParams.value.userName = findUser.appAccountAccountName;
      formParams.value.deptId = deptId;
      formParams.value.deptName = dept ? dept.label : '';
    }
  };

  const handleChangeDept = (value) => {
    const dept = findNodeInTree(departmentArr.value, value);
    formParams.value.deptName = dept ? dept.label : '';
  };

  const handleChangeAccessTimeRange = () => {
    if (formParams.value.accessTimeRange && formParams.value.accessTimeRange.length === 2) {
      formParams.value.accessStartTime = formParams.value.accessTimeRange[0];
      formParams.value.accessEndTime = formParams.value.accessTimeRange[1];
    }
  };

  // 格式化审批单图片
  const formatApprovalImage = async (file: File) => {
    if (!file) return file;
    const fileName = file.name;
    const res = await uploadFileApi({ bizType: UPLOAD_BIZ_TYPE.ATTACHMENT, fileName, file });
    return '"' + res.url + '"';
  };

  const handleApprovalUploadChange = async () => {
    approvalImages.value = uploadImagesRef.value!.getUploadedImages();
    // 根据是否有图片，更新审批单字段的值
    if (approvalImages.value && approvalImages.value.length > 0) {
      formParams.value.approvalFormUrl = 'temp'; // 设置非空值，表示已上传
    } else {
      formParams.value.approvalFormUrl = ''; // 设置空值
    }
    // 手动触发审批单字段的校验
    if (formRef.value) {
      formRef.value.validateField('approvalFormUrl');
    }
  };

  // 部门过滤函数
  const filterDept = (val: string, data: any) => {
    return data.label.includes(val);
  };

  // 初始化部门列表
  const initDepartmentList = () => {
    const departmentList = ref<{ value: string | number; label: string }[]>([]);
    getAllDepartments().then((res) => {
      departmentList.value = calculateTreeData(res, { level: 10, valueKey: 'id', labelKey: 'deptName' }, 1);
      sourceDepartArr.value = departmentList.value;
      departmentArr.value = departmentList.value;
    });
  };

  const handleCloseDrawer = () => {
    emits('close');
  };

  const handleSubmitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;

    // 处理调阅时段
    if (formParams.value.accessTimeRange && formParams.value.accessTimeRange.length === 2) {
      formParams.value.accessStartTime = formParams.value.accessTimeRange[0];
      formParams.value.accessEndTime = formParams.value.accessTimeRange[1];
    }

    // 先更新审批单数据，用于校验
    approvalImages.value = uploadImagesRef.value!.getUploadedImages();

    // 临时设置审批单字段，用于校验
    if (approvalImages.value && approvalImages.value.length > 0) {
      formParams.value.approvalFormUrl = 'temp'; // 设置非空值用于校验
    } else {
      formParams.value.approvalFormUrl = ''; // 设置空值触发必填校验
    }

    // 先进行表单校验
    await formEl.validate(async (valid) => {
      if (!valid) return;

      // 校验通过后，处理审批单图片上传
      const images = await Promise.all(
        (approvalImages.value || []).map((item) => {
          if (!item.file && item.url) {
            return '"' + item.url + '"';
          } else {
            return formatApprovalImage(item.file!);
          }
        }),
      );
      const approvalFormUrlValue = '[' + images.toString() + ']';

      // 创建提交数据对象，不直接修改 formParams.value.approvalFormUrl
      // 避免触发 approvalImageList 计算属性变化，进而触发 UploadImages 的 watch
      const submitData = {
        ...formParams.value,
        approvalFormUrl: approvalFormUrlValue,
      };

      if (props.type === 'add') {
        addSurveillanceInfo(submitData).then(() => {
          ElMessage.success('添加成功');
          handleCloseDrawer();
        });
      } else {
        updateSurveillanceInfo(submitData).then(() => {
          ElMessage.success('编辑成功');
          handleCloseDrawer();
        });
      }
    });
  };

  watch(
    () => props.initialData,
    (newData) => {
      if (newData) {
        formParams.value = { ...newData, accessTimeRange: null };
        if (newData.accessStartTime && newData.accessEndTime) {
          formParams.value.accessTimeRange = [newData.accessStartTime, newData.accessEndTime];
        }
        if (newData.staffNo) {
          remoteMethod(newData.staffNo);
        }
      }
    },
    { immediate: true, deep: true },
  );

  onMounted(() => {
    initDepartmentList();
    if (props.type === 'add') {
      formParams.value.createdByName = realname;
    }
  });
</script>

<style lang="scss" scoped>
  .protocal-select:deep(.el-select-dropdown__wrap) {
    max-height: 600px;
  }

  .text-mode {
    cursor: pointer;
    font-size: 12px;
    margin-left: 4px;

    &:hover {
      text-decoration: underline;
    }
  }
</style>
