<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>
		<navigator url="/pages/user/user" open-type="switchTab"><view class="footer">已显示全部</view></navigator>
		<!-- <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:0,text:'全部'},
					{current:1,text:'待付款'},
					{current:2,text:'待发货'},
					{current:3,text:'待收货'},
					{current:4,text:'退款售后'},
					],
				current: 0,
				//订单数据
				// orderList:[
				// 	{ orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
				// 	{ orderId: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
				// 	{ orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:2 ,buyNum:1},
				// 	{ orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
				// 	{ orderId: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
				// 	{ orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
				// 	{ orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
				// 	{ orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1},
				// 	{ orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1}
				// ],	
			};
		},
		onLoad: function() {
			store.dispatch('myOrder/getList', {
				uid: "1",
				way: "0",
			});
		},
		computed: {
			orderList() {
				console.log('orderList', this.$store.state.myOrder.orderlist);
				return this.$store.state.myOrder.orderlist;
			}
		},
		methods:{
			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: 40rpx 40rpx 36rpx 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;
				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;
		}
		.footer{
			font-size: 14px;
			color: #B8B8B8;
			margin: 40rpx 0;
		}
	}
</style>
