jiapu/public/js/region-pages.js

(function (root, factory) {
  // 行政区划模块同时支持浏览器页面和 Node 单元测试。
  if (typeof module === 'object' && module.exports) {
    module.exports = factory(root);
    return;
  }

  root.RegionPages = factory(root);
  if (root.document) {
    root.document.addEventListener('DOMContentLoaded', function () {
      root.RegionPages.init();
    });
  }
})(typeof globalThis !== 'undefined' ? globalThis : window, function (root) {
  'use strict';

  var documentRef = root.document;

  function normalizeList(data) {
    // ApiClient 已解包 PC ListResult；组件只接收正式的数组结果。
    if (Array.isArray(data)) return data;
    return [];
  }

  function escapeHtml(value) {
    // 地区名称和编码进入 option 前统一转义。
    return String(value === undefined || value === null ? '' : value)
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');
  }

  function getRegionCode(item) {
    return item && item.regionCode || '';
  }

  function getRegionName(item) {
    return item && item.regionName || '未命名地区';
  }

  function getRegionLevel(item) {
    var level = Number(item && item.regionLevel);

    return Number.isInteger(level) ? level : 0;
  }

  function buildRegionSelection(items) {
    var selection = {
      provinceCode: '',
      cityCode: '',
      districtCode: ''
    };

    normalizeList(items).forEach(function (item) {
      var code = getRegionCode(item);
      var level = getRegionLevel(item);

      if (level === 1) selection.provinceCode = code;
      if (level === 2) selection.cityCode = code;
      if (level === 3) selection.districtCode = code;
    });

    return selection;
  }

  function buildRegionOption(item) {
    return '<option value="' + escapeHtml(getRegionCode(item)) + '">' + escapeHtml(getRegionName(item)) + '</option>';
  }

  function buildPathText(items) {
    return normalizeList(items).map(function (item) {
      return getRegionName(item);
    }).filter(Boolean).join(' / ');
  }

  function getFinalRegionCode(values) {
    var source = values || {};

    return source.districtCode || source.cityCode || source.provinceCode || '';
  }

  function getApi() {
    return root.GenealogyApi && root.GenealogyApi.defaultClient;
  }

  function shouldRedirectToLogin(api, error) {
    var status = error && (error.status || error.code);

    return !api || !api.getToken || !api.getToken() || Number(status) === 401;
  }

  function redirectToLogin() {
    if (!root.location) return;
    if (typeof root.location.replace === 'function') {
      root.location.replace('login.html');
      return;
    }
    root.location.href = 'login.html';
  }

  function redirectUnauthorized(api, error) {
    if (!shouldRedirectToLogin(api, error)) return false;
    if (api && api.clearToken) api.clearToken();
    redirectToLogin();
    return true;
  }

  function query(selector, rootNode) {
    if (!documentRef && !rootNode) return null;
    return (rootNode || documentRef).querySelector(selector);
  }

  function queryAll(selector, rootNode) {
    if (!documentRef && !rootNode) return [];
    return Array.prototype.slice.call((rootNode || documentRef).querySelectorAll(selector));
  }

  function showMessage(message) {
    if (root.layui && root.layui.layer) {
      root.layui.layer.msg(message);
      return;
    }

    if (root.alert) root.alert(message);
  }

  function getFormValues(form) {
    var values = {};

    queryAll('[name]', form).forEach(function (field) {
      values[field.name] = field.value;
    });

    return values;
  }

  function setOptions(select, items, placeholder) {
    var list = normalizeList(items);

    if (!select) return;
    select.innerHTML = '<option value="">' + escapeHtml(placeholder) + '</option>' + list.map(buildRegionOption).join('');
    select.disabled = false;
  }

  function resetSelect(select, placeholder) {
    if (!select) return;
    select.__regionRequestVersion = (select.__regionRequestVersion || 0) + 1;
    select.innerHTML = '<option value="">' + escapeHtml(placeholder) + '</option>';
    select.disabled = true;
  }

  function updateTargetCode(picker) {
    var values = {
      provinceCode: query('[data-region-level="province"]', picker).value,
      cityCode: query('[data-region-level="city"]', picker).value,
      districtCode: query('[data-region-level="district"]', picker).value
    };
    var target = query('[data-region-code]', picker);

    if (target) target.value = getFinalRegionCode(values);
  }

  async function loadChildrenInto(select, parentCode, placeholder) {
    var api = getApi();
    var requestVersion;
    var items;

    if (!api || !select) return false;
    requestVersion = (select.__regionRequestVersion || 0) + 1;
    select.__regionRequestVersion = requestVersion;
    select.disabled = true;

    try {
      items = await api.regionChildren(parentCode || '0');
      if (select.__regionRequestVersion !== requestVersion) return false;
      setOptions(select, items, placeholder);
      return true;
    } catch (error) {
      if (select.__regionRequestVersion === requestVersion) {
        select.innerHTML = '<option value="">' + escapeHtml(placeholder) + '</option>';
        select.disabled = true;
      }
      throw error;
    }
  }

  function handlePickerError(error) {
    var api = getApi();

    if (!redirectUnauthorized(api, error)) showMessage(error.message || '地区加载失败');
  }

  function bindPickerEvents(picker, province, city, district) {
    if (picker.__regionEventsBound) return;
    picker.__regionEventsBound = true;

    province.addEventListener('change', function () {
      resetSelect(city, '请选择市');
      resetSelect(district, '请选择区县');
      updateTargetCode(picker);
      if (!province.value) return;

      loadChildrenInto(city, province.value, '请选择市').catch(handlePickerError);
    });

    city.addEventListener('change', function () {
      resetSelect(district, '请选择区县');
      updateTargetCode(picker);
      if (!city.value) return;

      loadChildrenInto(district, city.value, '请选择区县').catch(handlePickerError);
    });

    district.addEventListener('change', function () {
      updateTargetCode(picker);
    });
  }

  function initPicker(picker) {
    var province = query('[data-region-level="province"]', picker);
    var city = query('[data-region-level="city"]', picker);
    var district = query('[data-region-level="district"]', picker);

    if (!picker || !province || !city || !district) return Promise.resolve();
    if (picker.__regionInitPromise) return picker.__regionInitPromise;

    resetSelect(city, '请选择市');
    resetSelect(district, '请选择区县');
    bindPickerEvents(picker, province, city, district);
    picker.__regionInitPromise = loadChildrenInto(province, '0', '请选择省').catch(function (error) {
      picker.__regionInitPromise = null;
      throw error;
    });

    return picker.__regionInitPromise;
  }

  async function applyRegionSelection(picker, selection) {
    var province = query('[data-region-level="province"]', picker);
    var city = query('[data-region-level="city"]', picker);
    var district = query('[data-region-level="district"]', picker);
    var values = selection || {};

    await initPicker(picker);

    if (!values.provinceCode) {
      province.value = '';
      resetSelect(city, '请选择市');
      resetSelect(district, '请选择区县');
      updateTargetCode(picker);
      return;
    }

    province.value = values.provinceCode;
    resetSelect(city, '请选择市');
    resetSelect(district, '请选择区县');

    if (values.cityCode) {
      await loadChildrenInto(city, values.provinceCode, '请选择市');
      city.value = values.cityCode;
    }

    if (values.districtCode && values.cityCode) {
      await loadChildrenInto(district, values.cityCode, '请选择区县');
      district.value = values.districtCode;
    }

    updateTargetCode(picker);
  }

  function applyProfileRegionSelection(selection) {
    return Promise.all(queryAll('[data-region-picker]').map(function (picker) {
      return applyRegionSelection(picker, selection);
    }));
  }

  function renderSearchResults(container, items) {
    var list = normalizeList(items);

    if (!container) return;
    container.innerHTML = list.length ? list.map(function (item) {
      var code = getRegionCode(item);
      var name = getRegionName(item);

      return '<button class="btn ghost magnetic" type="button" data-region-search-result="' + escapeHtml(code) + '">' + escapeHtml(name) + ' ' + escapeHtml(code) + '</button>';
    }).join('') : '<p class="api-empty">未找到匹配地区</p>';
  }

  async function submitRegionSearch(form) {
    var api = getApi();
    var values = getFormValues(form);
    var results = query('[data-region-search-results]', form.parentNode);
    var pathText = query('[data-region-search-path]', form.parentNode);

    if (redirectUnauthorized(api)) return;
    if (!values.regionKeyword || !values.regionKeyword.trim()) {
      showMessage('请输入地区名称或编码');
      return;
    }

    if (pathText) pathText.textContent = '搜索中...';
    try {
      renderSearchResults(results, await api.regionSearch({
        keyword: values.regionKeyword.trim(),
        limit: 20
      }));
      if (pathText) pathText.textContent = '请选择一个地区';
    } catch (error) {
      if (redirectUnauthorized(api, error)) return;
      if (pathText) pathText.textContent = error.message || '地区搜索失败';
      showMessage(error.message || '地区搜索失败');
    }
  }

  async function selectSearchResult(button) {
    var api = getApi();
    var code = button.getAttribute('data-region-search-result');
    var section = button.closest('.module-panel');
    var picker = section && query('[data-region-picker]', section);
    var pathText = section && query('[data-region-search-path]', section);
    var detail;
    var path;

    if (!code || !picker || redirectUnauthorized(api)) return;

    if (pathText) pathText.textContent = '正在定位地区...';
    try {
      detail = await api.regionDetail(code);
      path = await api.regionPath(getRegionCode(detail) || code);
      await applyRegionSelection(picker, buildRegionSelection(path));
      if (pathText) pathText.textContent = buildPathText(path);
    } catch (error) {
      if (redirectUnauthorized(api, error)) return;
      if (pathText) pathText.textContent = error.message || '地区定位失败';
      showMessage(error.message || '地区定位失败');
    }
  }

  function bindSearchForms() {
    queryAll('[data-region-search-form]').forEach(function (form) {
      form.addEventListener('submit', function (event) {
        event.preventDefault();
        submitRegionSearch(form);
      });
    });

    documentRef.addEventListener('click', function (event) {
      var button = event.target.closest('[data-region-search-result]');

      if (!button) return;
      event.preventDefault();
      selectSearchResult(button);
    });
  }

  function init() {
    var api;

    if (!documentRef) return;
    if (!queryAll('[data-region-picker]').length && !queryAll('[data-region-search-form]').length) return;
    api = getApi();
    if (redirectUnauthorized(api)) return;

    queryAll('[data-region-picker]').forEach(function (picker) {
      initPicker(picker).catch(handlePickerError);
    });
    bindSearchForms();
  }

  return {
    normalizeList: normalizeList,
    getRegionCode: getRegionCode,
    getRegionName: getRegionName,
    getRegionLevel: getRegionLevel,
    buildRegionOption: buildRegionOption,
    buildPathText: buildPathText,
    buildRegionSelection: buildRegionSelection,
    getFinalRegionCode: getFinalRegionCode,
    applyRegionSelection: applyRegionSelection,
    applyProfileRegionSelection: applyProfileRegionSelection,
    shouldRedirectToLogin: shouldRedirectToLogin,
    init: init
  };
});