<template>
	<view class="">

		<u-navbar title="退款/售后" leftIconSize="0" @leftClick="leftClick" placeholder>
			<u-icon name="arrow-left" slot="left" color="#333333" size="24"></u-icon>
		</u-navbar>
		<view class="" style="z-index: 999;">
			<u-tabs :activeStyle="{
				fontSize: '28rpx',
				fontWeight: '600',
				color: '#21BBF3',
				lineHeight: '40rpx',
				zIndex:'99',
				
			}" :inactiveStyle="{
				fontSize: '28rpx',
				fontWeight: '400',
				color: '#333333',
				lineHeight: '40rpx',
				zIndex:'99',
				
			}" :current="indexa" lineColor='#21BBF3' :list="list2" @click="click"></u-tabs>
		</view>
		<only v-if="index==0" ref=one></only>
		<refund v-if="index==1" ref=two></refund>
		<returned v-if="index==2" ref=sui></returned>
		<Returnedret v-if="index==3" ref=four></Returnedret>
		<refuse v-if="index==4" ref=five></refuse>


		<succeeded v-if="index==5"></succeeded>
		<selectPopup ref="selectPopup"></selectPopup>
	</view>
</template>

<script>
	import selectPopup from "./select.vue"
	import only from "./only.vue"
	import refund from "./refund.vue"
	import returned from "./returned.vue"
	import Returnedret from "./Returnedret.vue"
	import refuse from "./refuse.vue"
	import succeeded from "./succeeded.vue"
	export default {
		components: {
			selectPopup,
			only,
			refund,
			returned,
			Returnedret,
			refuse,
			succeeded
		},
		data() {
			return {
				index: 0,
				indexa: 0,
				show2: false,
				show: false,
				show1: true,
				radiovalue1: '原路返回',
				radiolist1: [{
						name: '原路退款',

					},
					{
						name: '线下退款',

					},
				],

				list2: [{
						name: '全部'
					},
					{
						name: '处理中'
					},
					{
						name: '已同意'
					},
					{
						name: '已结束'
					},
					{
						name: '已拒绝'
					}
				],
				list: [{
						sex: 1
					},
					{
						sex: 1
					},
					{
						sex: 2
					},
					{
						sex: 3
					},
					{
						sex: 3
					},
					{
						sex: 1
					}
				]
			};
		},
		onLoad(e) {
			// console.log(typeof Number(e.st));
			if (e.st) {
				this.indexa = parseInt(e.st) - 1
			}
			uni.startPullDownRefresh();
			// setTimeout(()=>{
			// 	this.indexa=Number(e.st)
			// 	this.index=Number(e.st)
			// },500)
		},

		methods: {
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			leftClick() {
				uni.redirectTo({
					// url:this.list[this.current.URL]
					url: `/page_salesman_index/index/index`
				})
			},
			four(index) {
				console.log(index);
				this.indexa = index
			},
			click(index) {
				// console.log(index.index);
				console.log(typeof index.index);
				this.indexa = index.index
				this.index = index.index
			},

		},
		async onPullDownRefresh() {

			if (this.indexa == 0) {
				await this.$refs.one.getwrongtllisttwo()
			}
			if (this.indexa == 1) {
				await this.$refs.two.getwrongtllisttwo()
			}
			if (this.indexa == 2) {
				await this.$refs.sui.getwrongtllisttwo()
			}
			if (this.indexa == 3) {
				await this.$refs.four.getwrongtllisttwo()
			}
			if (this.indexa == 4) {
				await this.$refs.five.getwrongtllisttwo()
			}
			uni.stopPullDownRefresh();

		},
		async onReachBottom() {
			if (this.indexa == 0) {
				await this.$refs.one.getwrongtllistsui()
			}
			if (this.indexa == 1) {
				await this.$refs.two.getwrongtllistsui()
			}
			if (this.indexa == 2) {
				await this.$refs.sui.getwrongtllistsui()
			}
			if (this.indexa == 3) {
				await this.$refs.four.getwrongtllistsui()
			}
			if (this.indexa == 4) {
				await this.$refs.five.getwrongtllistsui()
			}
			// if(this.indexa==5){
			// 	await this.$refs.six.getwrongtllistsui()
			// }
			// if(this.indexa==6){
			// 	await this.$refs.seven.getwrongtllistsui()
			// }
		},

	}
</script>

