<!--
 * @Date: 2024-01-16 10:06:47
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-01-18 14:25:17
 * @FilePath: /xysBooking/src/components/qrCode.vue
 * @Description: 文件描述
-->
<template>
  <div class="qr-code-page">
    <div v-if="has_qrcode" class="show-qrcode">
      <div class="qrcode-content">
        <div v-if="props.status" class="user-status">
          <div :class="[formatStatus(props.status).key, 'status']">{{ formatStatus(props.status).value }}</div>
        </div>
        <div class="user-info">{{ userinfo.name }}&nbsp;{{ userinfo.id }}</div>
        <div class="user-qrcode">
          <div class="left" @click="prevCode">
            <img src="https://cdn.ipadbiz.cn/xys/booking/%E5%B7%A6@2x.png">
          </div>
          <div class="center">
            <img src="https://cdn.ipadbiz.cn/xys/booking/WechatIMG576.jpg">
            <div v-if="useStatus === '1'" class="qrcode-used"><p>二维码已使用</p></div>
          </div>
          <div class="right" @click="nextCode">
            <img src="https://cdn.ipadbiz.cn/xys/booking/%E5%8F%B3@2x.png">
          </div>
        </div>
        <div class="refresh" @click="refreshBtn">
          <img src="https://cdn.ipadbiz.cn/xys/booking/%E5%88%B7%E6%96%B0@2x.png">&nbsp;<div>刷新</div>
        </div>
      </div>
      <div class="user-list">
        <div
          @click="selectUser(index)"
          v-for="(item, index) in userList"
          :key="index"
          :class="['user-item', select_index === index ? 'checked' : '']">
          {{ item.username }}
        </div>
      </div>
    </div>
    <div v-else class="no-qrcode">
      <img src="https://cdn.ipadbiz.cn/xys/booking/%E6%9A%82%E6%97%A0@2x.png" style="width: 10rem;">
      <div class="no-qrcode-title">您还没有预约过参观</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'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

const props = defineProps({
  status: {
    type: String,
    default: ''
  }
});

const id_number = ref('511522190103214279');

const has_qrcode = ref(true);

const select_index = ref(0);
const userList = ref([{
  id: '1',
  username: '张雨燕',
  id_code: '511522190103214279',
  qrcode: 'https://cdn.ipadbiz.cn/xys/booking/WechatIMG576.jpg',
  status: '0'
}, {
  id: '2',
  username: '李仁和',
  id_code: '311522190103214279',
  qrcode: 'https://cdn.ipadbiz.cn/xys/booking/WechatIMG576.jpg',
  status: '1'
}, {
  id: '3',
  username: '王二虎',
  id_code: '411522190103214279',
  qrcode: 'https://cdn.ipadbiz.cn/xys/booking/WechatIMG576.jpg',
  status: '0'
}, {
  id: '4',
  username: '张雨燕2',
  id_code: '611522190103214279',
  qrcode: 'https://cdn.ipadbiz.cn/xys/booking/WechatIMG576.jpg',
  status: '1'
}, {
  id: '5',
  username: '张雨燕3',
  id_code: '211522190103214279',
  qrcode: 'https://cdn.ipadbiz.cn/xys/booking/WechatIMG576.jpg',
  status: '0'
}]);

const prevCode = () => {
  select_index.value = select_index.value - 1;
  if (select_index.value < 0) {
    select_index.value = userList.value.length - 1;
  }
};
const nextCode = () => {
  select_index.value = select_index.value + 1;
  if (select_index.value > userList.value.length - 1) {
    select_index.value = 0;
  }
};

/**
 * 生成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 userinfo = computed(() => {
  return {
    name: userList.value[select_index.value]['username'],
    id: formatId(userList.value[select_index.value]['id_code'])
  };
});

const useStatus = computed(() => {
  return userList.value[select_index.value]['status'];
});

const refreshBtn = () => {
  console.warn('refreshBtn');
}

const formatStatus = (status) => {
  switch (status) {
    case 'success':
      return {
        key: 'success',
        value: '预约成功'
      }
    case 'cancel':
      return {
        key: 'cancel',
        value: '已取消'
      }
    case 'used':
      return {
        key: 'used',
        value: '已使用'
      }
  }
}

const selectUser = (index) => {
  select_index.value = index;
}

// TODO: 轮询查二维码的使用

// const count = ref(0);

// // 定义轮询函数
// const poll = () => {
//   // 每秒增加计数值
//   count.value++;
//   console.log(count.value);
// };
// // 在组件挂载时启动轮询
// onMounted(() => {
//   // 每秒执行一次轮询函数
//   const intervalId = setInterval(poll, 1000);

//   // 在组件卸载时清除定时器
//   onUnmounted(() => {
//     clearInterval(intervalId);
//   });
// });
</script>

<style lang="less" scoped>
.qr-code-page {
  .qrcode-content {
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // width: 100%;
    // height: 100%;
    background-color: #FFF;
    border-radius: 8px;
    box-shadow: 0rem 0rem 0.92rem 0rem rgba(106,106,106,0.27);
    .user-status {
      .status {
        font-size: 0.75rem;
        padding: 5px 8px;
        border-radius: 5px;
      }
      .success {
        color: #A67939;
        background-color: #FBEEDC;
      }
      .cancel {
        color: #929292;
        background-color: #E6E6E6;
      }
      .used {
        color: #477F3D;
        background-color: #E5EFE3;
      }
    }
    .user-info {
      color: #A6A6A6;
      font-size: 1.15rem;
      margin-top: 0.5rem;
      margin-bottom: 1rem;
    }
    .user-qrcode {
      display: flex;
      align-items: center;
      .left {
        img {
          width: 1.75rem; margin-right: 0.5rem;
        }
      }
      .center {
        border: 1px solid #D1D1D1;
        border-radius: 20px;
        padding: 0.5rem;
        position: relative;
        img {
          width: 15rem;
        }
        div {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: rgba(106,106,106,0.6);
          // opacity: 0.49;
          border-radius: 20px;
          color: #FFF;
          text-align: center;
          p {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.2rem;
          }
        }
      }
      .right {
        img {
          width: 1.75rem;
          margin-left: 0.5rem;
        }
      }
    }
    .refresh {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 1rem;
      img {
        width: 3.5rem;
      }
      div {
        color: #A67939; font-size: 1.1rem;
      }
    }
  }
  .user-list {
    display: flex;
    padding: 1rem;
    align-items: center;
    flex-wrap: wrap;
    .user-item {
      padding: 0.25rem 0.5rem;
      border: 1px solid #A67939;
      margin: 0.25rem;
      border-radius: 5px;
      color: #A67939;
      &.checked {
        color: #FFF;
        background-color: #A67939;
      }
    }
  }

  .no-qrcode {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    img {
      margin-top: 1rem;
      margin-bottom: 1rem;
      width: 10rem;
    }
    .no-qrcode-title {
      color: #A67939;
      font-size: 1.05rem;
    }
  }
}
</style>