<!--
 * @Date: 2026-05-25 17:10:00
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2026-05-25 15:27:25
 * @FilePath: /data-table/src/components/PersonPickerField/MyComponent.vue
 * @Description: 人员筛选控件内部面板
-->
<template>
  <div class="person-picker-field-inner">
    <div class="select-person-box" @click="openPopup">
      <template v-if="confirmedPersons.length">
        <div
          v-for="person in confirmedPersons"
          :key="person.id"
          :class="['select-person-item', { 'select-person-item--blacklist': isPersonBlacklisted(person) }]"
        >
          <van-icon name="contact-o" />&nbsp;
          <div class="person-display-text">
            <span>{{ formatPersonTitle(person) }}</span>
            <span v-if="isPersonBlacklisted(person)" class="blacklist-badge">黑名单</span>
          </div>
        </div>
      </template>
      <div v-else class="select-person-placeholder">
        {{ props.component_props.readonly ? '暂无已选人员' : '点击搜索人员' }}
      </div>
    </div>

    <van-popup
      v-model:show="showPopup"
      position="bottom"
      :close-on-click-overlay="false"
      :style="{ height: '90vh' }"
    >
      <div class="search-bar">
        <div class="search-input-row">
          <van-field
            ref="searchInputRef"
            v-model="searchKeyword"
            class="search-input-field"
            placeholder="请输入姓名、法名、手机号或证件号"
            :border="false"
            @keyup.enter="onSearch"
          >
            <template #button>
              <div class="search-bar-actions">
                <van-button size="small" type="primary" :loading="searching" @click="onSearch">搜索</van-button>
                <van-button size="small" plain type="default" @click="onClearSearch">清空</van-button>
              </div>
            </template>
          </van-field>
        </div>
        <div v-if="typeFilterOptions.length > 1" class="type-filter-row">
          <div
            v-for="option in typeFilterOptions"
            :key="option.value || 'all'"
            :class="['type-filter-chip', { 'type-filter-chip--active': selectedTypeFilter === option.value }]"
            @click="onSelectSearchType(option)"
          >
            {{ option.text }}
          </div>
        </div>
      </div>

      <div class="selected-box" style="margin: 1rem;">
        <div v-for="person in draftPersons" :key="person.id" class="selected-item">
          <div class="selected-item__text">
            <span>{{ formatPersonTitle(person) }}</span>
            <span v-if="isPersonBlacklisted(person)" class="blacklist-badge blacklist-badge--light">黑名单</span>
          </div>
          <van-icon name="close" @click="removeDraftPerson(person)" />
        </div>
      </div>

      <div v-if="hasSearched" class="search-result-container">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          :finished-text="finishedTextStatus ? '没有更多了' : ''"
          @load="onLoad"
        >
          <van-checkbox-group v-model="searchResultChecked" @change="onSearchResultChange">
            <div v-for="person in searchResults" :key="person.id" class="search-result-item">
              <van-checkbox
                :name="person.id"
                shape="square"
                icon-size="14px"
                :checked-color="styleColor.baseColor"
              >
                <div class="search-result-item__content">
                  <div class="search-result-item__title">
                    <span>{{ person.name }}</span>
                    <span v-if="person.nickname"> / {{ person.nickname }}</span>
                    <span v-if="isPersonBlacklisted(person)" class="blacklist-badge">黑名单</span>
                  </div>
                  <div class="search-result-item__meta">
                    <span v-if="person.phone">{{ person.phone }}</span>
                    <span v-if="person.idcard">{{ person.phone ? ' / ' : '' }}{{ person.idcard }}</span>
                  </div>
                  <div class="search-result-item__type">{{ formatPersonType(person.type) }}</div>
                </div>
              </van-checkbox>
            </div>
          </van-checkbox-group>
        </van-list>

        <div v-if="emptyStatus" class="search-result-empty">暂无搜索结果</div>
      </div>

      <div class="popup-footer">
        <van-row gutter="10" style="padding: 0 10px 1rem;">
          <van-col span="12">
            <van-button block round type="default" @click="onCancelClick">取消</van-button>
          </van-col>
          <van-col span="12">
            <van-button block round type="primary" @click="onConfirmClick">确定</van-button>
          </van-col>
        </van-row>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { inject, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useCustomFieldValue } from '@vant/use';
import Cookies from 'js-cookie';
import _ from 'lodash';
import { showToast } from 'vant';
import { styleColor } from '@/constant.js';
import { searchPersonPickerAPI } from '@/api/component.js';

const props = inject('props');
const $route = useRoute();

