<template>
	<view>
		<view class="navTab">
			<u-search v-model='keyware' placeholder='请输入工具名称' bg-color='#FFFFFF' :actionStyle="customActionStyle"
				showAction="true" actionText="搜索" :animation="false" @custom='seacrhko'></u-search>
		</view>
		<view>
			<u-tabs-swiper ref="tabs" :list="ornamelist" :is-scroll="false" @change="tabsChange" :current="current"
				bg-color='transparent' active-color="#1578ED" inactive-color='#666666'>
			</u-tabs-swiper>
			<view style="font-weight: 500;font-size: 22rpx;color: #FD8A1A;padding-left: 15px;margin-top: 15px;"
				@click="goPcDetail">
				温馨提示：请登录PC端-工作台使用购买的工具 >></view>
			<div class="navTab">
				<view>
					<view class="prdertool" v-for="(item,key) of  currentoerderist" :key="key">
						<view class="oerdeh">
							<p>订单号：{{item.orderNumber}}</p>
							<p>{{ dateFormat(new Date(item.payTime)) }}</p>
						</view>
						<view style="display: flex;justify-content: space-between;margin-bottom:15px;">
							<view style="display: flex;align-items: center;align-items: center;">
								<!-- <img style="width:55px;height: 55px;margin-right: 5px;" src="http://image.keyitest.cn/static/my/25.png" alt=""> -->
								<img style="width:55px;height: 55px;margin-right: 5px;" :src="item.imgs" alt="">
								<view style="font-weight: bold;color: #1A1A1A;font-size:30rpx;">
									{{item.name}}
									<view v-if="item.priceType == 'month'"
										style="font-weight: 500;font-size: 22rpx;color: #999999;margin-top: 20rpx;">
										规格：使用时长(按月计)</view>
									<view v-if="item.priceType == 'time' || item.priceType == 'times'"
										style="font-weight: 500;font-size: 22rpx;color: #999999;margin-top: 20rpx;">
										规格：测试服务(按次计)</view>
									<view style="font-weight: 500;font-size: 22rpx;color: #999999;">数量：{{item.amount}} |
										交付方式：{{item.deliverType}}</view>
								</view>
							</view>
							<view style="margin-top: 30px; min-width: 150rpx; text-align: right;">
								<!-- <p style="font-size: 13px;color: #4D4D4D;">实付金额：</p> -->

								<view v-if="item.status == 0" style="color: #f4a42f;margin-bottom: 10rpx;">
									待支付
								</view>
								<view v-if="item.status == 1" style="color: #54be77;margin-bottom: 10rpx;">
									支付成功
								</view>
								<view v-if="item.status == 2" style="color: #ef6461;margin-bottom: 10rpx;">
									已取消
								</view>
								<view v-if="item.status == 3" style="color: #8593a3;margin-bottom: 10rpx;">
									已过期
								</view>
								<view style="display: flex;align-items: center;justify-content: flex-end;">
									<p style="font-weight: bold;font-size: 12px;color: #FD461A;margin-right:3px;">¥</p>
									<p style="font-size:18px;color: #FD461A;">{{item.fee}}</p>
								</view>
							</view>
						</view>
						<u-line color="rgba(153,153,153,0.2)" />
						<view class="submitt" v-if="item.status == 1 || item.status == 2 || item.status == 3">
							<!-- <view class="button-g"
								style="background:#FFFFFF;border: 1px solid #1578ED;color: #1578ED;margin-left:0"
								@click="delOrder(item)">删除订单</view> -->
							<view class="button-g" @click="againBug(item)">再次购买</view>
						</view>
						<view class="submitt" v-if="item.status == 0">
							<view class="button-g"
								style="background:#FFFFFF;border: 1px solid #1578ED;color: #1578ED;margin-left:0"
								@click="cancleOrder(item)">取消订单</view>
							<view class="button-g" @click="goPay(item)">去支付</view>
						</view>
					</view>
				</view>
				<view v-if="currentoerderist.length==0 &&current!=0" style="font-size:46rpx;
					font-weight: bold;
					color: #9D9D9D; text-align:center;margin-top:100px">暂无订单</view>
				<view style="height:10px;"></view>
			</div>
		</view>
		<u-toast ref="uToast" />

		<u-popup style="background:#66666;padding: 20px;" v-model="isPopupShow" @close="close" @open="open"
			mode="bottom" length="80%" height='60%' border-radius="15" :closeable='true' :mask-close-able="false">
			<view style="background:#66666;padding:15px 20px 80px 20px; ">
				<view style="background-color: #FFFFFF;">
					<view class="horizontalline"></view>
					<view>
						<view class="commodity">
							<p>商品名称：</p>
							<p style="color:#333333;">{{toolInfo.name}}</p>
						</view>
						<view class="commodity">
							<p>商品规格：</p>
							<u-input border style="width:60%;height: 40rpx;" v-model="typeName" type="select"
								@click="typeShow = true" />
							<u-select v-model="typeShow" :list="toolInfo.deliverType=='SaaS' ? typeList : typeList1"
								@confirm="citychange" mode="mutil-column-auto"></u-select>
						</view>
						<view class="commodity">
							<p>商品价格：</p>
							<p style="color:#333333;">￥{{toolInfo.price}}</p>
						</view>

						<view class="commodity">
							<p>购买数量：</p>
							<u-number-box v-model="cartnumber" @change="valChange"></u-number-box>
							<!-- <p style="color:#333333 ;">Kinterface接口测试工具-软件版</p> -->
						</view>
						<view class="commodity">
							<p>支付金额：</p>
							<p style="color:#FD461A;margin-top: -3px;">
								<span>¥ </span>
								<span style="font-size:40rpx;margin-left:10rpx;font-weight: 800;">{{allpirse}}</span>
							</p>
						</view>
					</view>
				</view>
			</view>
			<u-line></u-line>
			<view class="submitt22"
				style="display: flex;justify-content: center; ;box-shadow:none;background: transparent;padding:0;">
				<view class="button-g11"
					style="width:80vw; background: linear-gradient(90deg, #5EA6FD, #1A81F9);color: #FFFFFF">支付</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		dateFormat
	} from '@/utils/util.js'
	// 订单状态   0未支付   1已支付
	export default {
		data() {
			return {
				keyware: '',
				current: '0',
				ornamelist: [{
						name: '全部'
					}, {
						name: '待支付'
					},
					{
						name: '已取消'
					}, {
						name: '已完成'
					}
				],
				customActionStyle: {
					color: '#808080', // 按钮颜色
					fontSize: '16px' // 按钮字体大小
					// 其他样式属性
				},
				orderlist: [],
				currentoerderist: [],
				// 弹窗
				isPopupShow: false,
				cartnumber: 1,
				typeShow: false,
				typeName: '使用时长(按月计)',
				typeList: [{
					value: '测试服务(按次计)',
					label: '测试服务(按次计)'
				}, {
					value: '使用时长(按月计)',
					label: '使用时长(按月计)'
				}],
				typeList1: [{
					value: '使用时长(按月计)',
					label: '使用时长(按月计)'
				}],
				allpirse: 0,
				toolInfo: {}
			}
		},
		onLoad: function(option) {
			this.current = option.current;
			this.http.quickGet('/my/order?pageNum=1&pageSize=100', true).then(res => {
				this.orderlist = res.data.rows
				this.orderlist.forEach(item => {
					item.imgs = this.http.baseUrl + item.img
				})
				if (this.current == 0) {
					this.currentoerderist = this.orderlist
				} else if (this.current == 1) {
					this.currentoerderist = this.orderlist.filter(it => it.status == 0)
				} else if (this.current == 3) {
					this.currentoerderist = this.orderlist.filter(it => it.status == 1)
				} else if (this.current == 2) {
					this.currentoerderist = this.orderlist.filter(it => it.status == 2)
				}
			})


		},
		methods: {
			dateFormat,
			goPcDetail() {
				uni.navigateTo({
					url: '/pages/personal/setup/guide'
				})
			},
			tabsChange(index) {
				if (index == 0) {
					this.currentoerderist = this.orderlist
				} else if (index == 1) {
					this.currentoerderist = this.orderlist.filter(it => it.status == 0)
				} else if (index == 3) {
					this.currentoerderist = this.orderlist.filter(it => it.status == 1)
				} else if (index == 2) {
					this.currentoerderist = this.orderlist.filter(it => it.status == 2)
				}
				// this.currentoerderist = this.orderlist.filter(item => item.status == index - 1);
				this.current = index
			},
			shopping(type) {
				if (type == 'cart') {
					this.$refs.uToast.show({
						title: '功能暂未开通',
						type: 'info',
						url: '/pages/user/index'
					})
				}
			},
			seacrhko() {
				const str = this.keyware ? `&projectName=${this.keyware}` : ''
				this.http.quickGet('/my/order?pageNum=1&pageSize=100' + str, true).then(res => {
					this.orderlist = res.data.rows
					this.orderlist.forEach(item => {
						item.imgs = this.http.baseUrl + item.img
					})
					if (this.current == 0) {
						this.currentoerderist = this.orderlist
					} else if (this.current == 1) {
						this.currentoerderist = this.orderlist.filter(it => it.status == 0)
					} else if (this.current == 3) {
						this.currentoerderist = this.orderlist.filter(it => it.status == 1)
					} else if (this.current == 2) {
						this.currentoerderist = this.orderlist.filter(it => it.status == 2)
					}
				})
			},
			close() {
				this.isPopupShow = false
			},
			open() {},
			citychange(e) {
				this.typeName = e[0].label
			},
			valChange(e) {
				this.allpirse = e.value * this.toolInfo.price
			},
			// 删除订单
			delOrder(item) {
				// const data = {
				// 	orderNumber: item.orderNumber,
				// }
				// this.http.quickPost(`/play/cancel_play`, data, true).then(res => {
				// 	if (res.retcode == 'SUCCESS') {
				// 		this.http.quickGet('/my/order?pageNum=1&pageSize=999', true).then(res => {
				// 			this.orderlist = res.data.rows
				// 			this.orderlist.forEach(item => {
				// 				item.imgs = this.http.baseUrl + item.img
				// 			})
				// 			if (this.current == 0) {
				// 				this.currentoerderist = this.orderlist
				// 			} else if (this.current == 1) {
				// 				this.currentoerderist = this.orderlist.filter(it => it.status == 0)
				// 			} else if (this.current == 2) {
				// 				this.currentoerderist = this.orderlist.filter(it => it.status == 2)
				// 			} else if (this.current == 3) {
				// 				this.currentoerderist = this.orderlist.filter(it => it.status == 1)
				// 			}
				// 		})
				// 	}
				// })
			},
			// 再次购买 tioazhuan
			againBug(item) {
				uni.navigateTo({
					url: `/pages/index/toolleasing/tooldetails?id=${item.toolId}`
				})


			},
			// 取消订单
			cancleOrder(item) {
				const data = {
					orderNumber: item.orderNumber,
				}
				this.http.quickPost(`/play/cancel_play`, data, true).then(res => {
					if (res.retcode == 'SUCCESS') {
						this.http.quickGet('/my/order?pageNum=1&pageSize=999', true).then(res => {
							this.orderlist = res.data.rows
							this.orderlist.forEach(item => {
								item.imgs = this.http.baseUrl + item.img
							})
							if (this.current == 0) {
								this.currentoerderist = this.orderlist
							} else if (this.current == 1) {
								this.currentoerderist = this.orderlist.filter(it => it.status == 0)
							} else if (this.current == 2) {
								this.currentoerderist = this.orderlist.filter(it => it.status == 2)
							} else if (this.current == 3) {
								this.currentoerderist = this.orderlist.filter(it => it.status == 1)
							}
						})
					}
				})
			},
			// 去支付
			goPay(item) {
				const that = this
				const data = {
					orderNumber: item.orderNumber,
					payType: 'W06'
				}
				this.http.quickPost(`/play/wait_play`, data, true).then(res => {
					const info = JSON.parse(res.data.payinfo)
					uni.requestPayment({
						timeStamp: info.timeStamp,
						nonceStr: info.nonceStr,
						package: info.package,
						signType: info.signType,
						paySign: info.paySign,
						success(r) {
							uni.showToast({
								icon: 'none',
								title: '支付成功，请前往pc端工作台使用'
							})
							that.current = 0
							that.http.quickGet('/my/order?pageNum=1&pageSize=100', true).then(res => {
								that.orderlist = res.data.rows
								that.orderlist.forEach(item => {
									item.imgs = that.http.baseUrl + item.img
								})
								if (that.current == 0) {
									that.currentoerderist = that.orderlist
								} else if (that.current == 1) {
									that.currentoerderist = that.orderlist.filter(it => it
										.status == 0)
								} else if (that.current == 2) {
									that.currentoerderist = that.orderlist.filter(it => it
										.status == 2)
								} else if (that.current == 3) {
									that.currentoerderist = that.orderlist.filter(it => it
										.status == 1)
								}
							})
						},
						fail(error) {
							console.log(error);
							uni.showToast({
								icon: 'none',
								title: '支付失败'
							})
						}
					})
				})

			},
		}
	}
