<!-- 抢单详情 -->
<template>
  <view class="body" :style="'padding-top:' + bottomHeight">
    <view class="bg-box">
      <!-- 导航 -->
      <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: #fff; font-size: 28rpx">抢单详情</view>
        </view>
        <view class="ss-flex-1"></view>
        <text class="textIcon icon-kefu icon-navigation"></text>
        <text class="textIcon icon-tongzhiguanli icon-navigation" style="margin-left: 30rpx"></text>
      </view>
      <view class="public-box top-box-info ss-flex-2 ss-col-center">
        <text class="textIcon icon-anquan" style="font-size: 28rpx; color: #36afca"></text>
        <view style="font-size: 24rpx; color: #4fbad0; margin-left: 5rpx">安心购</view>
        <view class="vertical-line"></view>
        <view style="font-size: 22rpx; color: #4fbad0; margin-left: 5rpx">
          未服务全额退.爽约包退.不满意重服务.全程保障
        </view>
      </view>
    </view>

    <!-- 中部 -->
    <view class="list-wrap" style="margin-top: -140rpx">
      <scroll-view scroll-y="true" class="list">
        <!-- 服务项目信息 -->
        <view class="service-box">
          <!-- 左右布局 -->
          <view class="ss-flex-2" v-for="i in 3" style="margin-bottom: 10rpx">
            <view style="width: 180rpx;height:180rpx;">
              <image
                class="wh"
                referrerpolicy="no-referrer"
                src="/static/lanhu_shouye/pskrims113novhztuh3djro4dewm6siic9cbfccd-f457-4e94-a2a5-bf7808d1dd3f.png"
              />
            </view>
            <view class="ss-flex-1" style="margin-left: 10rpx; margin-top: 5rpx">
              <!-- 服务大项 -->
              <view class="ss-flex-2 ss-col-center">
                <view>精油按摩</view>
                <view class="ss-flex-2 ss-col-center ss-row-center" style="margin-left: 10rpx">
                  <text
                    class="textIcon icon-chenghao"
                    style="font-size: 30rpx; color: #c3c4c4; padding-top: 10rpx"
                  ></text>
                  <view style="font-size: 28rpx; color: #c3c4c4; padding-top: 4rpx">2</view>
                </view>
                <view class="ss-flex-1"></view>
                <view class="ss-flex-2 ss-col-center ss-row-center">
                  <text
                    class="textIcon icon-fenzhong"
                    style="font-size: 22rpx; color: #3a4450"
                  ></text>
                  <view
                    style="font-size: 20rpx; color: #3a4450; margin-left: 10rpx; padding-top: 5rpx"
                  >
                    80分钟</view
                  >
                </view>
              </view>
              <!-- 服务小项 -->
              <view class="ss-flex-2 event-wrap" style="margin-top: 5rpx; flex-wrap: wrap">
                <view class="ss-flex-2" v-for="i in 4">
                  <view class="event-box">舒缓疲劳{{ i }}</view>
                  <view class="line-box"></view>
                </view>
              </view>
              <!-- 价格以及预约 -->
              <view class="ss-flex-2 ss-col-center" style="margin-top: 10rpx">
                <view class="ss-flex-2 ss-col-center ss-row-center">
                  <text class="textIcon icon-renminbi1688 icon-rmb"></text>
                  <view class="maney-number-box">498.00</view>
                </view>
                <view class="ss-flex-1"></view>
              </view>
            </view>
          </view>
          <view style="width: 100%; height: 20rpx"></view>
          <view class="ss-flex-2 ss-col-center" @click="jumpTechnicianList">
            <view style="font-size: 27rpx; color: #44484b; font-weight: 600; min-width: 120rpx"
              >抢单技师</view
            >
            <view class="ss-flex-1"></view>
            <view style="font-size: 22rpx; color: #5ab8d1" class="ss-flex-2 ss-col-center">
              <view style="width: 40rpx; height: 40rpx" v-for="it in 10">
                <image
                  class="wh"
                  style="border-radius: 20rpx"
                  referrerpolicy="no-referrer"
                  src="/static/lanhu_shouye/pskrims113novhztuh3djro4dewm6siic9cbfccd-f457-4e94-a2a5-bf7808d1dd3f.png"
                />
              </view>
            </view>
			<text style="font-size: 30rpx;margin-left: 15rpx;font-weight: 600;">9<text style="font-size: 26rpx;">人</text></text>
            <text
              class="textIcon icon-gengduo"
              style="font-size: 30rpx; color: #44484b; font-weight: 650; margin-left: 3rpx"
            ></text>
          </view>
          <view class="ss-flex-2 ss-col-center" style="margin-top: 10rpx">
            <view style="font-size: 27rpx; color: #44484b; font-weight: 600">服务时间</view>
            <view class="ss-flex-1"></view>
            <view style="font-size: 22rpx; color: #5ab8d1; margin-right: 50rpx"
              >2024-07-02 15:14:41</view
            >
          </view>
          <view class="ss-flex-2 ss-col-center" style="margin-top: 10rpx">
            <view style="font-size: 27rpx; color: #44484b; font-weight: 600; min-width: 120rpx"
              >服务地址</view
            >
            <view class="ss-flex-1"></view>
            <view style="font-size: 22rpx; color: #5ab8d1; margin-right: 45rpx"
              >山东省烟台市莱山区华庭路橡树湾小区10-515哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</view
            >
          </view>
		  <view class="ss-flex-2 ss-col-center" style="margin-top: 10rpx">
		    <view style="font-size: 27rpx; color: #44484b; font-weight: 600; min-width: 120rpx"
		      >联系电话</view
		    >
		    <view class="ss-flex-1"></view>
		    <view style="font-size: 22rpx; color: #5ab8d1; margin-right: 15rpx"
		      >15*******17</view
		    >
			<text
			  class="textIcon icon-bodadianhua"
			  style="font-size: 34rpx; color: #389BFF; font-weight: 650;"
			></text>
		  </view>
          <view class="ss-flex-2 ss-col-center" style="margin-top: 10rpx">
            <view style="font-size: 27rpx; color: #44484b; font-weight: 600">出行方式</view>
            <view class="ss-flex-1"></view>
            <view style="font-size: 22rpx; color: #5ab8d1">请选择出行方式</view>
            <text
              class="textIcon icon-gengduo"
              style="font-size: 30rpx; color: #44484b; font-weight: 650; margin-left: 20rpx"
            ></text>
          </view>
          <view style="margin-top: 10rpx; font-size: 16rpx; color: #97999b">
            注：单程30公里，预计需要40分钟，当前车费预估参考滴滴快车计费标准
          </view>
        </view>
        <!-- 会员卡 -->
        <view class="public-box member-box" style="margin-top: 20rpx" v-if="isShow">
          <view class="ss-flex-2">
            <view class="ss-flex-2 ss-col-center member-item-box">
              <text
                class="textIcon icon-huiyuan"
                style="font-size: 30rpx; color: #ef8338; font-weight: 650"
              ></text>
              <view style="color: #ef8338; font-size: 24rpx; font-weight: 650">会员卡套餐</view>
            </view>
            <view class="ss-flex-1"></view>
            <view class="check-info-box">勾选开通</view>
          </view>
          <view class="ss-flex-2 ss-col-center" style="margin-left: 50rpx">
            <text style="font-size: 22rpx; color: #555; font-weight: 650"
              >开通月卡会员本单可立省</text
            >
            <text
              class="textIcon icon-renminbi1688"
              style="font-size: 24rpx; color: #e40214; font-weight: 650"
            ></text>
            <text style="font-size: 22rpx; color: #e40214; font-weight: 650">11.95</text>
            <view class="ss-flex-1"></view>
            <text
              class="textIcon icon-renminbi1688"
              style="font-size: 33rpx; color: #e50315; font-weight: 650"
            ></text>
            <text style="font-size: 32rpx; color: #e50315; font-weight: 650">38</text>
            <view style="margin-left: 10rpx">
              <text
                class="textIcon icon-renminbi1688"
                style="
                  font-size: 24rpx;
                  color: #919190;
                  font-weight: 650;
                  text-decoration: line-through;
                "
              ></text>
              <text
                style="
                  font-size: 22rpx;
                  color: #919190;
                  font-weight: 650;
                  text-decoration: line-through;
                "
                >40</text
              >
            </view>
            <uni-data-checkbox
              style="margin-left: 40rpx"
              selectedColor="#F4AB78"
              multiple
              v-model="checkbox"
              :localdata="hobby"
            ></uni-data-checkbox>
          </view>
          <view style="margin-left: 50rpx" class="ss-flex-2 ss-col-center">
            <text style="font-size: 19rpx; color: #f19250"
              >开通嘀咚到位会员卡&nbsp;享受多重会员权益</text
            >
            <text
              class="textIcon icon-kongxinwenhao"
              style="font-size: 22rpx; color: #f19250; font-weight: 650; margin-left: 10rpx"
            ></text>
            <view class="ss-flex-1"></view>
          </view>
          <view class="ss-flex-2 ss-row-center">
            <view class="ss-flex-2 ss-col-center more-member-box">
              <text style="font-size: 18rpx; color: #f29758">更多会员套餐</text>
              <text
                class="textIcon icon-xiangxiashuangjiantou"
                style="font-size: 20rpx; color: #f19250; font-weight: 650; margin-left: 10rpx"
              ></text>
            </view>
          </view>
        </view>
        <!-- 价钱明细以及优惠卷 -->
        <view class="price-box public-box" v-if="isShow">
          <view style="font-size: 30rpx; color: #414851; font-weight: 550">价格明细</view>
          <view class="ss-flex-2 ss-row-center" style="margin-top: 10rpx">
            <view style="font-size: 27rpx; color: #555">套餐总价</view>
            <view class="ss-flex-1"></view>
            <view class="ss-flex-2 ss-row-center" style="margin-right: 50rpx">
              <text
                class="textIcon icon-renminbi1688"
                style="font-size: 30rpx; color: #555; font-weight: 650"
              ></text>
              <text style="font-size: 28rpx; color: #555">398.00</text>
            </view>
          </view>
          <view class="ss-flex-2 ss-row-center" style="margin-top: 10rpx">
            <view style="font-size: 27rpx; color: #555">出行路费</view>
            <view class="ss-flex-1"></view>
            <view class="ss-flex-2 ss-row-center" style="margin-right: 50rpx">
              <text
                class="textIcon icon-renminbi1688"
                style="font-size: 30rpx; color: #555; font-weight: 650"
              ></text>
              <text style="font-size: 28rpx; color: #555">98.00</text>
            </view>
          </view>
          <view class="ss-flex-2 ss-row-center" style="margin-top: 10rpx">
            <view style="font-size: 27rpx; color: #555">通用优惠卷</view>
            <text
              class="textIcon icon-youhuijuan"
              style="font-size: 35rpx; font-weight: 650; color: #ff3938; margin-left: 5rpx"
            ></text>
            <view class="ss-flex-1"></view>
            <view class="ss-flex-2 ss-row-center">
              <text
                class="textIcon icon-renminbi1688"
                style="font-size: 30rpx; color: #e92c3a; font-weight: 650"
              ></text>
              <text style="font-size: 28rpx; color: #e92c3a">-10.00</text>
            </view>
            <text
              class="textIcon icon-gengduo"
              style="
                font-size: 32rpx;
                color: #555;
                font-weight: 650;
                width: 50rpx;
                text-align: right;
                margin-top: 3rpx;
              "
            ></text>
          </view>
          <view class="ss-flex-2 ss-row-center ss-row-left" style="margin-top: 30rpx">
            <text class="textIcon icon-weibiaoti-" style="font-size: 33rpx; color: #e92c3a"></text>
            <text style="font-size: 24rpx; color: #e92c3a">已为您选择最佳优惠</text>
          </view>
          <view
            style="width: 100%; height: 2rpx; background-color: #d6d6d9; margin-top: 10rpx"
          ></view>
          <view
            class="ss-flex-2 ss-row-center ss-row-right"
            style="padding: 10rpx; margin-top: 20rpx"
          >
            <view class="ss-flex-2 ss-col-center">
              <text style="font-size: 32rpx; color: #333; font-weight: 650">已优惠</text>
              <text
                class="textIcon icon-renminbi1688"
                style="font-size: 30rpx; color: #e92c3a; font-weight: 650"
              ></text>
              <text style="font-size: 32rpx; color: #e92c3a">10.00</text>
            </view>
            <view class="ss-flex-2 ss-col-center" style="margin-left: 40rpx">
              <text style="font-size: 32rpx; color: #333; font-weight: 650">需支付</text>
              <text
                class="textIcon icon-renminbi1688"
                style="font-size: 30rpx; color: #333; font-weight: 650"
              ></text>
              <text style="font-size: 32rpx; color: #333">416.00</text>
            </view>
          </view>
        </view>
        <!-- 备注 -->
        <view class="public-box price-box" style="box-sizing: border-box">
          <textarea
            class="text-area-box-info"
            maxlength="300"
            auto-height
            disabled
            placeholder="请提前告知特殊情况(选填)"
          />
          <!-- 自己定的一些常用语 -->
          <view class="ss-flex-2 ss-row-center ss-row-left" style="flex-wrap: wrap">
            <view class="expressions-box" v-for="i in 7"> 肌肉拉伤233 </view>
          </view>
        </view>
        <!-- 号码保护 -->
        <view
          class="ss-flex-2 ss-row-center ss-col-center public-box price-box"
          style="margin-top: 20rpx"
        >
          <view>
            <view class="ss-flex-2 ss-row-center ss-col-center ss-row-left">
              <text
                class="textIcon icon-yuyinyinsixiaohao"
                style="font-size: 30rpx; color: #36afca; font-weight: 650"
              ></text>
              <text style="font-size: 28rpx; color: #333; font-weight: 650; margin-left: 5rpx"
                >号码保护</text
              >
            </view>
            <view style="font-size: 20rpx; color: #a8a8a8; margin-top: 10rpx">
              隐藏手机号，保护隐私，通话录音，保驾护航
            </view>
          </view>
          <view class="ss-flex-1"></view>
          <text
            class="textIcon icon-gengduo"
            style="font-size: 30rpx; color: #333; font-weight: 650"
          ></text>
        </view>
        <view style="width: 100%; height: 20rpx"></view>
      </scroll-view>
    </view>
    <!-- 底部结算 -->
    <view class="bottom-info-box ss-flex-2 ss-row-center ss-col-center">
      <view style="color: #fff; margin-left: 30rpx" v-if="isShow">
        <view class="ss-flex-2 ss-col-center">
          <text>合计：</text>
          <text
            class="textIcon icon-renminbi1688"
            style="font-size: 34rpx; color: #fff; font-weight: 650"
          ></text>
          <text style="color: #fff; font-weight: 650">465.25</text>
        </view>
        <view class="ss-flex-2 ss-col-center" style="font-size: 24rpx; margin-top: 15rpx">
          <text>已优惠：</text>
          <text
            class="textIcon icon-renminbi1688"
            style="font-size: 24rpx; color: #fff; font-weight: 650"
          ></text>
          <text style="color: #fff">10.00</text>
        </view>
      </view>
      <view class="ss-flex-1"></view>
	  <view class="settlement-box" v-if="!isShow" @click="offerReward">立即悬赏</view>
	  <view class="settlement-box" v-if="!isShow"@click="jumpTechnicianList">选择抢单技师</view>
      <view class="settlement-box" v-if="isShow" @click="settlement">立即结算</view>
    </view>
    <!-- 悬赏弹窗 -->
    <uni-popup ref="popup" background-color="#fff" :is-mask-click="false">
      <view class="reward-popup-box">
        <view class="reward-title">悬赏抢单</view>
        <view class="two-title">悬赏规则</view>
        <view class="rule-info-box">1.起商价</view>
        <view class="rule-info-box">2.悬赏好处</view>
        <view class="rule-info-box">3.不悬赏自动取消订单</view>
        <view class="ss-flex-2 ss-col-center" style="margin-top: 30rpx">
          <view class="colse-box" @click="closeInfo">先等等</view>
          <view class="confirm-box" style="margin-left: 40rpx" @click="closeInfo">立即悬赏</view>
        </view>
        <view class="dimension-box">
          或者你想
          <text style="color: #e98a3d">修改备注/</text>
          <text style="color: #e98a3d">服务地址/</text>
          <text style="color: #e98a3d">联系电话</text>
        </view>
      </view>
    </uni-popup>
  </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.redirectTo({
      url: '/pages/XDHome/technician/reservationPlaceOrder/reservationPlaceOrder',
    });
  };
  // 跳转到抢单技师列表
  const jumpTechnicianList = async () => {
    uni.navigateTo({
      url: '/pages/XDHome/technician/orderGrabbingTechnician/orderGrabbingTechnician',
    });
  };

  // 是否选择了技师
  const isShow = ref(false);

  // 勾选开通会员
  const checkbox = ref([0]);
  const hobby = ref([
    {
      text: '',
      value: 0,
    },
  ]);

  // 悬赏
  const popup = ref();
  // 打开悬赏弹窗
  const offerReward = async () => {
    popup.value.open('center');
  };
  // 关闭悬赏弹窗
  const closeInfo = async () => {
    popup.value.close('center');
  };

	//空白的结算页面
	const settlement=async()=>{
		uni.redirectTo({
		  url: '/pages/XDHome/technician/payBlank/payBlank',
		});
	}

  //获取顶部安全距离
  const app = uni.getSystemInfoSync();
  const bottomHeightOne = app.statusBarHeight + 'rpx';
  const bottomHeight = ref(bottomHeightOne);
  onLoad((option) => {
    console.log(option.item, '获取的项目信息数据');
  });
