<!-- 选择时间页面 -->
<template>
  <view class="body" :style="'padding-top:' + bottomHeight">
    <!-- 导航 -->
    <view class="ss-flex-2 ss-col-center ss-margin-width2" style="position: relative">
      <view class="ss-flex-2 ss-col-center">
        <text class="textIcon icon-fanhui icon-navigation" @click="backPage"></text>
        <view style="margin-left: 15rpx; color: #444; font-size: 28rpx">等待技师接单</view>
      </view>
      <view class="ss-flex-1"></view>
    </view>
    <!-- 标题 -->
    <view
      class="ss-flex-2 ss-col-center"
      style="
        padding: 10rpx;
        box-sizing: border-box;
        border-bottom: 1rpx solid #666;
        margin-top: 10rpx;
      "
    >
      <view class="title-box">可预约时间</view>
    </view>
    <view class="flex-time-box">
      <!-- 左右布局 -->
      <view style="width: 200rpx"></view>
      <view class="ss-flex-1" style="display: flex; flex-wrap: wrap">
        <view v-for="i in 48" class="time-box">00:00</view>
      </view>
    </view>
    <!-- 中部 -->
    <view class="list-wrap">
      <scroll-view scroll-y="true" class="list">
        <view class="list-scroll-view">
          <view class="course-card"> </view>
        </view>
      </scroll-view>
    </view>
    <view
      class="ss-flex-2 ss-col-center ss-row-between"
      style="padding: 20rpx 40rpx; border-top: 1rpx solid #999"
    >
      <view class="reset-box">重置</view>
      <view class="complete-box">完成</view>
    </view>
  </view>
</template>
<script setup>
  import { reactive, ref } from 'vue';
  import { computed } from 'vue';
  import {
    onLoad,
    onPageScroll,
    onPullDownRefresh,
    onReady,
    onReachBottom,
    onShow,
  } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import $share from '@/sheep/platform/share';
  // 隐藏原生tabBar
  // uni.hideTabBar();

  // 返回上一页
  const backPage = async () => {
    uni.navigateBack({
      delta: 1,
    });
  };

  //获取顶部安全距离
  const app = uni.getSystemInfoSync();
  const bottomHeightOne = app.statusBarHeight + 'rpx';
  const bottomHeight = ref(bottomHeightOne);
</script>
<style scoped lang="scss">
  .complete-box {
    font-size: 28rpx;
    color: #fff;
    padding: 15rpx 120rpx;
    background-color: #36afca;
    border-radius: 10rpx;
  }
  .reset-box {
    font-size: 28rpx;
    color: #555;
    padding: 15rpx 120rpx;
    background-color: #dcdcdc;
    border-radius: 10rpx;
  }
  .flex-time-box {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    margin-top: 10rpx;
  }
  .time-box {
    font-size: 24rpx;
    color: #222222;
    padding: 5rpx 30rpx;
    box-sizing: border-box;
    border: 1rpx solid #999;
    border-radius: 20rpx;
    margin-right: 10rpx;
    margin-top: 20rpx;
    background-color: #fff;
  }
  .title-box {
    position: relative;
    width: 100%;
    padding: 5rpx 30rpx;
    font-size: 28rpx;
    color: #444;
    font-weight: 650;
    box-sizing: border-box;
    letter-spacing: 2rpx;
  }
  .icon-navigation {
    font-size: 32rpx;
    color: #555;
    font-weight: 700;
  }
  // 上中下布局样式
  .body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #fff;
  }
  .head {
    text-align: center;
  }
  // 中部滚动
  .list-wrap {
    flex-grow: 1;
    position: relative;
  }
  .list {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .list-scroll-view {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 2vw;
    margin-right: 2vw;
  }
  .course-card {
    width: 47vw;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  // 底部
  .tools {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .tools-item {
    width: 45px;
    text-align: center;
    font-size: 14px;
    padding: 20px;
  }
</style>
