<!--
 * @Date: 2024-01-15 16:25:51
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2026-01-22 12:18:08
 * @FilePath: /git/xysBooking/src/views/submit.vue
 * @Description: 预约人员信息
-->
<template>
  <div class="submit-page">
    <div @click="goToBooking" class="visit-time">
      <div>参访时间</div>
      <div><span style="font-size: 0.95rem;">{{ date }} {{ time }}</span>&nbsp;<van-icon name="arrow" /></div>
    </div>
    <div @click="goToVisitor" class="add-visitors">
      <div><van-icon name="plus" /> 添加参观者</div>
    </div>
    <div v-if="visitorList.length" class="visitors-list">
      <div v-for="(item, index) in visitorList" :key="index" @click="addVisitor(item)" class="visitor-item">
        <div style="margin-right: 1rem;">
          <van-icon v-if="!checked_visitors.includes(item.id)" :name="icon_check1" style="margin-right: 0.25rem;" />
          <van-icon v-else :name="icon_check2" style="margin-right: 0.25rem;" />
        </div>
        <div>
          <p style="color: #A67939;">{{ item.name }}</p>
          <p>证件号：{{ formatId(item.id_number) }}</p>
          <p v-if="item.is_reserve === RESERVE_STATUS.ENABLE" style="color: #9C9A9A; font-size: 0.8rem;">*已预约过{{ date }}参观，请不要重复预约</p>
        </div>
      </div>
    </div>
    <div v-else class="no-visitors-list">
      <img src="https://cdn.ipadbiz.cn/xys/booking/%E6%9A%82%E6%97%A0@2x.png" style="width: 10rem;">
      <div class="no-visitors-list-title">您还没有添加过参观者</div>
    </div>
    <div style="height: 5rem;"></div>
    <div class="submit-wrapper">
      <div class="control-wrapper">
        <div class="left">
          <div style="margin-left: 1rem; display: flex;align-items: center;">
            订单金额&nbsp;&nbsp;<div style="color: #FF1919;display: inline-block;">¥<div style="font-size: 1.5rem;display: inline-block;">&nbsp;{{ total }}</div></div>
          </div>
        </div>
        <div @click="submitBtn" class="right">提交订单</div>
      </div>
      <div style="font-size: 0.85rem;margin-left: 1rem;color: #FF1919; margin-bottom: 1rem;">提交后请在10分钟内完成支付</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Cookies, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
import { useGo } from '@/hooks/useGo'
import { showSuccessToast, showFailToast, showToast } from 'vant';
import icon_check1 from '@/assets/images/多选01@2x.png'
import icon_check2 from '@/assets/images/多选02@2x.png'
import { personListAPI, addReserveAPI, payPrepareAPI, payCallbackAPI } from '@/api/index'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

const go = useGo();

const visitorList = ref([]);

/**
 * 生成脱敏后的证件号
 * - 仅对长度 >= 15 的字符串进行处理中间 8 位替换
 * @param {string} inputString 证件号
 * @returns {string} 脱敏后的证件号
 */
function replaceMiddleCharacters(inputString) {
  if (inputString.length < 15) {
    return inputString; // 字符串长度不足，不进行替换
  }

  const start = Math.floor((inputString.length - 8) / 2); // 开始替换的索引位置
  const end = start + 8; // 结束替换的索引位置

  const replacement = '*'.repeat(8); // 生成包含8个*号的字符串

  const replacedString = inputString.substring(0, start) + replacement + inputString.substring(end);
  return replacedString;
}

/**
 * 格式化证件号显示（脱敏）
 * @param {string} id 证件号
 * @returns {string} 脱敏后的证件号
 */
const formatId = (id) => {
  return replaceMiddleCharacters(id);
};

const RESERVE_STATUS = {
  ENABLE: '1'
}

const checked_visitors = ref([]);
/**
 * 勾选/取消勾选参观者
 * - 已预约的参观者不允许再次勾选
 * @param {any} item 参观者信息
 * @returns {void}
 */
const addVisitor = (item) => {
  if (item.is_reserve === RESERVE_STATUS.ENABLE) { // 今天已经预约
    showToast('已预约过参观，请不要重复预约')
    return;
  }
  if (checked_visitors.value.includes(item.id)) {
    checked_visitors.value = checked_visitors.value.filter((v) => v !== item.id);
  } else {
    checked_visitors.value.push(item.id);
  }
}

const date = $route.query.date;
const time = $route.query.time;
const price = $route.query.price;
const period_type = $route.query.period_type;

const total = computed(() => {
  return price * checked_visitors.value.length;
})

/**
 * 返回预约时段选择页
 * @returns {void}
 */
const goToBooking = () => {
  go('/booking');
}
/**
 * 跳转到参观者管理页
 * @returns {void}
 */
const goToVisitor = () => {
  go('/addVisitor');
}

/**
 * 提交订单并跳转支付
 * - 免费订单直接进入成功页
 * - 需要支付则跳转到工行支付页面
 * @returns {Promise<void>}
 */
const submitBtn = async () => {
  if (!checked_visitors.value.length) {
    showToast('请先添加参观者')
  } else {
    // TAG: 提交订单跳转到支付页面
    const { code, data } = await addReserveAPI({ reserve_date: date, begin_time: time.split('-')[0], end_time: time.split('-')[1], person_id_list: JSON.stringify(checked_visitors.value), period_type });
    if (code) {
      const pay_id = data?.pay_id
      const need_pay = data?.need_pay

      const is_free_order = Number(total.value) <= 0 || Number(need_pay) === 0 || need_pay === false
      if (is_free_order) {
        go('/success', { pay_id })
        return
      }

      const pay_url = `/srv/?f=reserve&a=icbc_pay&pay_id=${pay_id}`;
      location.href = pay_url; // 跳转支付页面
    }
  }
}

onMounted(async () => {
  // 初始化参观者列表，并标记“是否已预约”
  const { code, data } = await personListAPI({ reserve_date: date, begin_time: time.split('-')[0], end_time: time.split('-')[1], period_type });
  if (code) {
    visitorList.value = data;
  }
});
</script>

<style lang="less" scoped>
.submit-page {
  margin: 1rem;
  position: relative;
  .visit-time {
    background-color: #FFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    border-radius: 8px;
  }
  .add-visitors {
    border: 1px dashed #A67939;
    color: #A67939;
    border-radius: 5px;
    text-align: center;
    padding: .65rem 0;
    margin: 1rem 0;
    font-size: 1.15rem;
  }
  .visitors-list {
    .visitor-item {
      background-color: #FFF;
      border-radius: 8px;
      padding: 1rem;
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
    }
  }
  .no-visitors-list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    img {
      margin-top: 1rem;
      margin-bottom: 1rem;
      width: 10rem;
    }
    .no-visitors-list-title {
      color: #A67939;
      font-size: 1.05rem;
    }
  }
  .submit-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    display: flex;
    background-color: #FFF;
    // padding: 1rem;
    justify-content: space-between;
    flex-direction: column;
    .control-wrapper {
      display: flex;
      justify-content: space-between;
    }
    .left {
      display: flex;
      justify-content: center;
      align-items: left;
      flex-wrap: nowrap;
    }
    .right {
      background-color: #A67939;
      color: #FFF;
      margin: 1rem;
      padding: 0.8rem 3rem;
      border-radius: 5px;
      font-size: 1.1rem;
      margin-bottom: 0;
    }
  }
}
</style>