<template>
	<view>
		

		
		<view class="body" v-for="(item,index) in list" :key="index" @click="btn">
			<view class="df jcsb">
				<div>2022090120001</div>
				<div class="df">
					08-12 18:12:21发起退款
					<image style="width: 28rpx;height: 28rpx;" :src="$util.img(`/upload/weapp/pageSalesman/reportForm/renovate.png`)"></image>
				</div>
			</view>
			<view class=""></view>
			<view class="df">
				<div>客户名称</div>
				<div>好大夫诊所</div>
				<div class="df aic jcsa">私人医院</div>
			</view>
			<view class="df">
				<div>下单时间</div>
				<div>2021-09-12 18:20:21</div>
			</view>
			<view class="df">
				<div>
					合计1种商品,
				</div>
				<div>退款金额￥1000</div>
			</view>
			<view class=""></view>
			<view class="df">
				<div class="df aic jcsa">
					<image :src="$util.img(`/upload/weapp/pageSalesman/reportForm/suona.png`)" mode=""></image>
				</div>
				<div class="df aic">药品潮湿退货</div>
			</view>
			<view class="df jcsb">
				<div class="df">
					<div class="df aic jcsa">
						<image :src="$util.img(`/upload/weapp/pageSalesman/reportForm/rectangle.png`)" mode=""></image>
					</div>
					<div class="df aic">
						点击添加备注
					</div>
				</div>
				<div>
					<u-icon name="arrow-right"></u-icon>
				</div>
			</view>
			<view class="df status" v-if="item.sex==1">
				<div class="status-one df aic jcsa" @click="show2=true">拒绝退款</div>
				<div class="status-two df aic jcsa" @click="show=true">同意退款</div>
				<div class="status-three df aic jcsa" @click="customer">联系顾客</div>
			</view>
			<view class="df status" v-if="item.sex==2">
				<div class="status-three df aic jcsa">提醒退货</div>
			</view>
			<view class="df status" v-if="item.sex==3">
				<div class="status-two df aic jcsa">查看物流</div>
				<div class="status-three df aic jcsa">完成退款</div>
			</view>
		</view>
		<u-overlay :show="show" @click="show = false">
			<view class="Confirm-refund">
				<div class="df aic jcsa">提示</div>
				<div class="df aic jcsa">确认同意退款吗？</div>
				<div class="df">
					<div class="df aic jcsa" @click="show=false">取消</div>
					<div class="df aic jcsa" @click="show1=true">同意</div>
				</div>
			</view>
		</u-overlay>
		<u-overlay :show="show1">
			<view class="original-road">
				<div class="df aic jcsa">提示</div>
				<div v-for="(item,index) in radiolist1" :key="index">
					<div class="arr df aic jcsa" @click="four(index)">
						<div class="df aic jcsa arr2" > 
							<image v-if="index==indexa" :src="$util.img(`/upload/weapp/user/gou.png`)" mode=""></image>
							<image v-else :src="$util.img(`/upload/weapp/user/un_gou.png`)" mode=""></image>
							<div class="df aic arr1">
								<text>{{item.name}}</text>
							</div>
						</div>
						
					</div>
				</div>
				<div class="df bnt">
					<div class="df aic jcsa bnt1"   @click="show1 = false">取消</div>
					<div class="df aic jcsa bnt2" @click="show1=true">同意</div>
				</div>
			</view>
		</u-overlay>
		<u-overlay :show="show2">
			<view class="refuse">
				<div class="df aic jcsa">提示</div>
				<div class="df aic jcsa">确认拒绝退款吗?</div>
				<div class="df">
					<div class="df aic jcsa"  @click="show2 = false">取消</div>
					<div class="df aic jcsa" >同意</div>
				</div>
			</view>
			
			
			
		</u-overlay>
		<selectPopup ref="selectPopup"></selectPopup>
	</view>
</template>

<script>
	import selectPopup from "./select.vue"
	export default {
		components: {
			selectPopup
		},
		data() {
			return {
				indexa:0,
				show2: false,
				show: false,
				show1: false,
				radiovalue1: '原路返回',
				radiolist1: [{
					 name: '原路退款',
					
					},
					{
						name: '线下退款',
						
					},
				],
				
				list2: [{
						name: '仅退款'
					},
					{
						name: '退货退款'
					},
					{
						name: '待退货'
					},
					{
						name: '已退货'
					},
					{
						name: '拒绝退款'
					}
				],
				list: [{
						sex: 4
					},
					{
						sex: 4
					}
				]
			};
		},
		methods: {
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			four(index){
				this.indexa=index
			},
			customer(){
				uni.navigateTo({
					url: '/pages_tool/news/news'
				})
			},
			btn(){
				uni.navigateTo({
					url: '/page_salesman_index/Order_details/Order_details?sex=5'
				})
			}
		}
	}
</script>

<style lang="scss">
	.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;
		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>
