<template>
	<view class="zhuangtai">
		<view @click="genggai(1)">
			<!-- <image :src='state==1?"../../static/quanbu.png":"../../static/quanbuw.png"'></image> -->
			<view :style="state==1?'color: #ffffff;':''">全部</view>
			<view :style="state==1?'background: linear-gradient(351deg, #9735DC 0%, #570CDC 100%);':''"></view>
		</view>
		<view @click="genggai(2)">
			<!-- <image :src='state==2?"../../static/dzf.png":"../../static/dzfw.png"'></image> -->
			<view :style="state==2?'color: #ffffff;':''">待支付</view>
			<view :style="state==2?'background: linear-gradient(351deg, #9735DC 0%, #570CDC 100%);':''"></view>
		</view>
		<view @click="genggai(3)">
			<!-- <image :src='state==3?"../../static/yzf.png":"../../static/yzfw.png"'></image> -->
			<view :style="state==3?'color: #ffffff;':''">已完成</view>
			<view :style="state==3?'background: linear-gradient(351deg, #9735DC 0%, #570CDC 100%);':''"></view>
		</view>
		<view @click="genggai(4)">
			<!-- <image :src='state==4?"../../static/yqx.png":"../../static/yqxw.png"'></image> -->
			<view :style="state==4?'color: #ffffff;':''">已取消</view>
			<view :style="state==4?'background: linear-gradient(351deg, #9735DC 0%, #570CDC 100%);':''"></view>
		</view>
	</view>
	<scroll-view class="scv" scroll-y="true" @scrolltoupper='shuaxing' @scrolltolower='jiazai' >
		<view class="order_content">
			<view @click="godetalis(item)" v-if="orderlist.length>0" v-for="(item,index) in orderlist">
				<view>
					<view>
						<view>订单号&nbsp;&nbsp;&nbsp;{{item.orderNumber}}</view>
					</view>
					<view v-if="item.orderState==2||item.orderState==6" style="color:#0CE4BE ;" >{{item.orderState==2?'已付款':item.orderState==6?'已完成':''}}</view>
					<view v-if="item.orderState==4||item.orderState==5||item.orderState==7" style="color:#8D8C9F ;" >{{item.orderState==4?'退款中':item.orderState==5?'已取消':item.orderState==7?'已关闭':''}}</view>
					<view v-if="item.orderState==3" style="color:#FFA337 ;" >发放中</view>
					<view v-if="item.orderState==1" style="color:#ff0000 ;" >待付款</view>
				</view>
				<view>
					<image :src="item.surfacePlot"></image>
					<view>
						<view>{{item.collectionName}}</view>
						<!-- <view v-if="item.orderState==7">{{'下单时间:'+item.createdTime}}</view>
						<view v-if="item.orderState==1&&item.expirationTime">{{'关闭时间:'+item.expirationTime}}</view>
						<view v-if="item.orderState==1&&!item.expirationTime">{{'下单时间:'+item.createdTime}}</view> -->
						<view>
							<view>
								<image :src="item.writerAvatar"></image>
								<view>{{item.artistName}}</view>
							</view>
							<view>X&nbsp;{{item.numberDeals}}</view>
						</view>
						<!-- <view>{{item.expirationTime?'关闭时间'+item.expirationTime:}}</view> -->
						<view>
							<view>{{item.createdTime}}</view>
							<view>￥{{item.price}}</view>
						</view>
					</view>
				</view>
				<view v-if="item.orderState==1" class="buttons">
					<view @click.stop="quxiao(item)">取消订单</view>
					<view @click.stop="zhifu(item)">立即付款</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import {criticismorder,paypayreload,paypayResult} from '@/api/user.js'
	import {ref} from 'vue'
	export default {
		setup() {
			let state=ref(1)
			let orderlist=ref([])
			let pageNum=1
			let pageSize=10;
			function genggai(val){
				state.value=val
				dindan()
			}
			function dindan(){
				criticismorder({type:state.value,pageNum,pageSize}).then(res=>{
					console.log(res);
					orderlist.value=res.rows
					orderlist.value.map(item=>{
						item.price=item.price.split('.')[0]+'.'+item.price.split('.')[1].substring(0,2)
					})
				})
			}
			dindan()
			function godetalis(item){
				uni.navigateTo({
					url:'../orderdetails/orderdetails?id='+item.id
				})
			}
			function jiazai(){
				pageNum++
				criticismorder({type:state.value,pageNum,pageSize}).then(res=>{
					console.log(res);
					res.rows.map(item=>{
						item.price=item.price.split('.')[0]+'.'+item.price.split('.')[1].substring(0,2)
						orderlist.value.push(item)
					})
				})
			}
			function shuaxing(){
				pageNum=1
				dindan()
			}
			function zhifu(item){
				paypayreload({id:item.id}).then(res=>{
					console.log(res);
					if(res.msg=='该订单已经过期'){
						dindan()
						return
					}
					uni.navigateTo({
						url:'../payorder/payorder?id='+res.msg
					})
				})
			}
			function quxiao(item){
				uni.showModal({
					title: '提示',
					content: '确认取消订单？',
					success: function (res) {
						if (res.confirm) {
							paypayResult({id:item.id,orderStatus:5}).then(res=>{
								console.log(res);
								if(res.code==200){
									shuaxing()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			}
			return {
				state,
				genggai,
				godetalis,
				orderlist,
				jiazai,
				shuaxing,
				quxiao,
				zhifu
			}
		}
	}
</script>

<style lang="scss">
	.scv{
		height: 81vh;
	}
	.order_content{
		width: 100%;
		display: flex;
		flex-direction: column;
		// margin-top: 30upx;
		padding: 32upx;
		box-sizing: border-box;
		>view{
			width: 686upx;
			// height: 348upx;
			background: #23262F;
			border-radius: 12upx;
			opacity: 1;
			display: flex;
			flex-direction: column;
			margin-bottom: 24upx;
			.buttons{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding: 30upx;
				box-sizing: border-box;
				>view:nth-of-type(1){
					width: 188upx;
					height: 64upx;
					border-radius: 58upx;
					opacity: 1;
					border: 1upx solid #8D8C9F;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #8D8C9F;
					font-size: 28upx;
					font-weight: 500;
					margin-right: 30upx;
				}
				>view:nth-of-type(2){
					width: 188upx;
					height: 64upx;
					background: linear-gradient(351deg, #9735DC 0%, #570CDC 100%);
					border-radius: 58upx;
					opacity: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #FFFFFF;
					font-size: 28upx;
					font-weight: 500;
				}
			}
			>view:nth-of-type(1){
				padding:28upx 28upx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom:1upx solid #373737;
				>view{
					display: flex;
					font-size: 28upx;
					font-weight: 400;
					align-items: center;
					>view{
						font-size: 28upx;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}
			>view:nth-of-type(2){
				display: flex;
				padding: 36upx 28upx;
				flex: 1;
				width: 100%;
				box-sizing: border-box;
				>image{
					width: 190upx;
					height: 203upx;
					border-radius: 26upx;
					margin-right: 28upx;
				}
				>view{
					display: flex;
					flex-direction: column;
					box-sizing: border-box;
					>view:nth-of-type(1){
						font-size: 32upx;
						font-weight: bold;
						color: #FFFFFF;
					}
					>view:nth-of-type(2){
						flex: 1;
						width: 400upx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						>view:nth-of-type(1){
							display: flex;
							align-items: center;
							>image{
								width: 56upx;
								height: 56upx;
								border-radius: 50%;
								margin-right: 18upx;
							}
							>view{
								font-size: 28upx;
								font-weight: 400;
								color: #8D8C9F;
							}
						}
						>view:nth-of-type(2){
							font-size: 24upx;
							font-weight: bold;
							color: #FFFFFF;
						}
					}
					>view:nth-of-type(3){
						display: flex;
						align-items: center;
						justify-content: space-between;
						>view:nth-of-type(1){
							font-size: 24upx;
							font-weight: bold;
							color: #8D8C9F;
						}
						>view:nth-of-type(2){
							font-size: 32upx;
							font-weight: 400;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}
.zhuangtai{
	width: 686upx;
	display: flex;
	justify-content: space-between;
	margin: auto;
	padding-top: 60upx;
	position: sticky;
	top: 84upx;
	left: 0;
	background-color: #141417;
	z-index: 10;
	padding-bottom: 40upx;
	>view{
		display: flex;
		flex-direction: column;
		align-items: center;
		>view:nth-of-type(1){
			font-size: 32upx;
			font-weight: 500;
			color: #8D8C9F;
			margin-bottom: 10upx;
		}
		>view:nth-of-type(2){
			width: 34upx;
			height: 6upx;
			border-radius: 12upx;
		}
	}
}
</style>
