<script setup lang="ts">
import {apiImageUrl} from '../../API/api'
import { ref,onMounted,computed,onUnmounted } from 'vue'

    const currentIndex = ref(0);
    const tabs = ref([
      { name: '待出餐' },
      { name: '已取消' },
      { name: '已完成' },
    ]);

    const switchTab = (index) => {
      currentIndex.value = index;
    };
const orderList = ref([]);

const getOrder = () => {
  uni.request({
    url: apiImageUrl + '/api/orders/my/page',
    method: 'POST',
    data: {
      current: 1,
      endTime: "",
      id: "",
      pageSize: 100,
      pickupMethod: 0,
      sortField: "",
      sortOrder: "",
      startTime: "",
      state: 0
    },
    success(res) {
      console.log(res);
      orderList.value = res.data.data.records.reverse();
      console.log(orderList.value);
	  
    },
    fail() {
      console.log('出错啦');
    }
  });
};

onMounted(() => {
  getOrder();
});
</script>

<template>
<scroll-view scroll-y class="preview">
    <!-- 商品详情 -->
      <view class="tab-menu">
        <view class="tab-item"
              v-for="(tab, index) in tabs"
              :key="index"
              :class="{active: currentIndex === index}"
              @click="switchTab(index)">
          {{ tab.name }}
        </view>
      </view>
      <view class="content">
        <block v-if="currentIndex === 0">
			<view class="container1"  v-for="(order, index) in orderList" :key="index">
				<view class="box">
					<view class="numberState">
						<view class="number">
							#{{ order.id }}
						</view>
						<view class="state">
							商家已自动接单
						</view>
					</view>
					<view class="time">
						立即送达/{{ order.createTime }}前送达
					</view>
					<view class="message">
						<view class="name">
							柿子先生
						</view>
						<view class="phone">
							手机尾号{{order.phone}}
						</view>
					</view>
					<view class="button">
						门店新客
					</view>
					<view class="button">
						美团外卖会员
					</view>
					<view class="sure">
						确认出餐
					</view>
				</view>
			    <view class="box2">
			    	<view class="beizhu">
			    		顾客需要餐具；
			    	</view>
			    	<view class="goods">
			    		1种商品，共1件
			    	</view>
			    	<view class="money">
			    		预计收入￥{{ order.totalPrice }}
			    	</view>
			    </view>
			</view>
        </block>
        <block v-if="currentIndex === 1">
         <view class="container1" v-for="(order, index) in orderList" :key="index">
         	<view class="box">
         		<view class="numberState">
         			<view class="number">
         				#{{ order.id }}
         			</view>
         			<view class="state">
         				已取消
         			</view>
         		</view>
         		<view class="time">
         			立即送达/{{ order.createTime }}前送达
         		</view>
         		<view class="message">
         			<view class="name">
         				柿子先生
         			</view>
         			<view class="phone">
         				手机尾号{{order.phone}}
         			</view>
         		</view>
         		<view class="km">
         			1.5km|点击查看配送地址  >
         		</view>
         		<view class="button">
         			门店新客
         		</view>
         		<view class="button">
         			美团外卖会员
         		</view>
         	</view>
            
         </view>
		</block>
        <block v-if="currentIndex === 2">
     	<view class="container1" v-for="(order, index) in orderList" :key="index">
     		<view class="box">
     			<view class="numberState">
     				<view class="number">
     					#{{ order.id }}
     				</view>
     				<view class="state">
     					已完成
     				</view>
     			</view>
     			<view class="time">
     				立即送达/{{ order.createTime }}前送达
     			</view>
     			<view class="message">
     				<view class="name">
     					柿子先生
     				</view>
     				<view class="phone">
     					手机尾号{{order.phone}}
     				</view>
     			</view>
     			<view class="km">
     				1.5km|点击查看配送地址  >
     			</view>
     			<view class="button">
     				门店新客
     			</view>
     			<view class="button">
     				美团外卖会员
     			</view>
     			<view class="sure">
     				打印小票
     			</view>
     		</view>
     	   
     	</view>
        </block>
      </view>
  </scroll-view>
