<!--
 * @Author: 赵丽婷
 * @Date: 2025-12-01
 * @LastEditors: 赵丽婷
 * @LastEditTime: 2026-01-06 15:03:44
 * @FilePath: \LinkMed\linkmed-vue3\src\components\Settings\AuthenticationPanel.vue
 * @Description: 信息认证组件
 * Copyright (c) 2025 by 北京连心医疗科技有限公司, All Rights Reserved. 
-->
<template>
  <div class="authentication-panel">
    <div class="settings-content-header">
      <div class="header-row">
        <div>
          <h1>{{ t("settings.authentication.title") }}</h1>
          <p v-if="!isEditing">{{ t("settings.authentication.desc") }}</p>
        </div>
        <div class="status-wrapper" v-if="!isEditing">
          <div>
            {{ t("settings.authentication.statusLabel") }}:
            <span :style="{ color: certificationStatusColor }">
              {{ certificationStatusText }}
            </span>
          </div>
          <span
            v-if="certificationStatus === 'REJECTED'"
            style="color: #f56c6c"
            >{{ certificationNotes }}</span
          >
        </div>
      </div>
    </div>

    <!-- 展示模式 -->
    <div v-if="!isEditing" class="view-mode">
      <div class="section">
        <div class="section-title">
          {{ t("settings.authentication.basicInfo") }}
        </div>

        <div class="info-rows">
          <!-- 第一排 -->
          <div class="info-row">
            <div class="info-item">
              <label class="info-label">{{
                t("settings.authentication.realName")
              }}</label>
              <div class="info-value">{{ authData.realName || "-" }}</div>
            </div>
            <div class="info-item">
              <label class="info-label">{{
                t("settings.authentication.gender")
              }}</label>
              <div class="info-value">{{ getGenderText(authData.gender) }}</div>
            </div>
            <div class="info-item">
              <label class="info-label">{{
                t("settings.authentication.hospital")
              }}</label>
              <div class="info-value">{{ authData.hospital || "-" }}</div>
            </div>
          </div>

          <!-- 第二排 -->
          <div class="info-row">
            <div class="info-item">
              <label class="info-label">{{
                t("settings.authentication.field")
              }}</label>
              <div class="info-value">
                {{
                  authData.field
                    ? fieldOptions.find(
                        (opt) => opt.value === String(authData.field),
                      )?.label || authData.field
                    : "-"
                }}
              </div>
            </div>
            <div class="info-item">
              <label class="info-label">{{
                t("settings.authentication.position")
              }}</label>
              <div class="info-value">
                {{ formatArrayOrString(authData.position, allPositionOptions) }}
              </div>
            </div>
            <div class="info-item">
              <label class="info-label">{{
                t("settings.authentication.department")
              }}</label>
              <div class="info-value">{{ authData.department || "-" }}</div>
            </div>
          </div>

          <!-- 第三排 -->
          <div class="info-row">
            <div class="info-item">
              <label class="info-label">{{
                t("settings.authentication.location")
              }}</label>
              <div class="info-value">
                {{ convertLocationCodesToNames(authData.location) }}
              </div>
            </div>
          </div>
          <!-- 第四排 -->
          <div class="info-row">
            <div class="info-item">
              <label class="info-label">
                {{ t("settings.authentication.introduction") }}
              </label>
              <div class="intro-display">
                {{
                  authData.introduction ||
                  t("settings.authentication.noIntroduction")
                }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="section">
        <div class="section-title">
          {{ t("settings.authentication.verificationCode") }}
        </div>
        <div class="qrcode-display">
          <template v-if="authData.qrCodes && authData.qrCodes.length > 0">
            <div
              v-for="(code, index) in authData.qrCodes"
              :key="index"
              class="qrcode-item"
            >
              <img
                :src="code.url"
                alt="认证二维码"
                class="qrcode-image"
                @click="
                  showPreview = true;
                  previewIndex = index;
                "
              />
            </div>
          </template>
          <div v-else class="qrcode-placeholder">
            {{ t("settings.authentication.noQrCode") }}
          </div>
        </div>
        <!-- 图片预览器 -->
        <el-image-viewer
          v-if="showPreview && authData.qrCodes && authData.qrCodes.length > 0"
          show-progress
          :url-list="authData.qrCodes.map((c) => c.url)"
          :initial-index="previewIndex"
          @close="showPreview = false"
        >
          <template #viewer-error>
            <div class="image-slot viewer-error">
              <el-icon><IconPicture /></el-icon>
              <span>
                {{
                  t("settings.authentication.imageLoadError") || "图片加载失败"
                }}
              </span>
            </div>
          </template>
        </el-image-viewer>
      </div>
      <div class="action-buttons">
        <el-button
          v-if="!isEditing"
          class="edit-btn"
          type="primary"
          @click="handleEdit"
        >
          {{ t("settings.authentication.edit") }}
        </el-button>
      </div>
    </div>

    <!-- 编辑模式 -->
    <div v-else class="edit-mode">
      <div class="section">
        <div class="section-title">
          {{ t("settings.authentication.basicInfo") }}
        </div>

        <div class="form-rows">
          <!-- 第一排 -->
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">
                <span class="required">*</span>
                {{ t("settings.authentication.realName") }}
              </label>
              <el-input
                v-model="editData.realName"
                class="input"
                type="text"
                :placeholder="t('settings.authentication.realNamePlaceholder')"
              />
            </div>
            <div class="form-group">
              <label class="form-label">
                <span class="required">*</span>
                {{ t("settings.authentication.gender") }}
              </label>
              <el-select
                v-model="editData.gender"
                class="select-input"
                :placeholder="t('settings.authentication.genderPlaceholder')"
              >
                <el-option
                  :label="t('settings.authentication.male')"
                  value="男"
                />
                <el-option
                  :label="t('settings.authentication.female')"
                  value="女"
                />
              </el-select>
            </div>
            <div class="form-group">
              <label class="form-label">
                <span class="required">*</span>
                {{ t("settings.authentication.hospital") }}
              </label>
              <el-input
                v-model="editData.hospital"
                class="input"
                type="text"
                :placeholder="t('settings.authentication.hospitalPlaceholder')"
              />
            </div>
          </div>

          <!-- 第二排 -->
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">
                <span class="required">*</span
                >{{ t("settings.authentication.field") }}</label
              >
              <el-select-v2
                v-model="editData.field"
                :options="fieldOptions"
                :placeholder="t('settings.authentication.fieldPlaceholder')"
                class="input"
                style="width: 100%"
              />
            </div>
            <div class="form-group">
              <label class="form-label">
                <span class="required">*</span
                >{{ t("settings.authentication.position") }}</label
              >
              <el-select-v2
                v-model="editData.position"
                :options="positionOptions"
                :placeholder="t('settings.authentication.positionPlaceholder')"
                class="input"
                multiple
                collapse-tags
                :max-collapse-tags="2"
                style="width: 100%"
              />
            </div>
            <div class="form-group">
              <label class="form-label">
                <span class="required">*</span
                >{{ t("settings.authentication.department") }}</label
              >
              <el-input
                v-model="editData.department"
                class="input"
                type="text"
                :placeholder="
                  t('settings.authentication.departmentPlaceholder')
                "
              />
            </div>
          </div>

          <!-- 第三排 -->
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">
                <span class="required">*</span>
                {{ t("settings.authentication.location") }}
              </label>
              <el-cascader
                v-model="editData.location"
                class="select-input"
                :options="locationOptions"
                :placeholder="t('settings.authentication.locationPlaceholder')"
              />
            </div>
          </div>
          <!-- 第四排 -->
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">
                {{ t("settings.authentication.introduction") }}
              </label>
              <div class="form-group full-width">
                <textarea
                  v-model="editData.introduction"
                  class="textarea"
                  :placeholder="
                    t('settings.authentication.introductionPlaceholder')
                  "
                  rows="3"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="section">
        <div class="section-title">
          {{ t("settings.authentication.verificationCode") }}
        </div>
        <div class="upload-section">
          <div class="upload-tips">
            {{ t("settings.authentication.uploadTips") }}
          </div>
          <el-upload
            class="qrcode-uploader"
            list-type="picture-card"
            :file-list="editFileList"
            :on-change="handleQrCodeChange"
            :on-remove="handleQrCodeRemove"
            :auto-upload="false"
            multiple
            accept="image/*"
          >
            <el-icon><Plus /></el-icon>
            <template #tip>
              <div class="el-upload__tip">
                {{ t("settings.authentication.uploadQrCode") }}
              </div>
            </template>
          </el-upload>
        </div>
      </div>

      <div class="action-buttons">
        <el-button class="cancel-btn" @click="handleCancel">
          {{ t("settings.authentication.cancel") }}
        </el-button>
        <el-button class="cancel-btn" @click="handleSave">
          {{ t("settings.authentication.save") }}
        </el-button>
        <el-button
          class="submit-btn"
          type="primary"
          :loading="submitting"
          @click="handleSubmit"
        >
          {{ t("settings.authentication.submit") }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed, watch } from "vue";
import { useI18n } from "vue-i18n";
import { ElMessage, ElImageViewer } from "element-plus";
import { Plus, Picture as IconPicture } from "@element-plus/icons-vue";
import type { UploadFile } from "element-plus";
import {
  apiGetRegionsTree,
  apiGetDictItems,
  getUserProfile,
  apiUpdateProfile,
  apiGetVerificationImage,
  apiGetVerificationImages,
  apiUpdateVerificationImages,
  apiDeleteVerificationImage,
  apiSubmitCertification,
  apiGetCertificationStatus,
} from "@/api/user";
import type {
  RegionNode,
  DictItem,
  CertificationStatus,
  VerificationImageItem,
} from "@/api/user";

const { t } = useI18n();

interface AuthenticationData {
  realName: string; // 真实姓名
  gender: string; // 性别
  hospital: string; // 所属医院/公司/机构
  field: string | string[]; // 领域
  position: string | string[]; // 职称
  department: string; //所属部门
  location: string; // 所在地区
  qrCodes: VerificationImageItem[]; // 认证信息
  introduction: string; // 个人简介
}

const isEditing = ref(false);
const submitting = ref(false);
const userId = ref<number | null>(null);
const showPreview = ref(false);
const previewIndex = ref(0);
const certificationStatus = ref<CertificationStatus | null>(null);
const certificationNotes = ref<string | null>("");

const authData = reactive<AuthenticationData>({
  realName: "",
  gender: "",
  hospital: "",
  field: "", // 单选模式，使用字符串
  position: [],
  department: "",
  location: "",
  qrCodes: [],
  introduction: "",
});

const editData = reactive<AuthenticationData>({
  realName: "",
  gender: "",
  hospital: "",
  field: "", // 单选模式，使用字符串
  position: [],
  department: "",
  location: "",
  qrCodes: [],
  introduction: "",
});

// 用于 el-upload 的文件列表
const editFileList = ref<any[]>([]);

// 监听 editData.qrCodes 的变化，同步到 editFileList
watch(
  () => editData.qrCodes,
  (newCodes) => {
    editFileList.value = newCodes.map((item) => ({
      name: item.path || item.url,
      url: item.url,
    }));
  },
  { immediate: true },
);

// 地址选项
const locationOptions = ref<
  Array<{
    value: string | number;
    label: string;
    children?: Array<{
      value: string | number;
      label: string;
      children?: Array<{ value: string | number; label: string }>;
    }>;
  }>
>([]);

// 将 API 返回的地区树数据转换为 Cascader 需要的格式
const convertRegionNodeToCascaderOption = (
  node: RegionNode,
): {
  value: string | number;
  label: string;
  children?: Array<any>;
} => {
  const option: {
    value: string | number;
    label: string;
    children?: Array<any>;
  } = {
    value: node.code || node.id || "",
    label: node.name || "",
  };

  if (node.children && node.children.length > 0) {
    option.children = node.children.map(convertRegionNodeToCascaderOption);
  }

  return option;
};

// 加载地区树数据
const loadRegionsTree = async () => {
  try {
    const { data } = await apiGetRegionsTree();
    if (Array.isArray(data)) {
      // 跳过国家级别，直接从省份开始
      // 查找"中国"节点，使用其子节点（省份）作为第一级
      const chinaNode = data.find(
        (node: RegionNode) => node.name === "中国" || node.code === "000000",
      );
      if (chinaNode && chinaNode.children) {
        // 使用中国的省份作为第一级选项
        locationOptions.value = chinaNode.children.map(
          convertRegionNodeToCascaderOption,
        );
      } else {
        // 如果没有找到中国节点，尝试使用所有节点的子节点（省份级别）
        const provinceNodes: RegionNode[] = [];
        data.forEach((node: RegionNode) => {
          if (node.children) {
            provinceNodes.push(...node.children);
          }
        });
        if (provinceNodes.length > 0) {
          locationOptions.value = provinceNodes.map(
            convertRegionNodeToCascaderOption,
          );
        } else {
          // 如果都没有，则使用原始数据（降级处理）
          locationOptions.value = data.map(convertRegionNodeToCascaderOption);
        }
      }
    }
  } catch (error) {
    console.error("获取地区树失败:", error);
    ElMessage.error("获取地区数据失败，请稍后重试");
  }
};

// 领域选项（包含 code 信息用于判断）
const fieldOptions = ref<
  Array<{
    id: number;
    value: string;
    label: string;
    code?: string;
    pinyinCode?: string;
  }>
>([]);

// 所有职称选项（原始数据，包含 code 信息用于过滤）
const allPositionOptions = ref<
  Array<{
    id: number;
    value: string;
    label: string;
    code?: string;
    pinyinCode?: string;
  }>
>([]);

// 根据选中的领域过滤职称选项
const positionOptions = computed(() => {
  // 单选模式下，field 是字符串
  if (!editData.field) {
    return [];
  }

  // 通过查找 fieldOptions 来获取对应的 code
  const fieldOption = fieldOptions.value.find(
    (option) => option.value === editData.field,
  );
  const selectedFieldCode = fieldOption?.code || editData.field;

  // 在 allPositionOptions 中过滤出 code 与选中领域 code 相同的项
  return allPositionOptions.value.filter(
    (item) => item.code === selectedFieldCode,
  );
});

// 获取认证状态的国际化文本
const certificationStatusText = computed(() => {
  if (!certificationStatus.value) {
    return "-";
  }
  switch (certificationStatus.value) {
    case "UNVERIFIED":
      return t("settings.authentication.statusUnverified");
    case "PENDING":
      return t("settings.authentication.statusPending");
    case "APPROVED":
      return t("settings.authentication.statusApproved");
    case "REJECTED":
      return t("settings.authentication.statusRejected");
    default:
      return certificationStatus.value;
  }
});

// 获取认证状态的颜色
const certificationStatusColor = computed(() => {
  if (!certificationStatus.value) {
    return "#999999"; // 默认灰色
  }
  switch (certificationStatus.value) {
    case "UNVERIFIED":
      return "#999999"; // 灰色 - 未认证
    case "PENDING":
      return "#FF9800"; // 橙色 - 审核中
    case "APPROVED":
      return "#67C23A"; // 绿色 - 已认证
    case "REJECTED":
      return "#F56C6C"; // 红色 - 已驳回
    default:
      return "#999999";
  }
});

// 监听领域变化，当领域改变时清空职称选择
watch(
  () => editData.field,
  (newField, oldField) => {
    // 只有在编辑模式下，且领域确实发生变化时才清空职称
    // oldField !== undefined 确保不是初始化时的赋值
    // oldField !== "" 确保不是从空值初始化
    if (
      isEditing.value &&
      newField !== oldField &&
      oldField !== undefined &&
      oldField !== ""
    ) {
      editData.position = [];
    }
  },
);

// 将字典项转换为 Select 选项格式
const convertDictItemToOption = (
  item: DictItem,
): {
  id: number;
  value: string;
  label: string;
  code?: string;
  pinyinCode?: string;
} => {
  return {
    id: item.id || 0,
    value: item.id ? String(item.id) : "",
    label: item.name || "",
    code: item.code || "",
    pinyinCode: item.pinyinCode || "",
  };
};

// 加载领域选项
const loadFieldOptions = async () => {
  try {
    const { data } = await apiGetDictItems("domain");
    if (Array.isArray(data)) {
      fieldOptions.value = data.map(convertDictItemToOption);
    }
  } catch (error) {
    console.error("获取领域选项失败:", error);
    ElMessage.error("获取领域数据失败，请稍后重试");
  }
};

// 加载职称选项（加载所有数据）
const loadPositionOptions = async () => {
  try {
    const { data } = await apiGetDictItems("domain_title");
    if (Array.isArray(data)) {
      allPositionOptions.value = data.map(convertDictItemToOption);
    }
  } catch (error) {
    console.error("获取职称选项失败:", error);
    ElMessage.error("获取职称数据失败，请稍后重试");
  }
};

const getGenderText = (gender: string) => {
  if (gender === "男") return t("settings.authentication.male");
  if (gender === "女") return t("settings.authentication.female");
  return "-";
};

// 将ID数组转换为名称数组（用于领域和职称）
const convertIdsToLabels = (
  ids: string | string[] | undefined,
  options: Array<{ value: string; label: string }>,
): string[] => {
  if (!ids) return [];
  const idArray = Array.isArray(ids) ? ids : [ids];
  return idArray
    .map((id) => {
      const option = options.find((opt) => opt.value === String(id));
      return option ? option.label : id;
    })
    .filter(Boolean);
};

// 将名称数组转换为ID数组（用于领域和职称的回显）
const convertLabelsToIds = (
  labels: string | string[] | undefined,
  options: Array<{ value: string; label: string }>,
): string[] => {
  if (!labels) return [];
  const labelArray = Array.isArray(labels) ? labels : [labels];
  return labelArray
    .map((label) => {
      const option = options.find((opt) => opt.label === String(label));
      return option ? option.value : label;
    })
    .filter(Boolean);
};

// 根据地区名称数组查找对应的code数组（用于回显）
const findLocationCodesByLabels = (
  labels: string | string[],
  options: typeof locationOptions.value,
): string[] => {
  if (!labels) return [];
  const labelArray = Array.isArray(labels) ? labels : labels.split("/");

  const findCodeByLabel = (
    opts: typeof locationOptions.value,
    targetLabel: string,
    level: number = 0,
  ): string | null => {
    for (const option of opts) {
      if (option.label === targetLabel) {
        return String(option.value);
      }
      if (option.children && level < labelArray.length - 1) {
        const found = findCodeByLabel(option.children, targetLabel, level + 1);
        if (found) return found;
      }
    }
    return null;
  };

  const codes: string[] = [];
  for (let i = 0; i < labelArray.length; i++) {
    const labelItem = labelArray[i];
    if (!labelItem) continue;
    const label = String(labelItem).trim();
    if (!label) continue;

    // 从当前层级开始查找
    let currentOptions = options;
    for (let j = 0; j < i; j++) {
      const parentCode = codes[j];
      if (!parentCode) break;
      const parentOption = findLocationOptionByCode(currentOptions, parentCode);
      if (parentOption?.children) {
        currentOptions = parentOption.children;
      } else {
        break;
      }
    }

    const code = findCodeByLabel(currentOptions, label, i);
    if (code) {
      codes.push(code);
    }
  }

  return codes;
};

// 根据code查找地区选项
const findLocationOptionByCode = (
  options: typeof locationOptions.value,
  code: string,
): { value: string | number; label: string; children?: any[] } | null => {
  for (const option of options) {
    if (String(option.value) === String(code)) {
      return option;
    }
    if (option.children) {
      const found = findLocationOptionByCode(option.children, code);
      if (found) return found;
    }
  }
  return null;
};

// 根据地区code数组获取label数组（用于保存）
const getLocationLabelsByCodes = (
  codes: string | string[],
  options: typeof locationOptions.value,
): string[] => {
  if (!codes) return [];
  const codeArray = Array.isArray(codes) ? codes : codes.split("/");

  const labels: string[] = [];
  let currentOptions = options;

  for (const code of codeArray) {
    const option = findLocationOptionByCode(currentOptions, code);
    if (option) {
      labels.push(option.label);
      if (option.children) {
        currentOptions = option.children;
      } else {
        break;
      }
    } else {
      break;
    }
  }

  return labels;
};

// 将地区code数组转换为名称字符串
const convertLocationCodesToNames = (
  codes: string | string[] | undefined,
): string => {
  if (!codes) return "-";
  const codeArray = Array.isArray(codes) ? codes : [codes];
  if (codeArray.length === 0) return "-";

  const findLocationName = (
    options: typeof locationOptions.value,
    targetCode: string | number,
  ): string | null => {
    for (const option of options) {
      if (
        option.value === targetCode ||
        String(option.value) === String(targetCode)
      ) {
        return option.label;
      }
      if (option.children) {
        const found = findLocationName(option.children, targetCode);
        if (found) return found;
      }
    }
    return null;
  };

  const names = codeArray
    .map((code) => findLocationName(locationOptions.value, code))
    .filter((name): name is string => name !== null);

  return names.length > 0 ? names.join("/") : "-";
};

// 格式化数组或字符串为显示文本（用于领域和职称，将ID转换为名称）
const formatArrayOrString = (
  value: string | string[] | undefined,
  options?: Array<{ value: string; label: string }>,
): string => {
  if (!value) return "-";
  // 如果提供了选项，说明需要将ID转换为名称
  if (options) {
    const labels = convertIdsToLabels(value, options);
    return labels.length > 0 ? labels.join("、") : "-";
  }
  // 否则直接格式化
  if (Array.isArray(value)) {
    return value.length > 0 ? value.join("、") : "-";
  }
  return value;
};

const handleEdit = () => {
  // 复制当前数据到编辑数据，确保类型正确
  Object.assign(editData, {
    ...authData,
    // 领域改为单选，如果是数组则取第一个值，否则直接使用
    field: Array.isArray(authData.field)
      ? authData.field[0] || ""
      : authData.field || "",
    position: Array.isArray(authData.position)
      ? [...authData.position]
      : authData.position
        ? [authData.position]
        : [],
    qrCodes: [...authData.qrCodes],
    location: Array.isArray(authData.location)
      ? [...authData.location]
      : authData.location
        ? authData.location.includes("/")
          ? authData.location.split("/").filter(Boolean)
          : [authData.location]
        : [],
  });
  isEditing.value = true;
};

const handleCancel = () => {
  isEditing.value = false;
};

// 根据选中的地区 code 数组，从 locationOptions 中查找对应的地区信息
const getLocationDictJson = (
  locationCodes: string | string[] | undefined,
): string => {
  if (!locationCodes) return "";

  const codes = Array.isArray(locationCodes) ? locationCodes : [locationCodes];
  if (codes.length === 0) return "";

  const findLocationInfo = (
    options: typeof locationOptions.value,
    targetCode: string | number,
    level: number = 0,
  ): { code: string | number; label: string; level: number } | null => {
    for (const option of options) {
      if (
        option.value === targetCode ||
        String(option.value) === String(targetCode)
      ) {
        return {
          code: option.value,
          label: option.label,
          level,
        };
      }
      if (option.children) {
        const found = findLocationInfo(option.children, targetCode, level + 1);
        if (found) return found;
      }
    }
    return null;
  };

  // 查找所有地区信息，按顺序匹配codes数组
  const locationInfo: Array<{
    code: string | number;
    label: string;
    level: number;
  }> = [];

  // 按顺序查找每个code对应的地区信息
  for (let i = 0; i < codes.length; i++) {
    const code = codes[i];
    if (!code) continue; // 跳过空值
    const found = findLocationInfo(locationOptions.value, code, 0);
    if (found) {
      // 根据在codes数组中的位置确定层级（因为已经跳过了国家级别）
      // codes[0] = province (level 0)
      // codes[1] = city (level 1)
      // codes[2] = district (level 2)
      // codes[3] = county (level 3)
      locationInfo.push({
        code: found.code,
        label: found.label,
        level: i,
      });
    }
  }

  if (locationInfo.length === 0) return "";

  // 构建 JSON 对象，包含省市区县信息
  const dictJson: any = {};
  locationInfo.forEach((info) => {
    const levelNames = ["province", "city", "district", "county"];
    const levelName = levelNames[info.level] || `level${info.level}`;
    dictJson[levelName] = {
      code: String(info.code),
      name: info.label,
    };
  });

  return JSON.stringify(dictJson);
};

// 保存用户信息
const handleSave = async (): Promise<boolean> => {
  // 验证必填项
  if (!editData.realName) {
    ElMessage.error(t("settings.authentication.realNameRequired"));
    return false;
  }
  if (!editData.gender) {
    ElMessage.error(t("settings.authentication.genderRequired"));
    return false;
  }
  if (!editData.hospital) {
    ElMessage.error(t("settings.authentication.hospitalRequired"));
    return false;
  }
  if (!editData.field) {
    ElMessage.error(t("settings.authentication.fieldRequired"));
    return false;
  }
  if (
    !editData.position ||
    (Array.isArray(editData.position) && editData.position.length === 0)
  ) {
    ElMessage.error(t("settings.authentication.positionRequired"));
    return false;
  }
  if (
    !editData.location ||
    (Array.isArray(editData.location) && editData.location.length === 0)
  ) {
    ElMessage.error(t("settings.authentication.locationRequired"));
    return false;
  }
  if (!editData.department) {
    ElMessage.error(t("settings.authentication.departmentRequired"));
    return false;
  }

  submitting.value = true;

  try {
    // 处理 领域 字段：将 value（代码）转换为 label（显示名称）
    let fieldStr = "";
    if (editData.field) {
      const fieldOption = fieldOptions.value.find(
        (opt) => opt.value === String(editData.field),
      );
      fieldStr = fieldOption ? fieldOption.label : String(editData.field);
    }

    // 处理 职称 字段：将 value（代码）数组转换为 label（显示名称）数组，然后用、分隔
    let titleStr = "";
    if (editData.position) {
      const positionArray = Array.isArray(editData.position)
        ? editData.position
        : [editData.position];
      const positionLabels = positionArray
        .map((value) => {
          const option = allPositionOptions.value.find(
            (opt) => opt.value === String(value),
          );
          return option ? option.label : String(value);
        })
        .filter(Boolean);
      titleStr = positionLabels.join("、");
    }

    // 处理 所在地区 字段：将 value（代码）数组转换为 label（显示名称）数组，然后用/分隔
    let regionStr = "";
    if (editData.location) {
      const locationArray = Array.isArray(editData.location)
        ? editData.location
        : editData.location.split("/");
      const locationLabels = getLocationLabelsByCodes(
        locationArray,
        locationOptions.value,
      );
      regionStr = locationLabels.join("/");
    }

    // 生成地区字典 JSON（使用原始的 code 数组）
    const dictJson = getLocationDictJson(editData.location);

    // 构建更新参数
    const updateParams = {
      realName: editData.realName,
      gender: editData.gender,
      institution: editData.hospital,
      field: fieldStr,
      title: titleStr,
      department: editData.department,
      region: regionStr,
      bio: editData.introduction,
      dictJson: dictJson,
    };

    // 调用 API 保存数据
    await apiUpdateProfile(updateParams);
    // 保存成功后重新加载数据，确保数据一致性
    await loadAuthenticationData();

    ElMessage.success(t("settings.authentication.submitSuccess"));
    return true;
  } catch (error: any) {
    console.error("保存用户信息失败:", error);
    ElMessage.error(
      error?.response?.data?.message ||
        error?.message ||
        t("settings.authentication.submitFailed") ||
        "保存失败，请稍后重试",
    );
    return false;
  } finally {
    submitting.value = false;
  }
};

const handleQrCodeChange = async (file: UploadFile) => {
  if (file.raw) {
    try {
      // 调用接口上传图片（使用多图上传接口）
      const { data } = await apiUpdateVerificationImages([file.raw]);
      ElMessage.success(t("settings.authentication.uploadQrCodeSuccess"));

      // 上传成功后，将返回的图片信息添加到预览列表
      if (Array.isArray(data) && data.length > 0) {
        data.forEach((item) => {
          if (!editData.qrCodes.some((c) => c.url === item.url)) {
            editData.qrCodes.push(item);
          }
        });
      }
    } catch (error: any) {
      console.error("上传认证图片失败:", error);
      ElMessage.error(
        error?.response?.data?.message ||
          error?.message ||
          t("settings.authentication.uploadQrCodeFailed"),
      );
      // 上传失败时，从文件列表中移除
      const index = editFileList.value.findIndex((f) => f.uid === file.uid);
      if (index > -1) {
        editFileList.value.splice(index, 1);
      }
    }
  }
};

const handleQrCodeRemove = async (file: UploadFile) => {
  try {
    // 找到对应的图片对象
    const targetItem = editData.qrCodes.find((c) => c.url === file.url);
    if (targetItem) {
      // 从 URL 或 path 中提取文件名（仅提取最后一部分）
      const fullPath = targetItem.path || targetItem.url;
      const filename = fullPath.split("/").pop() || "";
      if (filename) {
        await apiDeleteVerificationImage(filename);
      }

      const index = editData.qrCodes.indexOf(targetItem);
      if (index > -1) {
        editData.qrCodes.splice(index, 1);
      }
    }
  } catch (error: any) {
    console.error("删除认证图片失败:", error);
    ElMessage.error("删除图片失败，请稍后重试");
  }
};

const handleSubmit = async () => {
  // 验证证件是否上传
  if (!editData.qrCodes || editData.qrCodes.length === 0) {
    ElMessage.error(t("settings.authentication.uploadQrCodeRequired"));
    return;
  }
  submitting.value = true;
  try {
    const saveSuccess = await handleSave();
    // 返回 false（验证失败或保存失败），则不继续后续接口调用
    if (!saveSuccess) {
      return;
    }
    await apiSubmitCertification();
    // 提交成功后重新加载认证状态
    await loadCertificationStatus();
    isEditing.value = false;
  } catch (error: any) {
    ElMessage.error(
      error?.message || t("settings.authentication.submitFailed"),
    );
  } finally {
    submitting.value = false;
  }
};

// 加载数据
const loadAuthenticationData = async () => {
  try {
    // 调用 getUserProfile 获取真实用户信息
    let userData;
    try {
      userData = await getUserProfile();
    } catch (error) {
      console.warn("⚠️ 获取真实用户信息失败，使用模拟数据:", error);
      // 如果获取失败，使用模拟数据作为后备
      userData = {
        name: "小强语",
        gender: "女",
        institution: "华西医院华西医院公司",
        field: "学校或科研机构、公司",
        title: "经理",
        department: "科室",
        region: "四川省/成都市/市辖区",
        bio: "您的个人简介",
      };
    }

    // 处理 location 字段：优先使用 dictJson 回显，否则使用 region 字符串（label）转换为 code
    let locationValue: string | string[] = "";
    if ((userData as any).dictJson) {
      try {
        const dictJson = JSON.parse((userData as any).dictJson);
        // 从 dictJson 中提取 code 值，按省市区顺序组成数组
        const locationCodes: string[] = [];
        const levelOrder = ["province", "city", "district", "county"];
        levelOrder.forEach((level) => {
          if (dictJson[level] && dictJson[level].code) {
            locationCodes.push(String(dictJson[level].code));
          }
        });
        if (locationCodes.length > 0) {
          locationValue = locationCodes;
        } else {
          // 如果没有 code，尝试从 region 字符串（label）转换为 code
          if (userData.region) {
            const regionLabels = userData.region.includes("/")
              ? userData.region.split("/").filter(Boolean)
              : [userData.region];
            locationValue = findLocationCodesByLabels(
              regionLabels,
              locationOptions.value,
            );
          }
        }
      } catch (error) {
        console.warn("解析 dictJson 失败:", error);
        // 解析失败时，尝试从 region 字符串（label）转换为 code
        if (userData.region) {
          const regionLabels = userData.region.includes("/")
            ? userData.region.split("/").filter(Boolean)
            : [userData.region];
          locationValue = findLocationCodesByLabels(
            regionLabels,
            locationOptions.value,
          );
        }
      }
    } else {
      // 如果没有 dictJson，region 字符串是 label（显示名称），需要转换为 code（代码）
      if (userData.region) {
        const regionLabels = userData.region.includes("/")
          ? userData.region.split("/").filter(Boolean)
          : [userData.region];
        locationValue = findLocationCodesByLabels(
          regionLabels,
          locationOptions.value,
        );
      }
    }

    // 保存用户ID，用于获取认证图片
    userId.value = userData.id || null;

    // 将 UserProfile 数据映射到 AuthenticationData
    const mappedData: any = {
      realName: userData.realName ?? "",
      gender: userData.gender || "",
      hospital: userData.institution || "",
      department: userData.department || "",
      location: locationValue,
      qrCodes: [], // 二维码需要单独获取
      introduction: userData.bio || "",
    };

    // 获取用户认证图片
    if (userData.id) {
      try {
        // 使用新的获取多图列表接口
        const response = await apiGetVerificationImages(userData.id);
        const responseData = response.data;
        if (Array.isArray(responseData)) {
          mappedData.qrCodes = responseData;
        } else {
          mappedData.qrCodes = [];
        }
      } catch (error: any) {
        // 如果获取多图失败，尝试降级使用单图接口
        try {
          const response = await apiGetVerificationImage(userData.id);
          const responseData = response.data;
          if (responseData instanceof Blob && responseData.size > 0) {
            mappedData.qrCodes = [
              {
                url: URL.createObjectURL(responseData),
                path: "verification-image",
                size: responseData.size,
                lastModifiedEpochMs: Date.now(),
                contentType: responseData.type,
              },
            ];
          } else {
            mappedData.qrCodes = [];
          }
        } catch (innerError) {
          mappedData.qrCodes = [];
        }
      }
    }

    // 处理 field 字段：后端返回的是 label（显示名称），需要转换为 value（代码）以便编辑模式回显
    if (userData.field) {
      if (typeof userData.field === "string") {
        // 如果包含分隔符，取第一个值
        const parts = userData.field
          .split(/[、/，,]/)
          .map((s: string) => s.trim())
          .filter(Boolean);
        const fieldLabel = parts.length > 0 ? parts[0] : "";
        // 根据 label 查找对应的 value
        const fieldOption = fieldOptions.value.find(
          (opt) => opt.label === fieldLabel,
        );
        mappedData.field = fieldOption ? fieldOption.value : fieldLabel;
      } else {
        // 如果是数字或代码，尝试查找对应的 label，如果找不到则直接使用
        const fieldOption = fieldOptions.value.find(
          (opt) => opt.value === String(userData.field),
        );
        mappedData.field = fieldOption
          ? fieldOption.value
          : String(userData.field);
      }
    } else {
      mappedData.field = "";
    }

    // 处理 position/title 字段：后端返回的是 label（显示名称）数组，需要转换为 value（代码）数组以便编辑模式回显
    if (userData.title) {
      if (typeof userData.title === "string") {
        // 支持多种分隔符：、/ ,
        const titleLabels = userData.title
          .split(/[、/，,]/)
          .map((s: string) => s.trim())
          .filter(Boolean);
        // 将 label 数组转换为 value 数组
        mappedData.position = convertLabelsToIds(
          titleLabels,
          allPositionOptions.value,
        );
      } else if (Array.isArray(userData.title)) {
        // 如果是数组，假设是 label 数组，转换为 value 数组
        mappedData.position = convertLabelsToIds(
          userData.title,
          allPositionOptions.value,
        );
      } else {
        mappedData.position = [];
      }
    } else {
      mappedData.position = [];
    }

    Object.assign(authData, mappedData);
  } catch (error) {
    console.error("Failed to load authentication data:", error);
    ElMessage.error("加载认证信息失败，请稍后重试");
  }
};

// 加载认证状态
const loadCertificationStatus = async () => {
  try {
    const { data } = await apiGetCertificationStatus();
    certificationStatus.value = data.status || null;
    certificationNotes.value = data.notes || null;
  } catch (error) {
    console.error("Failed to load certification status:", error);
    // 不显示错误消息，静默失败
  }
};

onMounted(() => {
  loadAuthenticationData();
  loadRegionsTree();
  loadFieldOptions();
  loadPositionOptions();
  loadCertificationStatus();
});
</script>

<style scoped lang="scss">
.authentication-panel {
  color: var(--color-text);
  background: var(--color-bg);
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.settings-content-header {
  margin-bottom: 20px;
  text-align: left;

  .header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .status-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  h1 {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 8px;
  }

  p {
    font-size: 14px;
    color: var(--color-secondary);
  }

  .edit-btn {
    flex-shrink: 0;
  }
}

.section {
  width: 100%;
  margin-bottom: 24px;
}

.section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 20px;
}

// 展示模式样式
.view-mode {
  .info-rows {
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: var(--color-card);
    padding: 24px;
    border-radius: 8px;
  }

  .info-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 40px;

    &:last-child {
      grid-template-columns: 1fr;
    }
  }

  .info-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .info-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-secondary);
  }

  .info-value {
    font-size: 15px;
    color: var(--color-text);
    word-break: break-word;
  }

  .qrcode-display {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }

  .qrcode-item {
    width: 200px;
    height: 200px;
  }

  .qrcode-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s;

    &:hover {
      opacity: 0.8;
    }
  }

  .image-slot.viewer-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--color-secondary);
    font-size: 14px;
  }

  .qrcode-placeholder {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--color-border);
    border-radius: 8px;
    color: var(--color-secondary);
    font-size: 14px;
  }

  .intro-display {
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.6;
    min-height: 40px;
    white-space: pre-wrap;
    word-break: break-word;
  }
}