</script>
<style scoped>
  /deep/ .uni-data-checklist .checklist-group .checklist-box .checkbox__inner {
    border-radius: 16rpx !important;
    border: 2rpx solid #f49f64 !important;
  }
  /deep/.uni-popup .uni-popup__wrapper {
    width: 75%;
    border-radius: 10rpx;
    box-sizing: border-box;
  }
</style>
<style scoped lang="scss">
  .dimension-box {
    font-size: 20rpx;
    color: #474c4f;
    margin-top: 10rpx;
    padding-left: 5rpx;
  }
  .confirm-box {
    font-size: 24rpx;
    color: #e9853e;
    background-color: #fff8ef;
    box-sizing: border-box;
    padding: 6rpx 50rpx;
    border: 1rpx solid #f7b279;
    border-radius: 5rpx;
    letter-spacing: 2rpx;
  }
  .colse-box {
    font-size: 24rpx;
    color: #444;
    background-color: #efeef1;
    box-sizing: border-box;
    padding: 6rpx 50rpx;
    border-radius: 5rpx;
    letter-spacing: 2rpx;
  }
  .rule-info-box {
    font-size: 27rpx;
    color: #464646;
    margin-top: 10rpx;
    font-weight: 600;
    letter-spacing: 2rpx;
  }
  .two-title {
    font-size: 24rpx;
    color: #161616;
  }
  .reward-title {
    margin-top: 5rpx;
    text-align: center;
    font-size: 32rpx;
    color: #55aec3;
  }
  .reward-popup-box {
    width: 100%;
    min-height: 150rpx;
    box-sizing: border-box;
    padding: 10rpx 25rpx;
  }
  .settlement-box {
    font-size: 26rpx;
    padding: 15rpx;
    padding-left: 50rpx;
    padding-right: 50rpx;
    margin-right: 30rpx;
    background-color: #fff;
    color: #35aec9;
    font-weight: 650;
    border-radius: 10rpx;
  }
  .bottom-info-box {
    width: 100%;
    height: 120rpx;
    background-color: #2eafcf;
  }
  .expressions-box {
    font-size: 22rpx;
    color: #8e8e8e;
    background-color: #eeeef0;
    border-radius: 10rpx;
    margin-top: 10rpx;
    margin-right: 10rpx;
    padding: 5rpx 20rpx;
  }
  .text-area-box-info {
    background-color: #eeeef0;
    font-size: 22rpx;
    width: 100%;
    min-height: 140rpx;
    border-radius: 10rpx;
    padding: 10rpx;
    box-sizing: border-box;
  }
  .price-box {
    background-color: #fff;
    border-radius: 20rpx;
    box-shadow: 5rpx 5rpx 5rpx rgba(0, 0, 0, 0.2);
    margin-top: 20rpx;
    box-sizing: border-box;
    padding: 15rpx;
  }
  .check-info-box {
    font-size: 20rpx;
    color: #f2a066;
    border: 2rpx solid #f2a066;
    border-radius: 15rpx;
    margin-right: 70rpx;
    height: 35rpx;
    padding: 3rpx;
    padding-left: 10rpx;
    padding-right: 10rpx;
    box-sizing: border-box;
    margin-top: 10rpx;
  }

  .more-member-box {
    margin-top: 20rpx;
    padding: 5rpx 40rpx;
    box-sizing: border-box;
    background-color: #fbd9c0;
    border-top-right-radius: 30rpx;
    border-top-left-radius: 30rpx;
  }

  .member-item-box {
    background-color: #fbd9c0;
    padding: 10rpx 30rpx;
    box-sizing: border-box;
    border-top-left-radius: 20rpx;
    border-bottom-right-radius: 40rpx;
  }

  .member-box {
    background-color: #fff8f0;
    border-radius: 20rpx;
    box-shadow: 5rpx 5rpx 5rpx rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
  }

  .maney-number-box {
    font-size: 30rpx;
    color: #e60012;
    margin-left: 5rpx;
    padding-top: 5rpx;
    font-weight: 650;
  }

  .icon-rmb {
    font-size: 30rpx;
    color: #e60012;
    font-weight: 700;
  }

  .line-box {
    width: 2rpx;
    height: 30rpx;
    background-color: #d2d3d5;
    margin-left: 10rpx;
    margin-right: 10rpx;
  }

  .event-box {
    font-size: 22rpx;
    color: #909295;
    height: 30rpx;
    line-height: 30rpx;
    box-sizing: border-box;
  }

  .event-wrap {
    width: 100%;
    max-height: 60rpx;
    min-height: 60rpx;
    overflow-y: auto;
  }

  .service-box {
    width: 95%;
    margin-left: 2.5%;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 10rpx;
    padding: 10rpx;
    padding-bottom: 30rpx;
    box-shadow: 5rpx 5rpx 5rpx rgba(0, 0, 0, 0.3);
  }

  .add-message {
    font-size: 18rpx;
    color: #a2a2a2;
  }

  .add-title {
    font-size: 23rpx;
    color: #3e464f;
    font-weight: 650;
    ‌letter-spacing: 2px;
  }

  .top-box-info {
    margin-top: 30rpx;
    padding: 10rpx 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
  }

  .icon-navigation {
    font-size: 32rpx;
    color: #fff;
    font-weight: 700;
  }

  .bg-box {
    width: 100%;
    height: 300rpx;
    background: url('@/static/top-bg.png') no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
  }

  // 上中下布局样式
  .body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    // background: linear-gradient(to bottom, #08A3E9, #F8FCFF);
    background-color: #efeef1;
  }

  .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>
