<template>
  <div class="result-page">
    <div class="app-time">
      预约时间
      <div @click="cancelApp" class="cancel-button"> 取消预约</div>
    </div>
    <div class="app-time-show">
      {{ appTimeShow }}
    </div>
    <div class="app-name">
      预约人&nbsp;<span>共 {{ app_info_list.length }} 人</span></div>
    <div class="item-list">
      <div @click="toggleItem(item)" v-for="(item, index) in app_info_list" :key="index"
        :class="['item', item.checked ? 'select' : '']">
        {{ item.name }}
      </div>
    </div>
    <div class="qr-wrapper">
      <p class="name">{{ app_info_list[checkedIndex]?.name }}</p>
      <van-row justify="center" align="center" style="position: relative;">
        <div class="handle-left" @click="handleLeft">
          <van-icon size="4rem" :name="handleLeftIcon" />
        </div>
        <van-col span="3">
          &nbsp;
        </van-col>
        <van-col span="18" style="text-align: center;">
          <div class="qr-box">
            <van-icon size="13rem" :name="app_info_list[checkedIndex]?.qr_code" style="border: 1px dashed #93663D; width: 100%; overflow: hidden;" />
          </div>
        </van-col>
        <van-col span="3">
          &nbsp;
        </van-col>
        <div class="handle-right" @click="handleRight">
          <van-icon size="4rem" :name="handleRightIcon" />
        </div>
      </van-row>
    </div>
  </div>

  <van-dialog v-model:show="show" title="温馨提示" @confirm="onConfirm" show-cancel-button confirm-button-color="#93663D">
    <div style="text-align: center; padding: 1rem;">是否取消该预约？</div>
  </van-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showConfirmDialog } from 'vant';
import { showSuccessToast, showFailToast } from 'vant';
import { orderInfoAPI, orderCancelAPI } from '@/api/index'
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 store = mainStore();
onMounted(async () => {
  const { data } = await orderInfoAPI({ id: $route.query.id });
  if (data) {
    // 预约日期集合
    app_time.value = data.dates;
    //
    data.details.forEach((item, index) => {
      app_info_list.value.push({
        name: item.name,
        checked: index ? false : true,
        qr_code: 'http://oa.onwall.cn/admin?m=srv&a=get_qrcode&key=' + item.qrcode_content,
      });
    });
  }
  // TAG: 清除用户填写信息
  store.changeUserInfo([]);
})

const app_time = ref([]);
const appTimeShow = computed(() => {
  return app_time.value.join('，')
});

const handleLeftIcon = computed(() => {
  return checkedIndex.value === 0 ? 'https://cdn.ipadbiz.cn/bieyuan/left002@2x.png' : 'https://cdn.ipadbiz.cn/bieyuan/left001@2x.png'
});
const handleRightIcon = computed(() => {
  return app_info_list.value.length - 1 === checkedIndex.value ? 'https://cdn.ipadbiz.cn/bieyuan/right002@2x.png' : 'https://cdn.ipadbiz.cn/bieyuan/right001@2x.png'
});

const app_info_list = ref([]);

const checkedIndex = ref(0);

const toggleItem = (item) => {
  app_info_list.value.forEach((info) => {
    info.checked = false;
  });
  item.checked = true;
  // 选中值的索引值
  checkedIndex.value = app_info_list.value.findIndex((item) => item.checked);
}

const show = ref(false);
const cancelApp = () => {
  show.value = true;
}
const onConfirm = async () => {
  const { code } = await orderCancelAPI({ id: $route.query.id });
  if (code) {
    showSuccessToast('取消成功！');
    $router.push('/');
    // 取消预约成功 清理预约信息列表缓存
    store.changeUserInfo([]);
  }
}

const handleLeft = () => { // 左侧滚动
  if (checkedIndex.value > 0) {
    app_info_list.value.forEach((info) => {
      info.checked = false;
    });
    app_info_list.value[checkedIndex.value - 1]['checked'] = true;
    checkedIndex.value = checkedIndex.value - 1;
  }
}
const handleRight = () => { // 右侧滚动
  //
  if (checkedIndex.value < app_info_list.value.length - 1) {
    app_info_list.value.forEach((info) => {
      info.checked = false;
    });
    app_info_list.value[checkedIndex.value + 1]['checked'] = true;
    checkedIndex.value = checkedIndex.value + 1;
  }
}

</script>

<style lang="less" scoped>
.result-page {
  padding: 1rem 1rem 0;

  .app-time {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #D7D7D7;
    font-weight: bold;
    font-size: 1.05rem;
    height: 2.5rem;

    .cancel-button {
      border: 1px solid #976C46;
      border-radius: 5px;
      padding: 0.25rem 1rem;
      float: right;
      color: #976C46;
      font-size: 0.85rem;
    }
  }

  .app-time-show {
    padding: 1rem 0;
    color: #976C46;
    border-bottom: 1px solid #D7D7D7;
  }

  .app-name {
    line-height: 3.5rem;
    font-weight: bold;
    font-size: 1.05rem;
    border-bottom: 1px solid #D7D7D7;

    span {
      color: #949291;
      font-size: 0.85rem;
      font-weight: normal;
    }
  }

  .item-list {
    margin: 1rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    .item {
      padding: 0.5rem 1rem;
      border-radius: 5px;
      border: 1px solid #93663D;
      color: #93663D;
    }

    .select {
      background-color: #93663D;
      color: white;
    }
  }

  .qr-wrapper {
    text-align: center;

    .name {
      font-size: 2rem;
      color: #93663D;
      margin: 2rem 0 1rem;
    }

    .handle-left {
      position: absolute;
      left: -1.5rem;
      top: calc(50% - 2rem);
    }

    .qr-box {
      margin: 0 auto;
      border: 1px solid #93663D;
      width: auto;
      height: auto;
      border-radius: 10px;
      padding: 1rem;
    }

    .handle-right {
      position: absolute;
      right: -1.5rem;
      top: calc(50% - 2rem);
    }
  }

  :deep(.van-icon__image) {
    margin: 0 auto;
  }
}

// .van-button--default {
//   background: #93663D;
// }
</style>