</script>

<style>
	.navTab {
		padding: 13px 15px;
	}

	.prdertool {
		padding: 28rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 13px;
	}

	.oerdeh {
		display: flex;
		justify-content: space-between;
		color: #808080;
		font-size: 23rpx;
		margin-bottom: 13px;
	}

	.submitt {
		/* height:70px; */

		font-size: 20px;
		margin-top: 15px;
		display: flex;
		justify-content: flex-end;
	}

	.button-g {
		width: 170rpx;
		height: 58rpx;
		background: linear-gradient(90deg, #5EA6FD, #1A81F9);
		border-radius: 88rpx;
		text-align: center;
		line-height: 58rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		margin-left: 13px;
	}

	.button-g11 {
		width: 540rpx;
		height: 70rpx;
		background: linear-gradient(90deg, #FF8600, #FE2B2B);
		border-radius: 35rpx;
		text-align: center;
		line-height: 70rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		margin-left: 13px;
	}

	.commodity {
		display: flex;
		color: #808080;
		font-size: 30rpx;
		margin: 20px 0;
	}

	.commodity>>>input {
		min-height: 40rpx !important;
	}

	.submitt22 {
		height: 60px;
		/* line-height: 55px; */
		/* text-align: center; */
		font-size: 20px;
		background: #FFFFFF;
		box-shadow: -4px 7px 18px 0px rgba(248, 164, 54, 0.33);
		margin-top: 60px;
		position: fixed;
		bottom: 0;
		width: 100vw;
		padding: 10px 30px;
		display: flex;
	}
</style>