<wxs src="./../../utils/wxsUtil.wxs" module="wxsUtil" />
<view class="content">
  <view class="border-radius top flex-column {{inFirstIn?'showIndexs':''}}" style="padding: 20rpx 24rpx;">
    <!-- <view class="flex" style="margin-bottom: 20rpx;">
      <text style="font-size:28rpx;color:#999;">{{source == "project" ? "预约项目：" : "预约产品："}}</text>
      <text style="font-size:28rpx">{{projectData.name}}</text> 
    </view> -->
    <view class="flex" style="margin-bottom: 20rpx;" bindtap="">
      <text style="font-size:28rpx;color:#999;">预约门店：</text>
      <view bindtap="changeStore" class="storeName" style="font-size:28rpx">{{projectData.storeData.store_name}}<image class="open" src="../../images/home/展开@2x.png"></image></view>
      <view class="inLocations" style="font-size:28rpx">
        <image class="inLocationImage" src="/images/location-to.png"></image>
        <view class="inLocationDistance">
          距离您<text>{{wxsUtil.getDistance(lat1,lng1,projectData.storeData.latitude,projectData.storeData.longitude)}}</text>Km
        </view>
      </view>
    </view>
    <view class="flex">
      <text style="font-size:28rpx;color:#999;">门店地址：</text>
      <text class="flex1" style="font-size:28rpx;color:#999999">{{projectData.storeData.belong_region}}</text>
    </view>
    <!-- <text class="name">{{projectData.project_name}}</text>
    <text class="store">{{projectData.store_name}}</text>
    <view class="address flex-align-center ellipsis">
      <image src="/images/icon_05.png"></image>
      <text class="ellipsis" style="font-size: 24rpx;color: #666666;">{{projectData.store_address}}</text>
    </view> -->
  </view>
  <view class="border-radius flex-column">
    <view class="title">到店时间</view>
    <view class="scroll-x flex1 flex" style="overflow-x: scroll">
      <view class="item flex-column flex-align-center {{currentDateIndex == index ? 'active' : ''}}"
        wx:for="{{ times }}" wx:key="index" bindtap="onChangeDate" data-index="{{ index }}">
        <text wx:if="{{index == 0 }}">今天</text>
        <text wx:elif="{{index == 1 }}">明天</text>
        <text wx:else>{{item.week}}</text>
        <text style="margin-top: 2rpx;">{{item.day}}</text>
      </view>
    </view>
    <view class="time-box">
      <view class="tabs-title flex-align-center">
        <!-- <text wx:for="{{projectTime}}" wx:key="index" class="{{ currentSwiperIndex==index ? 'active' : '' }}" data-index="{{index}}" bindtap="onChangeSwiper">{{item.name}}</text> -->
        <text class="{{ currentSwiperIndex==0 ? 'active' : '' }}" data-index="0"
          bindtap="onChangeSwiper">{{projectTime[0].name}}</text>
        <text class="flex1" style="font-family: PingFangSC-Semibold, PingFang SC;color: #F0F0F0;">|</text>
        <text class="{{ currentSwiperIndex==1 ? 'active' : '' }}" data-index="1"
          bindtap="onChangeSwiper">{{projectTime[1].name}}</text>
      </view>

      <view class="list_Content_show" hidden="{{inFirstIn?false:true}}">
        <view class="timeSelect">
          <view class="timeShow">11：00</view>
        </view>

        <image class="list_Content_img" src="/images/white_on.png"></image>
        <view class="list_top_contents">
          <view class="first_and_title"><text>第二步：</text>选择您到店的时间</view>
        </view>
      </view>

      <swiper circular indicator-color="#CECECE" indicator-active-color="#FA7D22" current="{{currentSwiperIndex}}"
        bindchange="changeSwiper">
        <swiper-item wx:for="{{projectTime}}" wx:key="index">
          <view class="tabs-content">
            <view
              class="item flex-center {{item.status == 0 ? 'no-change' : ''}} {{currentTimeIndex == item.index ? 'active' : '' }}"
              wx:for="{{ item.list }}" wx:key="index" data-index="{{item.index}}" bindtap="onChangeTime">
              {{ item.order_time }}
            </view>
          </view>
        </swiper-item>
      </swiper>


    </view>
    <view class="custom-time flex flex-align-center">
      <text style="font-family: PingFangSC-Medium, PingFang SC;">自定义到店时间</text>
      <picker mode="time" value="{{time}}" start="{{projectTime[0].list[0].order_time}}"
        end="{{projectTime[1].list[projectTime[1].list.length-1].order_time}}" bindchange="bindTimeChange">
        <view class="input {{currentTimeIndex == -1 ? 'active' : ''}} flex-center">{{ time }}</view>
      </picker>
      <!-- <text class="flex1"></text>
      <image src="/images/icon_04.png"></image>
      <text style="font-size: 24rpx;">建议选择推荐时间</text> -->
    </view>
  </view>


  <!-- 下面是选择的项目操作 -->
  <view class="border-radius flex-column">

    <view class="project-list">
      <view class="peoject-list-title">共<text>{{projectList.length}}</text>个项目</view>
      <view class="peoject-list-time">预计时间：{{time}}-{{showTimes}}</view>
    </view>

    <view class="project-content" wx:for="{{projectList}}" wx:key='index'>
      <image class="project-content-img" src="{{item.cover_url}}"></image>
      <view class="project-content-right">
        <view class="item-right-time">
          <view class="item-right-title">{{item.name}}</view>
          <view class="item-right-title-time">{{item.use_time}}分钟</view>
        </view>
        <view class="item-project-add" hidden="{{onType=='one'?true:(item.selectMaterial?false:true)}}">+{{item.selectMaterial.name}}</view>
        <view class="item-project-add" hidden="{{onType=='one'?(item.product_name?false:true):true}}">+{{item.product_name}}</view>
        <!-- <view class="item-project-add">+润百颜精华</view> -->
      </view>
    </view>

  </view>


  <!-- <view class="border-radius {{inSecIn?'showSec':''}}" catchtouchmove="noneEnoughPeople" wx:if="{{deviceList.length > 0}}">

    <view class="list_sec_show" catchtouchmove="noneEnoughPeople" hidden="{{inSecIn?false:true}}">
      <view class="KnowBtnSec" catchtap="knowSubmit">我知道了</view>
      <view class="list_sec_content">
        <view class="first_and_title">系统会根据您</view>
        <view class="first_and_title">选择的时候自动匹配设备</view>
      </view>
      <image class="list_sec_img" src="/images/white_on.png"></image>
    </view> -->

  <!-- <view class="title">选择设备</view> -->
  <!-- <view class="title">已为您自动匹配设备</view>

    <view class="current-project flex" style="padding-bottom: 20rpx;">
      <image src="{{deviceList[0].cover_url}}"></image>
      <view class="project-text flex1 flex-column flex-justify-space-around">
        <view class="flex">
          <text style="font-size: 28rpx;color: #999;">可用项目：</text>
          <text style="font-size: 28rpx;">{{projectData.name}}</text>
        </view>
        <view class="flex">
          <text style="font-size: 28rpx;color: #999;">设备名称：</text>
          <text style="font-size: 28rpx;">{{deviceList[0].device_name}}</text>
        </view>
        <view class="flex">
          <text style="font-size: 28rpx;color: #999;">房间号码：</text>
          <text style="font-size: 28rpx;">{{deviceList[0].room}}</text>
        </view>
      </view>
    </view> -->

  <!-- <view class="project-scroll-x flex1 flex" style="overflow-x: scroll">
      <view class="ellipsis item flex-column flex-align-center {{item.status == 0 ? 'no-change' : ''}} {{index == currentDeviceIndex && item.status == 1 ? 'active' : ''}}" wx:for="{{ deviceList }}" wx:key="index" data-index="{{index}}" bindtap="onChangeDevice">
        <view class="project-box flex-column flex-align-center">
          <image src="{{item.cover_url}}" class="project-img"></image>
          <text class="flex1">{{item.status == 0 ? '不可预约' : '可预约'}}</text>
          <image src="/images/icon_03.png" class="active-img" wx:if="{{ item.status == 1 }}"></image>
        </view>
        <text class="name ellipsis">{{ item.device_name }}</text>
        <text class="name ellipsis" wx:if="{{item.room}}">({{ item.room }})</text>
      </view>
    </view> -->
  <!-- </view> -->
  <!-- <view class="border-radius" wx:else>
    <view class="title">暂无可用设备</view>
    <view class="current-project flex" style="padding-bottom: 20rpx;">
      <image src="/images/icon_no_device.png"></image>
    </view>
  </view> -->
