<template>
	<view class="content">
		<view class="searchBox">
			<input type="text" value="" placeholder="请输入订单号" @input="bindInput" />
		</view>
		<view class="tabList">
			<view :class="tabIndex==index?'tabItem active':'tabItem'" v-for="(item,index) in tabList" :key="index" @click="tabClick(index)">
				{{item}}
				<!-- 订单状态筛选 -->
				<view :class="tabIndex==3?'lastStatus':'orderSelect'" v-if="tabIndex==index&&maskShow">
					<view :class="tabIndex==3?'lastStatusArrow':'arrowIcon'">
					</view>
					<view class="statusItem" v-for="(item,index) in orderStatus" :key="index" @click.stop="orderStatusClick(index)">
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<view class="" style="">
			<view v-for="(item,index) in dataList" :key="index" class="itemOrder">
				<view class="orderNumber">
					<view class="">
						订单号：{{item.number}}
					</view>
					<view class="status">
						{{item.status==0?'待发货':item.status==1?'已支付代发货':item.status==1?'已支付待收货':'待支付'}}
					</view>
				</view>
				<view class="goodbOX">
					<view class="goodLeftBox">
						<image :src="item.image" mode="" class="goodImg"></image>
						<view class="goodTitle">
							{{item.goodName}}
						</view>
					</view>
					<view class="goodRightBox">
						<view class="price">
							<text style="font-size: 22rpx;">￥</text>
							{{item.price}}
						</view>
						<view class="num">
							X{{item.num}}
						</view>
					</view>
				</view>
				<view class="btnBox">
					<view class="btnItem">
						{{item.status==0?'取消订单':item.status==1?'发货':item.status==1?'查看物流':'待支付'}}
					</view>
				</view>
			</view>
		</view>
		<view class="bottomTab">
			<view class="bottomIcon">
				<image src="../../static/ic_12@2x.png" mode=""></image>
				<view class="">
					订单管理
				</view>

			</view>
			<view class="bottomIcon">
				<image src="../../static/ic_13@2x.png" mode=""></image>
				<view class="">
					我的
				</view>
			</view>
		</view>
		<!-- 遮罩 -->
		<view class="mask" v-if="maskShow">

		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchText: '',
				tabIndex: 0,
				tabList: ['全部', '待付款', '待发货', '待收货'],
				orderStatus: ['全部','已支付待发货', '未支付待配送', '已支付带配送', '未支付拣货中'],
				statusIndex:0,  //订单状态
				maskShow: false,
				dataList: [{
					image: '../../static/ic_1@2x.png',
					number: '1234556789',
					status: 0,
					goodName: '科麦斯无油静音空吗压力小型,气便捷吹尘木工打',
					price: '50',
					num: '2'
				}, {
					image: '../../static/ic_1@2x.png',
					number: '1234556789',
					status: 1,
					goodName: '科麦斯无油静音空吗压力小型,气便捷吹尘木工打',
					price: '50',
					num: '2'
				}, {
					image: '../../static/ic_1@2x.png',
					number: '1234556789',
					status: 2,
					goodName: '科麦斯无油静音空吗压力小型,气便捷吹尘木工打',
					price: '50',
					num: '2'
				}, {
					image: '../../static/ic_1@2x.png',
					number: '1234556789',
					status: 3,
					goodName: '科麦斯无油静音空吗压力小型,气便捷吹尘木工打',
					price: '50',
					num: '2'
				}, {
					image: '../../static/ic_1@2x.png',
					number: '1234556789',
					status: 4,
					goodName: '科麦斯无油静音空吗压力小型,气便捷吹尘木工打',
					price: '50',
					num: '2'
				}, {
					image: '../../static/ic_1@2x.png',
					number: '1234556789',
					status: 4,
					goodName: '科麦斯无油静音空吗压力小型,气便捷吹尘木工打',
					price: '50',
					num: '2'
				}]
			}
		},
		methods: {
			bindInput(e) {
				console.log(e, 'ee')
				this.searchText = e.detail.value
			},
			tabClick(index) {
				this.tabIndex = index
				this.maskShow = true
			},
			orderStatusClick(index){
				this.statusIndex=index
				this.maskShow=false
				console.log(this.maskShow,'mask')
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #F7F8FA;
		padding: 114rpx 0;
		box-sizing: border-box;
		padding-bottom: 160rpx;
	}

	.mask {
		background: rgba(50, 50, 51, 0.70);
		position: fixed;
		top: 200rpx;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.searchBox {
		width: 100%;
		background-color: #fff;
		position: fixed;
		height: 100rpx;
		top: 0;
		left: 0;
		padding: 10rpx 80rpx;
		box-sizing: border-box;
	}

	input {
		height: 80rpx;
		background: #f7f8fa;
		padding: 0 20rpx;
		box-sizing: border-box;
		border-radius: 76rpx;
	}

	.tabList {
		width: 100%;
		position: fixed;
		display: flex;
		justify-content: space-around;
		background: #fff;
		top: -12rpx;
		padding-bottom: 6rpx;
		position: relative;
	}

	.tabItem {
		padding: 30rpx 0;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #323233;
		position: relative;
		width: 25%;
		text-align: center;
	}

	.orderSelect {
		position: absolute;
		left: 0;
		background-color: #fff;
		width: 244rpx;
		border-radius: 20rpx;
		top: 127rpx;
		z-index: 2;
	}
    .lastStatus{
		right: 0 ;
		position: absolute;
		background-color: #fff;
		width: 244rpx;
		border-radius: 20rpx;
		top: 127rpx;
		z-index: 2;
	}
	
	.statusItem {
		padding: 24rpx;
		font-size: 28rpx;
		color: #323233;
		border-bottom: 2rpx solid #F7F8FA;
		text-align: left;
	}

	.arrowIcon {
		position: absolute;
		background-color: #fff;
		width: 30rpx;
		height: 30rpx;
		transform: rotate(45deg);
		top: -12rpx;
		left: 98rpx;
	}
.lastStatusArrow{
		left: 144rpx;
		position: absolute;
		background-color: #fff;
		width: 30rpx;
		height: 30rpx;
		transform: rotate(45deg);
		top: -12rpx;
	}
	.activeStstus {
		background: #F7F8FA;
	}

	.active {
		color: #FF2F2F;
		border-bottom: 4rpx solid #FF2F2F;
	}

	.itemOrder {
		background-color: #fff;
		padding: 24rpx;
		box-sizing: border-box;
		margin-top: 24rpx;
	}

	.orderNumber {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 24rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		color: #969799;
	}

	.status {
		color: #fff;
		font-size: 36rpx;

	}

	.goodbOX {
		display: flex;
		justify-content: space-between;
	}

	.goodLeftBox {
		padding-right: 40rpx;
		box-sizing: border-box;
		display: flex;

	}

	.goodImg {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
	}

	.goodTitle {
		margin-left: 32rpx;
		color: #323233;
		font-size: 28rpx;
		white-space: normal;
		font-weight: 600;
		flex: 1;
	}

	.price {
		color: #323233;
		font-size: 28rpx;
	}

	.num {
		color: #969799;
		font-size: 26rpx;
		text-align: right;
	}

	.btnBox {
		display: flex;
		justify-content: flex-end;
		color: #ff2f2f;
		font-size: 26rpx;

	}

	.btnItem {
		padding: 10rpx 24rpx;
		box-sizing: border-box;
		border: 2rpx solid #ff2f2f;
		border-radius: 8rpx;
	}

	/* tab  底部 */
	.bottomTab {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 120rpx;
		font-size: 20rpx;
		background-color: #fff;
	}

	.bottomIcon image {
		width: 48rpx;
		height: 48rpx;
	}
</style>