<wxs module="tool" src="../../app.wxs" />
<wxs src="./../../utils/wxsUtil.wxs" module="wxsUtil" />
<view class="tabs-wrap flex-align-center">
  <view class="item flex-center {{current == 0 ? 'active' : ''}}" bindtap="onTabsChange" data-id="0">
    已预约
  </view>
  <view class="item flex-center {{current == 1 ? 'active' : ''}}" bindtap="onTabsChange" data-id="1">
    待使用
  </view>
  <view class="item flex-center {{current == 2 ? 'active' : ''}}" bindtap="onTabsChange" data-id="2">
    进行中
  </view>
  <view class="item flex-center {{current == 3 ? 'active' : ''}}" bindtap="onTabsChange" data-id="3">
    已结算
  </view>
  <view class="item flex-center {{current == 4 ? 'active' : ''}}" bindtap="onTabsChange" data-id="4">
    已取消
  </view>
</view>
<view class="tabs">
  <view class="tabs-content">
    <view class="on-spc"></view>
    <navigator url="{{current==0?'/pages/confirmProjectOrder/confirmProjectOrder?id='+item.id:'/pages/orderDetailsProject/orderDetailsProject?id='+item.id}}" class="navigator-content"
      wx:for="{{list}}" wx:key='index'>
      <view class="navigator-title">
        <image class="title-location-img" src="/images/black_location.png"></image>
        <view class="title-store-name">{{item.store_name}}</view>
        <view class="title-store-line">{{wxsUtil.getDistance(lat1,lng1,item.latitude,item.longitude)}}km <image src="/images/list-ker-right.png"></image>
        </view>
        <view class="show-typeStr">{{orderStr[current]}}</view>
      </view>
      <view class="item-desc">
        <view class="item-desc-title">美容时间:</view>
        <view class="item-desc-time">{{item.order_time}}<text></text></view>
      </view>
      <view class="item-desc">
        <view class="item-desc-title">美容项目:</view>
        <view class="ellipsis item-desc-project">{{item.project_name}}</view>
      </view>
      <view class="item-desc">
        <view class="item-desc-title">合计费用:</view>
        <view class="item-desc-price">¥<text>{{item.price}}</text></view>
      </view>

      <view class="line-show-line"></view>
      <view class="btm-line" wx:if="{{current == 0}}">
        <view class="spc"></view>
        <view class="gray-btm" catchtap="onCancelOrder" data-id="{{item.id}}">取消预约</view>
        <view class="gray-btm" catchtap="beautyImg" data-img="{{item.advisor_url}}">美导师</view>
        <view class="yellow-btm">立即支付</view>
      </view>
      <view class="btm-line" wx:if="{{current == 1||current==2}}">
        <view class="spc"></view>
        <view class="yellow-btm" catchtap="beautyImg" data-img="{{item.advisor_url}}">美导师</view>
      </view>
      <view class="btm-line" wx:if="{{current == 3}}">
        <view class="spc"></view>
        <view class="yellow-btm" catchtap="oneMore" data-id="{{item.id}}" data-price="{{item.price}}">再来一单</view>
      </view>
      <view class="btm-line" wx:if="{{current == 4}}">
        <view class="spc"></view>
        <view class="yellow-btm" catchtap="oneMore" data-id="{{item.id}}" data-price="{{item.price}}">重新预约</view>
      </view>
      <view class="btm-line" wx:if="{{current == 0}}">
        <view class="spc"></view>
        <navigator url="/pages/dossier/dossier" class="gray-btm" catchtap="buildSelf" data-id="{{item.id}}">完善个人档案</navigator>
      </view>

    </navigator>



    <!-- <navigator url="/pages/orderDetail/orderDetail?id={{item.id}}" hover-class="none" wx:for="{{list}}" wx:key="index">
      <view class="item tabs-radius current{{current}}">
        <view class="item-top flex-align-center ">
          <text class="flex1 ellipsis" style="font-size: 36rpx;font-family: PingFangSC-Semibold, PingFang SC;">{{item.project_name}}</text>
          <text class="state" wx:if="{{item.status == 0}}">已预约</text>
          <text class="state" wx:if="{{item.status == 1}}">待使用</text>
          <text class="state" wx:if="{{item.status == 2}}">进行中</text>
          <text class="state" wx:if="{{item.status == 3}}">已结算</text>
        </view>
        <view>
          <view class="item-content flex">
            <view class="img">
              <image src="{{item.project_cover_url}}"></image>
              <view class="mark" wx:if="{{item.products.length > 0}}">项目</view>
            </view>
            <view class="content flex-column">
              <view class="content-text-box flex">
                <text style="color:#999;">预约店铺：</text>
                <text class="flex1 ellipsis">{{item.store_name}}</text>
              </view>
              <view class="content-text-box flex">
                <text style="color:#999;">预约时间：</text>
                <text class="flex1 ellipsis">{{tool.replaceStr(item.order_time)}}</text>
              </view>
              <view class="content-text-box flex">
                <text style="color:#999;">使用设备：</text>
                <text class="flex1 ellipsis">{{item.device_name}}</text>
              </view>
              <text style="font-size: 14px;color: #333333;">预约时间：{{tool.replaceStr(item.order_time)}}</text>
              <text style="font-size: 14px;color: #666666;">设备：{{item.device_name}}</text>
            </view>
            <image class="icon" src="/images/my/order_0.png" wx:if="{{item.status == -1}}"></image>
          </view>
          <view class="item-content flex" wx:for="{{item.products}}" wx:key="p_index" wx:for-item="p_item">
            <view class="img">
              <image src="{{p_item.cover_url}}"></image>
              <view class="mark">产品</view>
            </view>
            <view class="content flex-column">
              <view class="content-text-box flex">
                <text style="color:#999;">升级产品：</text>
                <text class="flex1 ellipsis">{{p_item.product_name}}</text>
              </view>
              <view class="content-text-box flex"></view>
              <view class="content-text-box flex"></view>
            </view>
            <image class="icon" src="/images/my/order_0.png" wx:if="{{item.status == -1}}"></image>
          </view>
        </view>
        <view class="item-btn flex-align-center" wx:if="{{item.status == 0}}">
          <view class="btn cancel-btn flex-center" catchtap="onCancelOrder" data-id="{{item.id}}">
            取消订单
          </view>
          <view class="btn use-btn flex-center" catchtap="onPay" data-id="{{item.id}}" data-money="{{item.price}}">去支付</view>
        </view>
        <view class="item-btn flex-align-center" wx:if="{{item.status != 0}}">
          <text style="font-size: 28rpx;color: #999;">{{item.products.length > 0 ? "合计：" : "预约费用："}}</text>
          <text style="font-size: 36rpx;margin-right:28rpx;color: #333 !important;">¥{{item.price}}</text>
        </view>
      </view>
    </navigator> -->
    <view class="no-data" style="display: {{list.length == 0 ? 'block' : 'none'}};">暂无数据~</view>
  </view>


  <wux-popup class="popup-radius" position="bottom" catchtouchmove="true" visible="{{ payNow }}"
    bind:close="onClosePay">
    <view class="coupon-popup payType">
      <view class="top flex-align-center">
        <text style="text-align: center;"></text>
        <image src="/images/icon_20.png" class="close-img" bindtap="onClosePay" />
      </view>

      <view class="moneyShow"><text>¥</text>{{ payMoney }}</view>

      <view class="select-pay-methon" catchtap="pay_methonw">
        <image class="pay-img" src="/images/wx_pay.png"></image>
        <view class="pay-title">微信支付</view>
        <!-- <view class="pay-money"><text>￥</text>800</view> -->
        <image class="select-activity" src="{{pay_methon==1?'/images/icon_13.png':'/images/icon_12.png'}}"></image>
      </view>

      <view class="select-pay-methon" catchtap="pay_methonc">
        <image class="pay-img" src="/images/joli_pay.png"></image>
        <view class="pay-title">储值支付</view>
        <view class="pay-money"><text>￥</text>{{inserllAmount}}</view>
        <image class="select-activity" src="{{pay_methon==2?'/images/icon_13.png':'/images/icon_12.png'}}"></image>
      </view>

      <view class="coupon-popup-btm flex-center">
        <view class="coupon-popup-btm-btn flex-center" bindtap="payNow">支付</view>
      </view>
    </view>
  </wux-popup>
</view>

<!-- showLandscape -->
<wux-landscape visible="{{ showLandScape }}" maskClosable="{{ true }}" closable="{{ false }}" bind:close="onCloseLandscape"
  class="skin-popup" catchtouchmove="true">
  <view class="use-popup flex-column">
    <view class="text-cotent">
      <image class="showImage" 	show-menu-by-longpress="true" src="{{showImg}}"></image>
      <view class="text-top">JOLIJOLI美导师帮你</view>
      <view class="text-bottom">解决任何美容问题和服务</view>
    </view>
    <image src="/images/icon_20.png" class="close-img" bindtap="onCloseLandscape"></image>
  </view>
</wux-landscape>