<style lang="scss">
	.head {
		width: 750rpx;
		height: 50rpx;
	}

	.refuse {
		width: 540rpx;
		height: 300rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		box-sizing: border-box;
		position: fixed;
		top: 662rpx;
		left: 50%;
		transform: translateX(-50%);

		div:nth-child(1) {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
			line-height: 44rpx;
			margin-top: 40rpx;
		}

		div:nth-child(2) {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #585858;
			line-height: 44rpx;
			margin-top: 8rpx;
		}

		div:nth-child(3) {
			margin-top: 56rpx;

			div:nth-child(1) {
				width: 206rpx;
				height: 72rpx;
				border-radius: 40rpx;
				border: 2rpx solid #E8E8E8;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
				margin: 0 32rpx 0 42rpx;
			}

			div:nth-child(2) {
				width: 206rpx;
				height: 72rpx;
				background: #21BBF3;
				border-radius: 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 40rpx;
			}
		}
	}

	.original-road {
		width: 540rpx;
		height: 342rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		box-sizing: border-box;
		position: fixed;
		top: 662rpx;
		left: 50%;
		transform: translateX(-50%);

		.arr {
			margin: 0 !important;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 18rpx;
			}

			div {
				margin: 0 !important;

			}

			div:nth-child(1) {}

			.arr1 {
				margin-top: 0 !important;
			}

			.arr2 {
				margin-top: 16rpx !important;
			}
		}

		.bnt {
			margin-top: 38rpx;

			.bnt1 {
				width: 206rpx;
				height: 72rpx;
				border-radius: 40rpx;
				border: 2rpx solid #E8E8E8;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
				margin-top: 0;
				margin: 0 32rpx 0 48rpx;
			}

			.bnt2 {
				width: 206rpx;
				height: 72rpx;
				background: #21BBF3;
				border-radius: 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 40rpx;
			}
		}

		div:nth-child(1) {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
			line-height: 44rpx;
			margin-top: 40rpx;
		}

		.check {
			margin-top: 8rpx;
			margin-left: 194rpx;
		}




	}

	.Confirm-refund {
		width: 540rpx;
		height: 300rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		box-sizing: border-box;
		position: fixed;
		top: 662rpx;
		left: 50%;
		transform: translateX(-50%);

		div:nth-child(1) {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
			line-height: 44rpx;
			margin-top: 40rpx;
		}

		div:nth-child(2) {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #585858;
			line-height: 44rpx;
		}

		div:nth-child(3) {
			margin-top: 56rpx;

			div:nth-child(1) {
				width: 206rpx;
				height: 72rpx;
				border-radius: 40rpx;
				border: 2rpx solid #E8E8E8;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
				margin: 0 32rpx 0 42rpx;
			}

			div:nth-child(2) {
				width: 206rpx;
				height: 72rpx;
				background: #21BBF3;
				border-radius: 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 40rpx;
			}
		}
	}

	.head {
		width: 750rpx;
		height: 72rpx;
		margin-top: 16rpx;
	}

	.head div:nth-child(1) {
		position: relative;
		width: 612rpx;
		height: 72rpx;
		background: #F6F6F6;
		border-radius: 36rpx;
		margin-left: 30rpx;

		margin-right: 30rpx;

		input {

			background: #F6F6F6;
			border-radius: 36rpx;
			padding: 0 72rpx;

		}

		.placeholder {
			color: rgb(194, 194, 194);
		}

		.icon {
			margin-top: 16rpx;
			position: absolute;
			color: red;
			top: 4rpx;

			left: 30rpx;
			font-size: 32rpx;
		}
	}

	.body {
		width: 702rpx;
		height: 600rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		box-sizing: border-box;
		padding: 32rpx;

		.status {
			margin-top: 32rpx;
			float: right;

			.status-one {
				width: 176rpx;
				height: 60rpx;
				border-radius: 30rpx;
				border: 2rpx solid #E8E8E8;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 34rpx;
			}

			.status-two {
				width: 176rpx;
				height: 60rpx;
				border-radius: 30rpx;
				border: 2rpx solid #E8E8E8;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 34rpx;
				margin: 0 24rpx;
			}

			.status-three {
				width: 176rpx;
				height: 60rpx;
				background: #21BBF3;
				border-radius: 30rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 34rpx;
			}
		}
	}

	.body view:nth-child(1) {
		div:nth-child(1) {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 34rpx;
		}

		div:nth-child(2) {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 34rpx;

		}
	}

	.body view:nth-child(2) {
		width: 638rpx;
		height: 2rpx;
		background: #F2F2F2;
		border-radius: 16rpx;
		margin-top: 28rpx;
	}

	.body view:nth-child(3) {
		margin-top: 30rpx;

		div:nth-child(1) {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
		}

		div:nth-child(2) {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 40rpx;
			margin: 0 16rpx 0 42rpx;
		}

		div:nth-child(3) {

			background: #FFF0E2;
			border-radius: 4rpx;
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FF7D02;
			line-height: 28rpx;
			padding: 4rpx 6rpx 4rpx 6rpx;
		}
	}

	.body view:nth-child(4) {
		margin-top: 24rpx;

		div:nth-child(1) {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
			margin-right: 42rpx;
		}

		div:nth-child(2) {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 40rpx;
		}
	}

	.body view:nth-child(5) {
		margin-top: 24rpx;

		div:nth-child(1) {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 34rpx;
			margin-right: 14rpx;
		}

		div:nth-child(2) {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgb(57, 57, 57);
			line-height: 34rpx;
		}
	}

	.body view:nth-child(6) {
		width: 638rpx;
		height: 2rpx;
		background: #F2F2F2;
		border-radius: 16rpx;
		margin-top: 28rpx;
	}

	.body view:nth-child(7) {
		margin-top: 28rpx;

		div:nth-child(1) {
			width: 48rpx;
			height: 48rpx;
			background: linear-gradient(141deg, #86D8F5 0%, #00B2F2 100%);
			margin-right: 24rpx;

			image {
				width: 24rpx;
				height: 24rpx;
			}

		}

		div:nth-child(2) {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 40rpx;
		}

	}

	.body view:nth-child(8) {
		margin-top: 28rpx;

		div:nth-child(1) {
			div:nth-child(1) {
				width: 48rpx;
				height: 48rpx;
				background: linear-gradient(141deg, #FFAC73 0%, #FE6E0B 100%);

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}

			div:nth-child(2) {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
				margin-left: 24rpx;
			}
		}
	}
</style>