<template>

  	<view class="content">
  		<view class="header">
  			<!-- 搜索-->

  			<!-- <view class="searchBar">

  				<icon class="searchIcon" type="search" size="14"></icon>

  				<input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/>

  			</view> -->

  			<view class="screenBar">
  				<view  v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)"  >
  						<view class="screenItem"  v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
  				</view>

  			</view>

  		</view>

  		<view class="orderList" >

  			<view
  			  v-for="(order) in orderList"
  			  :key="order.orderId"
  			>

  				<OrderCard :order = "order" :current="current"></OrderCard>
  			</view>
  		</view>

  		<view class="footer" >没有更多订单了，去商城看看吧~</view>

  	</view>
  </template>

  <script>

  	import OrderCard from './components/OrderCard.vue';
  	import store from '@/store';
  

  	export default {
  		components:{

  			'OrderCard': OrderCard

  		},
  		data() {

  			return {

  				//顶部筛选项

  				screenItems: [

  					{current:"10",text:'全部'},
  					{current:"0",text:'待付款'},
  					{current:"1",text:'待收货'},
  					{current:"2",text:'已完成'},
  					// {current:"3",text:'已评价'},
  					// {current:"4",text:'退款'},

  					],

  				//当前所在item 默认10-->全部
  				current: "10",

  			};

  		},

  		onLoad: function(option) {
  			//获取订单列表

  			store.dispatch('myOrder/getList', {
  				uid: "1",

  				way: "",
  			}); 
  			//从user过来传的status，给current，以显示对应item                 
  			this.current = option.status

  		},
  		computed: {
  			orderList() {

  				// console.log('orderList', this.$store.state.myOrder.orderList);
  				return this.$store.state.myOrder.orderList;

  			}

  		},

  		methods:{

  			//tab点击事件

  			onClickItem(e) {
  				if (this.current !== e) {
  					this.current = e;
  				}
  			}

  		}
  	}
  </script>
  

  <style lang="scss">
  	.content {
  		display: flex;
  		flex-direction: column;
  		align-items: center;
  		background-color: #F7F6F6;

  		min-height: 100vh;
  		.header{

  			background-color: #ffffff;

  			width: 100%;

  			// height: 232rpx;
  			padding: 20rpx 40rpx 16rpx 40rpx;

  			box-sizing: border-box;
  			position: fixed;
  			top: 0;
  			left: 0;

  			// .searchBar {
  			// 	width: 670rpx;
  			// 	display: flex;
  			// 	justify-content: center;
  			// 	align-items: center;
  			// 	box-sizing: border-box;
  			// 	padding: 0rpx 16rpx;
  			// 	border: 1px solid #FF6B4A;
  			// 	border-radius: 8rpx;
  			// 	background-color: #ffffff;
  			// }

  			
  			.screenBar{
  				width: 670rpx;

  				// height: 110rpx;
  				height: 70rpx;

  				display: flex;
  				flex-direction: row;
  				justify-content: space-between;
  				align-items: center;
  				color: #333333;
  				font-size: 32rpx;
  			}
  			.screenItem{
  				height: 50rpx;
  				font-size: 32rpx;
  				color: #333333;
  				display: flex;
  				justify-content: center;
  				align-items: center;
  				transition:all 0.2s;
  			}
  			.active{
  				// font-size: 34rpx;
  				color: #EC5D3B;
  			}
  			.searchIpt {
  				height: 68rpx;
  				width: 670rpx;
  				padding: 16rpx;
  				font-size: 28rpx;
  				box-sizing: border-box;
  			}

  		}

  		.orderList{

  			// margin-top: 232rpx;
  			margin-top: 132rpx;

  		}

  		.footer{
  			font-size: 14px;
  			color: #B8B8B8;
  			margin: 40rpx 0;

  		}

  	}
  </style>