const showPopup = ref(false);
const searching = ref(false);
const hasSearched = ref(false);
const loading = ref(false);
const finished = ref(false);
const finishedTextStatus = ref(true);
const emptyStatus = ref(false);
const searchInputRef = ref(null);
const searchKeyword = ref('');
const searchResults = ref([]);
const searchResultChecked = ref([]);
const confirmedPersons = ref([]);
const draftPersons = ref([]);
const fieldValue = ref([]);
const searchPage = ref(0);
const searchLimit = ref(Number(props.component_props.limit) || 20);
const searchTotal = ref(0);
const selectedTypeFilter = ref('');

/**
 * 将人员接口记录整理成组件内部统一结构。
 * 这里直接按后端约定字段读取，只补齐展示时会用到的空字符串。
 *
 * @param {Object} person 人员记录
 * @returns {{ id: number, name: string, nickname: string, phone: string, idcard: string, type: string, is_blacklist: boolean }}
 */
const mapPersonRecord = (person) => {
  return {
    id: Number(person.id),
    name: person.name || '',
    nickname: person.nickname || '',
    phone: person.phone || '',
    idcard: person.idcard || '',
    type: person.type || '',
    is_blacklist: normalizeBlacklistFlag(person.is_blacklist),
  };
};

/**
 * 兼容接口和历史缓存里可能出现的布尔、数字、字符串黑名单标识。
 *
 * @param {boolean|number|string} value 黑名单标识
 * @returns {boolean}
 */
const normalizeBlacklistFlag = (value) => {
  if (typeof value === 'string') {
    const normalizedValue = value.trim().toLowerCase();
    return normalizedValue === 'true' || normalizedValue === '1';
  }

  return value === true || value === 1;
};

/**
 * 组件默认值可能来自历史数据或 cookie，这里保留最小限度的字符串反序列化。
 *
 * @param {Array|String} value 已选人员列表
 * @returns {Array}
 */
const normalizeStoredPersonList = (value) => {
  const source = typeof value === 'string' ? JSON.parse(value || '[]') : (value || []);

  return source.map(mapPersonRecord);
};

/**
 * 后端现在明确返回 person_types 数组，这里只做去重和空值过滤。
 *
 * @param {string[]} personTypes 人员类型数组
 * @returns {string[]}
 */
const normalizePersonTypes = (personTypes = []) => {
  return _.uniq(personTypes
    .map((item) => String(item || '').trim())
    .filter(Boolean));
};

/**
 * 将已确认人员同步到自定义字段值，保证表单提交拿到的是最终确认结果。
 */
const syncFieldValue = () => {
  fieldValue.value = _.cloneDeep(confirmedPersons.value);
  props.value = fieldValue.value;
};

const formatPersonType = (type) => {
  return type || '人员';
};

const formatPersonTitle = (person) => {
  if (!person.nickname) {
    return `${person.name} / ${formatPersonType(person.type)}`;
  }
  return `${person.name} / ${person.nickname} / ${formatPersonType(person.type)}`;
};

const isPersonBlacklisted = (person) => {
  return Boolean(person?.is_blacklist);
};

/**
 * 当前字段允许搜索的人员类型列表，直接取后端配置。
 */
const allowedPersonTypes = computed(() => {
  return normalizePersonTypes(props.component_props.person_types);
});

/**
 * 当只允许一种人员类型时，默认锁定这个筛选值。
 */
const defaultSearchType = computed(() => {
  return allowedPersonTypes.value.length === 1 ? allowedPersonTypes.value[0] : '';
});

/**
 * 根据后端返回的 person_types 生成顶部筛选项。
 */
const typeFilterOptions = computed(() => {
  if (!allowedPersonTypes.value.length) {
    return [];
  }

  const allowedOptions = allowedPersonTypes.value.map((type) => ({
    text: type,
    value: type,
  }));

  if (allowedOptions.length === 1) {
    return allowedOptions;
  }

  return [{ text: '全部类型', value: '' }, ...allowedOptions];
});

const getSearchType = () => {
  return defaultSearchType.value || selectedTypeFilter.value || '';
};

/**
 * 将结果列表限制在字段允许的类型范围内，同时叠加当前顶部筛选值。
 *
 * @param {Array} personList 人员结果列表
 * @returns {Array}
 */
const filterPersonListByType = (personList) => {
  const searchType = getSearchType();

  return personList.filter((person) => {
    if (allowedPersonTypes.value.length && !allowedPersonTypes.value.includes(person.type)) {
      return false;
    }

    if (searchType && person.type !== searchType) {
      return false;
    }

    return true;
  });
};

/**
 * 根据当前草稿已选项回填搜索结果勾选状态，保证翻页后勾选表现一致。
 */