</template>
<style lang="scss">
	.tabs {
	  display: flex;
	  justify-content: space-around;
	  line-height: 60rpx;
	  margin: 0 10rpx;
	  background-color: #fff;
	  box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
	  position: relative;
	  z-index: 9;
	
	  .item {
	    flex: 1;
	    text-align: center;
	    padding: 20rpx;
	    font-size: 28rpx;
	    color: #262626;
	  }
	
	  .cursor {
	    position: absolute;
	    left: 0;
	    bottom: 0;
	    width: 18%;
	    height: 6rpx;
	    padding: 0 50rpx;
	    background-color: #4095e5;
	    /* 过渡效果 */
	    transition: all 0.4s;
	  }
	}
	.preview image {
		width: 100%;
	}
page {
  height: 100%;
  overflow: hidden;
  background-color: #f5f5f5;
}

.tab-menu {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  background-color: #f5f5f5;
}
.tab-item {
  padding: 10px;
  cursor: pointer;
}
.tab-item.active {
  color: #4095e5;
  font-weight: bold;
}

.scroll-view {
	/* #ifndef APP-NVUE */
	width: 100%;
	height: 100%;
	/* #endif */
	flex:1
}
.orderItem {
	width: 100%;
	height: 80px;
	margin-bottom: 10px;
	background-color: #fff;
}
.orderImg {
	display: inline-block;
	width: 20%;
	height: 100%;
	margin: auto 0;
	
}
.img {
	width: 100%;
	height: 100%;
	border-radius: 15px;
}
.orderMessage {
	width: 75%;
	height: 80%;
	float: right;
	display: inline-block;
	margin-top: 10px;
}
.money {
	font-size: 30rpx;
	font-weight: 700;
}
.time {
	font-size: 25rpx;
}
.container {
	width: 90%;
	height: 100vh;
	margin: 0 auto;
}
.container1 {
		width: 80%;
		margin: 0 auto;
		background-color: #fff;
		margin-bottom: 20px;
	}
	.numberState {
		height: 80rpx;
	}
	.number {
		font-weight: 700;
		font-size: 60rpx;
		float: left;
	}
	.state {
		font-size: 30rpx;
		font-weight: 700;
		float: right;
		margin-top: 15rpx;
	}
	.time {
		font-size: 30rpx;
		color: #999;
		padding-bottom: 10px;
		border-bottom: 1px dotted #787878;
	}
	.message {
		padding-top: 15rpx;
		height: 70rpx;
	}
	.name {
		font-size: 45rpx;
		font-weight: 700;
		float: left;
	}
	.phone {
		float: left;
		font-size: 30rpx;
		line-height: 70rpx;
		padding-left: 10rpx;
		color: #787878;
	}
	.km {
		font-size: 30rpx;
		padding-top: 5px;
		color: #787878;
		margin-bottom: 10px;
	}
	.button{
		display: inline;
		color: #787878;
		padding: 5px 10px 5px 10px;
		border: 1px solid gray;
		margin-right: 10px;
		font-size: 24rpx;
		border-radius: 5px;
		margin-top: 10px;
	}
	.sure {
		display: block;
		font-size: 30rpx;
		background-color: #c1c1c1;
		color: #000;
		border-radius: 5px;
		padding: 10px;
		width: 65px;
		margin-left: 220px;
	}
	.box {
		padding-bottom: 30px;
		border-bottom: 1px dotted #787878;
	}
	.beizhu{
		font-size: 40rpx;
		font-weight: 700;
		padding-bottom: 15px;
		padding-top: 10px;
		background: linear-gradient(to bottom, #fde16d, #fff);
		
	}
	.goods  {
		float: left;
		font-size: 40rpx;
		font-weight: 700;
	}
	.money {
		font-size: 30rpx;
		float: right;
		margin-top: 5px;
	}
	.box2 {
		padding-bottom: 50px;
		border-bottom: 1px dotted #787878;
	}
</style>