<script setup lang='ts'>
import { sceneBookingApi } from '@/api/api/sceneBooking';
import { useStore } from '@/stores';
import { checkLoginStatus } from '@/utils/weixin'

// import { json } from 'stream/consumers';
// import BookingTime from './BookingTime.vue'

const bookedList = ref([] as any)

const router = useRouter()
const store = useStore()
// 立即预约-时段选择
const goSelectTime = () => {
  router.push({
    name: 'selectTime'
  })
}

const goBookedDetail = (id: number) => {
  router.push({
    name: 'bookedDetail',
    params: {
      id
    }
  })
}


// 用户授权成功
const loginOnNeed = async() => {
  const query = new URLSearchParams(location.search)
  const code = query.get('code')
  if (code) {
    let res: any = await sceneBookingApi.getCodeAPI(code);
    if (res.code === 0) {
      localStorage.setItem("token", res.data.token);
      localStorage.setItem(
        "userInfo",
        JSON.stringify({ ...res.data.wxUser, time: Date.now() })
      );
    } else {
      console.error('登录结果异常！');
    }
    location.href = window.location.href
  }
}

const searchParames = ref({
  pageNum: 1,
  pageSize: 9999,
  searchKey: ''
} as {
  pageNum: number,
  pageSize: number,
  searchKey: string
})

const getList = async() => {
  const res:any = await sceneBookingApi.getBookingListAPi(searchParames)
  if(res.code === 0) {
    bookedList.value = res.data.records
  }
}

onMounted(() => {
  // 清除之前的预约选择记录
  store.selectDate = ''
  store.selectTime = ''

  loginOnNeed()

  const loginStatus = checkLoginStatus()
  if (loginStatus) {
    // 处理我的预约数据
    getList()
    
  } else {
    // 发起我的授权
    // getUserCode(`${baseIMGUrl.replace(/^api/, '')}booking`)
  }


  // bookedList.value = [
  //   {
  //     bookDate: '2024-04-16',
  //     bookId: '1',
  //     createTime: '2024-04-16 16:46:00',
  //     creatorId: null,
  //     creatorName: '',
  //     id: 1,
  //     name: '小明',
  //     pcs: 2,
  //     phone: '',
  //     rtf: JSON.parse('[{"bookDate":"2024-02-01","name":"小明","num":"1111111","time":"9:00-1:00","type":"身份证"},{"bookDate":"2024-02-01","name":"小明2","num":"222222","time":"9:00-1:00","type":"社保卡"}]'),
  //     status: 0,
  //     time: '9:00-1:00',
  //     updateTime: '2024-04-16 16:46:00'
  //   },
  //   {
  //     bookDate: '2024-04-16',
  //     bookId: '1',
  //     createTime: '2024-04-16 16:46:00',
  //     creatorId: null,
  //     creatorName: '',
  //     id: 1,
  //     name: '小明',
  //     pcs: 2,
  //     phone: '12333',
  //     rtf: JSON.parse('[{"bookDate":"2024-02-01","name":"小明","num":"1111111","time":"9:00-1:00","type":"身份证"},{"bookDate":"2024-02-01","name":"小明2","num":"222222","time":"9:00-1:00","type":"社保卡"}]'),
  //     status: 1,
  //     time: '9:00-1:00',
  //     updateTime: '2024-04-16 16:46:00'
  //   },
  // ]

  // userAuthorization()

})
</script>

<template>
  <div class='booked-box'>
    <div class="title">
      <img src="@/assets/images/cicle.png" alt="">
      <div class="title-content">我的预约</div>
    </div>
    <div class="no-data" v-if="bookedList.length == 0">暂无预约</div>
    <div v-else>
      <div class="booking-card" v-for="(item, index) in bookedList" :key="index" @click="goBookedDetail(item.id)">
        <div>参观日期：{{ `${item.bookDate} ${item.time}` }}</div>
        <div>当前状态：<span :style="{ color: item.status == 0 ? '' : '#E3C956' }">{{ item.status == 0 ? '未验证' : '已验证'
            }}</span>
        </div>
        <div class="info-box">
          <div>参观人姓名：{{ item.name }}</div>
          <div>参观人电话：{{ bookedList[index].rtf[0].phone }}</div>
          <div>{{ `${bookedList[index].rtf[0].type}号：${bookedList[index].rtf[0].num}` }}</div>
        </div>
      </div>
    </div>
    <div class="online-box" @click="goSelectTime">发起预约</div>
    <!-- <BookingTime v-show="showBookingTime" /> -->
  </div>
</template>

<style lang='less' scoped>
* {
  box-sizing: border-box;
}

.booked-box {
  width: 100%;
  min-height: 100%;
  background: #F7F3E8;
  max-width: 500px;
  padding: 40px 20px;
  position: relative;
  overflow: auto;



  .title {
    font-size: 1.4em;
    color: #333333;
    font-weight: bold;
    position: relative;
    // line-height: 1.6em;
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;

    img {
      position: absolute;
      left: 0;
      top: 0;
      height: 1.6em;
    }

    .title-content {
      // position: absolute;
      position: relative;
      left: 0;
      top: 0;
      height: 1.4em;
      z-index: 2;
      line-height: 1.6em;
      color: #333333;
      margin-top: 1%;
      font-family: SourceHanSansCN-Bold;

    }

  }

  .no-data {
    color: #88866F;
    font-family: SourceHanSansCN-Regular;
  }

  .booking-card {
    width: 100%;
    border-radius: 15px;
    padding: 15px;
    color: #F7F3E8;
    font-family: SourceHanSansCN-Regular;
    line-height: 1.5em;
    background: #9D4F0B;
    margin-bottom: 15px;

    div {
      height: 40px;
      font-family: SourceHanSansCN-Regular;
    }

    .info-box {
      width: 100%;
      height: auto;
      padding: 20px 10px;
      background: url(@/assets/images/booking-card.png);
      background-size: 100% 100%;
      color: #333333;
      // margin-top: 10px;


    }
  }

  .online-box {
    width: 80%;
    max-width: 400px;
    height: 60px;
    border-radius: 50px;
    background: url(@/assets/images/onlineBg.png);
    background-size: 100% 100%;
    color: #F1E9D4;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 3vh;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 2px;
    font-weight: bold;
    z-index: 2;
  }

}
</style>