const syncSearchChecked = () => {
  const selectedIdSet = new Set(draftPersons.value.map((person) => person.id));
  searchResultChecked.value = searchResults.value
    .filter((person) => selectedIdSet.has(person.id))
    .map((person) => person.id);
};

/**
 * 重置搜索面板状态；打开弹层、取消和清空搜索时都会复用这套逻辑。
 */
const resetSearchState = () => {
  hasSearched.value = false;
  searching.value = false;
  loading.value = false;
  finished.value = false;
  finishedTextStatus.value = true;
  emptyStatus.value = false;
  searchKeyword.value = '';
  searchResults.value = [];
  searchResultChecked.value = [];
  searchPage.value = 0;
  searchTotal.value = 0;
};

const openPopup = async () => {
  if (props.component_props.readonly) {
    return false;
  }

  draftPersons.value = _.cloneDeep(confirmedPersons.value);
  resetSearchState();
  showPopup.value = true;
};

const onCancelClick = () => {
  showPopup.value = false;
  draftPersons.value = _.cloneDeep(confirmedPersons.value);
  resetSearchState();
};

const writeDraftCookie = () => {
  const currentValue = _.cloneDeep(fieldValue.value);
  const existingCookie = Cookies.get($route.query.code);

  if (existingCookie) {
    const obj = JSON.parse(existingCookie);
    obj[props.key] = currentValue;
    Cookies.set($route.query.code, JSON.stringify(obj), { expires: 1 });
  } else {
    Cookies.set($route.query.code, JSON.stringify({ [props.key]: currentValue }), { expires: 1 });
  }
};

const onConfirmClick = () => {
  confirmedPersons.value = _.cloneDeep(draftPersons.value);
  syncFieldValue();
  writeDraftCookie();
  showPopup.value = false;
  resetSearchState();
};

const removeDraftPerson = (person) => {
  draftPersons.value = draftPersons.value.filter((item) => item.id !== person.id);
  syncSearchChecked();
};

/**
 * 勾选变化时只处理当前搜索结果页，避免跨页已选项被误删。
 *
 * @param {number[]} checkedIds 当前结果页勾选的人员 id
 */
const onSearchResultChange = (checkedIds) => {
  const checkedIdSet = new Set(checkedIds);
  const currentSearchIdSet = new Set(searchResults.value.map((person) => person.id));

  // 先移除当前搜索页中被取消勾选的人员，避免跨页已选项被误删。
  draftPersons.value = draftPersons.value.filter((person) => {
    if (!currentSearchIdSet.has(person.id)) {
      return true;
    }
    return checkedIdSet.has(person.id);
  });

  const selectedFromCurrentSearch = searchResults.value.filter((person) => checkedIdSet.has(person.id));
  draftPersons.value = _.uniqBy([...draftPersons.value, ...selectedFromCurrentSearch], 'id');
};

const onClearSearch = () => {
  resetSearchState();
};

const onSelectSearchType = async (action) => {
  selectedTypeFilter.value = action.value;

  if (searchKeyword.value.trim() && hasSearched.value) {
    await onSearch();
  }
};

/**
 * 组装人员搜索接口参数。
 *
 * @param {number} page 页码，从 0 开始
 * @returns {{ form_code: string, field_name: string, keyword: string, page: number, limit: number, type?: string, force_back?: string }}
 */
const buildSearchParams = (page) => {
  const params = {
    form_code: $route.query.code,
    field_name: props.key,
    keyword: searchKeyword.value.trim(),
    page,
    limit: searchLimit.value,
  };

  const searchType = getSearchType();
  if (searchType) {
    params.type = searchType;
  }
  if ($route.query.force_back) {
    params.force_back = $route.query.force_back;
  }

  return params;
};

/**
 * 拉取单页搜索结果，并转换成组件内部统一结构。
 * 组件接口封装在报错时会返回 false，这里需要兜底，避免搜索面板直接抛运行时异常。
 *
 * @param {number} page 页码，从 0 开始
 * @returns {Promise<{ count: number, data: Array }>}
 */
const fetchSearchPage = async (page) => {
  const result = await searchPersonPickerAPI(buildSearchParams(page));
  if (!result || !Array.isArray(result.data)) {
    return {
      count: 0,
      data: [],
    };
  }

  const remoteResults = filterPersonListByType(result.data.map(mapPersonRecord));

  return {
    count: Number(result.count) || remoteResults.length,
    data: remoteResults,
  };
};

/**
 * 合并分页结果并去重，避免上拉加载时重复插入同一人员。
 *
 * @param {Array} data 当前页结果
 */
const mergeSearchResults = (data) => {
  searchResults.value = _.uniqBy([...searchResults.value, ...data], 'id');
  emptyStatus.value = Object.is(searchResults.value.length, 0);
  finishedTextStatus.value = !emptyStatus.value;
  syncSearchChecked();
};