</view>
<view class="btm flex-center">

  <view class="btm-down-line">
    <view class="btm-line-tips">合计</view>
    <view class="btm-line-tips-red">¥</view>
    <view class="btm-line-tips-money">{{money}}</view>
    <view class="btm-line-submit" catchtap="toBuyNow">立即预约</view>
  </view>

  <!-- <view class="btm-btn flex-center" bindtap="addOrder">确认</view> -->
</view>
<view style="height: 152rpx;"></view>

<!-- ==========================listKer========================== -->
<view class="list_first_to" catchtouchmove="noneEnoughPeople" hidden="{{inFirstIn?false:true}}">
  <view class="list_top_show">
    <image class="list_top_img" src="/images/white_on.png"></image>
    <view class="list_top_content">
      <view class="first_and_title"><text>第一步：</text>核对您预约的项目和店铺</view>
    </view>
  </view>
  <view class="KnowBtn" catchtap="knowSubmit">我知道了</view>
</view>

<!-- ==========================listKer========================== -->
<view class="list_first_to" catchtouchmove="noneEnoughPeople"
  hidden="{{inSecIn?(deviceList.length > 0?false:true):true}}">
</view>
<!-- 选择店铺弹窗 -->
<wux-landscape visible="{{ showStore}}" maskClosable="{{ true }}" closable="{{ false }}" bind:close="onCloseLandscape"
  class="skin-popup" catchtouchmove="true">
  <view class="use-popup flex-column">
    <view class="text-cotent">
      <view class="title">JOLIJOLI（益田店）已于12月31日闭店升级可预约其他店铺</view>
      <view class="list {{isSelectProduct?'activeList':''}}">
  <view class="item {{item.id==defaultStore.id?'activeStore':''}}" wx:for="{{storeList}}" wx:key="index" bindtap="onChangeStore" data-item="{{item}}">
    <view class="left">
      <text><text class="storeName">{{item.store_name}}</text><text>距离{{wxsUtil.getDistance(lat1,lng1,item.latitude,item.longitude)}}km</text></text>
    <text class="adress">{{item.belong_region}}</text>
    </view>
  </view>
</view>
    </view>
    <image src="/images/icon_20.png" class="close-img" bindtap="onCloseLandscape"></image>
  </view>
</wux-landscape>