<!--
 * @Date: 2024-01-16 13:33:36
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-01-29 15:54:38
 * @FilePath: /xysBooking/src/views/me.vue
 * @Description: 我的页面
-->
<template>
  <div class="me-page">
    <div class="me-content">
      <div class="title">
        <div class="text">参观者信息</div>
      </div>
      <div @click="() => { go('/addVisitor') }" 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" class="visitor-item">
          <div>
            <p style="color: #A67939;">{{ item.name }}</p>
            <p>证件号：{{ formatId(item.id_number) }}</p>
          </div>
          <div @click="removeItem(item)" style="margin-left: 1rem;">
            <van-icon name="https://cdn.ipadbiz.cn/xys/booking/%E5%88%A0%E9%99%A4@2x.png" />
          </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>
    <div style="height: 8rem;"></div>
    <!-- <div class="index-nav">
      <div class="nav-logo" @click="toHome">
        <van-icon size="1.5rem" :name="icon_3" color="#A67939" />
        首页
      </div>
      <div class="nav-logo" @click="toCode">
        <van-icon size="5rem" :name="icon_4" color="#A67939" style="position: absolute; top: -4rem;" />
        <van-icon size="1.5rem" name="wap-home" color="#FFF" style="opacity: 0;" />
        预约码
      </div>
      <div class="nav-logo">
        <van-icon size="1.5rem" :name="icon_5" color="#A67939" />
        我的
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useGo } from '@/hooks/useGo'
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 { showConfirmDialog } from 'vant';
import { showSuccessToast, showFailToast } from 'vant';
import { personListAPI, delPersonAPI } from '@/api/index'
import icon_1 from '@/assets/images/立即预约@2x.png'
import icon_2 from '@/assets/images/预约记录@2x.png'
import icon_3 from '@/assets/images/首页01@2x.png'
import icon_4 from '@/assets/images/二维码icon.png'
import icon_5 from '@/assets/images/我的02@2x.png'
const go = useGo();
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

const toCode = () => { // 跳转到预约码
  // go('/bookingCode');
  window.location.replace(location.origin + location.pathname + '#/bookingCode');
}
const toHome = () => { // 跳转到首页
  // go('/');
  window.location.replace(location.origin + location.pathname + '#/');
}

const visitorList = ref([]);

/**
 * 生成15位身份证号中间8位替换为*号
 * @param {*} inputString
 */
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;
}

const formatId = (id) => {
  return replaceMiddleCharacters(id);
};

const removeItem = (item) => {
  showConfirmDialog({
    title: '温馨提示',
    message: '是否确认删除参观者信息？',
    confirmButtonColor: '#A67939',
    width: '80vw'
  })
  .then(async () => {
    // on confirm
    const { code, data } = await delPersonAPI({ person_id: item.id });
    if (code) {
      showSuccessToast('删除成功');
      visitorList.value = visitorList.value.filter((v) => v.id !== item.id);
    }
    })
    .catch(() => {
      // on cancel
    });
}

onMounted(async () => {
  const { code, data } = await personListAPI();
  if (code) {
    visitorList.value = data;
  }
})
</script>

<style lang="less" scoped>
.me-page {
  position: relative;
  height: 100vh;
  .me-content {

  margin: 0 1rem;
    .title {
      padding: 0.5rem 0.75rem;
      padding-top: 1rem;
      padding-left: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .text {
        &::before {
          content: '';
          border: 2px solid #A67939;
          margin-right: 0.5rem;
        }
      }
      .day {
        background-color: #FFFBF3;
        border-radius: 7px;
        border: 1px solid #A67939;
        padding: 0.2rem 0.5rem;
        color: #A67939;
      }
    }
    .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;
        justify-content: space-between;
      }
    }
    .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;
      }
    }
  }

  .index-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 10vh;
    background: #FFFFFF;
    box-shadow: 0rem -0.33rem 0.25rem 0rem rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #A67939;
    .nav-logo {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}
</style>