<template>
	<view class="OrderStatus">
		<!-- 待结算 -->
		<view class="un_commission_count" :class="{activation:lastCLick === uncommission?true:false}" @tap="switchClick(uncommission)">
			待结算{{un_commission_count}}单
		</view>
		<!-- 已结算 -->
		<view class="commission_count" :class="{activation:lastCLick === commission?true:false}" @tap="switchClick(commission)">
			已结算{{commission_count}}单
		</view>
	</view>
</template>

<script>
	/**
	 * 订单列表顶部筛选组件
	 * @param {type}  uncommission			// 待结算点击时向后台传入的筛选字段
	 * @param {type}  commission			// 已结算点击时向后台传入的筛选字段
	 * @param {type}  un_commission_count	// 待结算待结算数量
	 * @param {type}  commission_count		// 已结算待结算数量
	 * */
	export default {
		name: "OrderStatus",
		props:{
			un_commission_count:{
				type:Number,
				default:0
			},
			commission_count:{
				type:Number,
				default:0
			},
			uncommission:{
				type:Number,
				default:0
			},
			commission:{
				type:Number,
				default:1
			}
		},
		computed:{
			// 待结算
			// uncommissioncount(){
			// 	return this['un_commission_count']
			// },
			// 待结算
			// commissioncount(){
			// 	return this['commission_count']
			// }
		},
		data() {
			return {
				// un_commission_count:0,
				// commission_count:0,
				// 上一次点击状态
				lastCLick:'',
				// 本次点击状态
				// thisCLick:'',
			};
		},
		methods:{
			// 切换事件
			switchClick(type){
				let _type = '';
				if(this['lastCLick'] !== type) _type = type;
				this['lastCLick'] = _type;
				this.$emit('commission',_type)
			}
		}
	}
</script>

<style lang="scss">
	.OrderStatus {
		width: 100%;
	    margin: 32rpx 0;
		display: flex;
		justify-content:space-between;
		.un_commission_count,.commission_count{
			width: 46%;
			height: 120rpx;
			border: 2rpx solid rgba(253,143,59,0.2);
			border-radius: 15rpx;
			color: #fd8f3b;
			font-size: 28rpx;
			text-align: center;
			line-height: 120rpx;
		}
		.activation{
			background-color: #fd8f3b;
			border: none !important;
			color: #FFFFFF;
		}
	
	}
</style>