/**
 * 根据接口总数和当前页结果更新无限滚动结束状态。
 *
 * @param {Array} pageData 当前页结果
 * @param {number} total 接口返回总数
 */
const updateFinishedStatus = (pageData, total) => {
  searchTotal.value = total;

  if (!pageData.length) {
    finished.value = true;
    return;
  }

  if (searchResults.value.length >= total) {
    finished.value = true;
    return;
  }

  if (pageData.length < searchLimit.value) {
    finished.value = true;
  }
};

/**
 * 执行一次新的搜索，并重置分页状态。
 */
const onSearch = async () => {
  const keyword = searchKeyword.value.trim();
  if (!keyword) {
    showToast('请输入搜索关键词');
    return;
  }

  searching.value = true;
  hasSearched.value = true;
  loading.value = true;
  finished.value = false;
  finishedTextStatus.value = true;
  emptyStatus.value = false;
  searchResults.value = [];
  searchResultChecked.value = [];
  searchPage.value = 0;
  searchTotal.value = 0;

  try {
    const firstPageResult = await fetchSearchPage(0);
    mergeSearchResults(firstPageResult.data);
    updateFinishedStatus(firstPageResult.data, firstPageResult.count);
  } finally {
    loading.value = false;
    searching.value = false;
  }
};

/**
 * 加载下一页搜索结果。
 */
const onLoad = async () => {
  if (!hasSearched.value || finished.value) {
    loading.value = false;
    return;
  }

  const nextPage = searchPage.value + 1;

  try {
    const nextPageResult = await fetchSearchPage(nextPage);
    mergeSearchResults(nextPageResult.data);
    updateFinishedStatus(nextPageResult.data, nextPageResult.count);
    searchPage.value = nextPage;
  } finally {
    loading.value = false;
  }
};

useCustomFieldValue(() => fieldValue.value);

onMounted(() => {
  confirmedPersons.value = normalizeStoredPersonList(props.component_props.default);
  draftPersons.value = _.cloneDeep(confirmedPersons.value);
  selectedTypeFilter.value = defaultSearchType.value || '';
  syncFieldValue();
});
</script>

<style lang="less" scoped>
.person-picker-field-inner {
  width: 100%;
}

.select-person-box,
.selected-box {
  min-height: 4rem;
  border: 1px dashed #dfdfdf;
  margin: 1rem 0;
  overflow: auto;
  border-radius: 5px;
  padding: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.select-person-item,
.selected-item {
  margin-right: 5px;
  margin-bottom: 5px;
  font-size: 0.85rem;
  padding: 5px 8px;
  background-color: #c2915f;
  color: #fff;
  min-height: 1.2rem;
  display: flex;
  align-items: center;
  border-radius: 4px;
}

.selected-item {
  max-width: 100%;
}

.selected-item__text {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-right: 0.25rem;
}

.select-person-item--blacklist {
  background-color: #a46943;
}

.person-display-text {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.select-person-placeholder {
  color: #999;
  font-size: 0.9rem;
  line-height: 1.8rem;
}

.search-bar {
  margin: 1rem 0;
  padding: 0;
}

.search-input-row {
  display: flex;
  align-items: center;
}

.search-input-field {
  width: 100%;
}

.search-bar-actions {
  display: flex;
  gap: 0.5rem;
}

.type-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
  padding-left: 0.75rem;
}

.type-filter-chip {
  padding: 0.15rem 0.1rem;
  color: #888;
  font-size: 0.82rem;
  line-height: 1.2rem;
}

.type-filter-chip--active {
  color: #c2915f;
  font-weight: 600;
}

.search-result-container {
  height: calc(90vh - 17rem);
  overflow: auto;
  padding: 0 1rem 6rem;
}

.search-result-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.search-result-item__content {
  padding-left: 0.5rem;
  white-space: normal;
}

.search-result-item__title {
  font-size: 0.9rem;
  color: #333;
  line-height: 1.4;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.search-result-item__meta {
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: #888;
  word-break: break-all;
}

.search-result-item__type {
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: #c2915f;
}

.search-result-empty {
  padding: 1rem 0;
  text-align: center;
  color: #999;
  font-size: 0.9rem;
}

.blacklist-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.35rem;
  border-radius: 999px;
  font-size: 0.7rem;
  line-height: 1.35rem;
  color: #fff;
  background-color: #d84d4d;
}

.blacklist-badge--light {
  background-color: rgba(216, 77, 77, 0.16);
  color: #d84d4d;
}

.popup-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
}

:deep(.van-field__body) {
  border: var(--border-style);
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
}
</style>