// 编辑模式样式
.edit-mode {
  .form-rows {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .form-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px 24px;

    &:last-child {
      grid-template-columns: 1fr;
    }
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;

    &.full-width {
      grid-column: 1 / -1;
    }
  }

  .form-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-secondary);

    .required {
      color: #f56c6c;
      margin-right: 4px;
    }
  }

  .input {
    color: var(--color-text-secondary);
    font-size: 14px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s;

    &:focus {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 2px rgba(51, 153, 255, 0.1);
    }

    &::placeholder {
      color: var(--color-placeholder);
    }
  }
  .textarea {
    background: var(--color-card);
    color: var(--color-text-secondary);
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s;
    resize: vertical;
    font-family: inherit;
    line-height: 1.6;

    &:focus {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 2px rgba(51, 153, 255, 0.1);
    }

    &::placeholder {
      color: var(--color-placeholder);
    }
  }

  :deep(.select-input) {
    width: 100%;

    .el-input__wrapper {
      border: 1.5px solid var(--color-border);
      box-shadow: none;
      transition: border-color 0.2s;

      &:hover,
      &.is-focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px rgba(51, 153, 255, 0.1);
      }
    }

    .el-input__inner {
      color: var(--color-text-secondary);
    }
  }

  .upload-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .upload-tips {
    font-size: 14px;
    color: var(--color-secondary);
  }

  .qrcode-uploader {
    :deep(.el-upload--picture-card) {
      background-color: var(--color-card);
      border: 2px dashed var(--color-border);
      border-radius: 8px;
      transition: border-color 0.2s;

      &:hover {
        border-color: var(--color-primary);
      }
    }
  }

  .action-buttons {
    display: flex;
    justify-content: flex-start;
    margin-top: 16px;

    .submit-btn {
      background: var(--color-primary);
      color: var(--color-bg);
      border: none;
      padding: 10px 24px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      transition: all 0.2s;

      &:hover {
        background: var(--color-btn-hover);
      }
    }

    .cancel-btn {
      padding: 10px 24px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
    }
  }
}

@media (max-width: 1024px) {
  .authentication-panel {
    max-width: 100%;
    padding: 0 4px 20px 4px;
  }

  .view-mode .info-row,
  .edit-mode .form-row {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
}
</style>