<template>
	<!-- 废弃 -->
	<view class="pt10" style="padding-bottom: 150rpx;">
		<template v-if="type == 0">
			<view class="order-item">
				<view class="order-title d-s-c">订单编号: WB1656325666232</view>
				<view class="order-product-list">
					<view class="order-product-item" v-for="(item, index) in 2" :key="index">
						<view class="f24 gray9 mb20">HZS123456</view>
						<view class="d-b-c mb20">
							<view class="f28 gray3 flex-1">氢氧水杯</view>
							<view class="f28 gray9">
								<text class="f22">X</text>
								2
							</view>
						</view>
						<view class="f24 gray9 mb20">蓝色，500ml</view>
						<view class="d-b-c">
							<view class=" f32 price-color">
								<text class="f24">{{currencyIcon()}}</text>
								3960.00
							</view>
							<view class="f24 gray9">PV:1000</view>
							<view class="f24 gray9">BV:1000</view>
						</view>
					</view>
				</view>
				<view class="p-20-0">
					<view class="mb20 d-b-c">
						<view class="order-label-name flex-1">邮费({{currencyIcon()}})</view>
						<view class="order-label-content">100.00</view>
					</view>
					<view class="mb20 d-b-c">
						<view class="order-label-name flex-1">商品总价({{currencyIcon()}})</view>
						<view class="order-label-content">100.00</view>
					</view>
					<view class="mb20 d-b-c">
						<view class="order-label-name flex-1">商品业绩(pv)</view>
						<view class="order-label-content">100.00</view>
					</view>
				</view>
			</view>
			<view>
				<view class="f30 product-list-title d-b-c bg-white">
					<view class="gray6">列表</view>
					<view class="domation">添加</view>
				</view>
				<view class="exchange-product-item d-b-s">
					<view class="radio-check checked d-c-c"><u-icon name="checkbox-mark" color="#fff"
							size="26rpx"></u-icon></view>
					<view class="flex-1">
						<view class="d-b-c exchange-product-name border-b mb20">
							<view class="flex-1">氢氧水杯</view>
							<view class="icon iconfont icon-jiantou"></view>
						</view>
						<view class="exchange-orderid">HZS1656325666232</view>
						<view class="p-30-0 d-b-c border-b">
							<view>蓝色 500ml</view>
							<view class="icon iconfont icon-jiantou"></view>
						</view>
						<view class="d-b-c mt20">
							<view class="counter-box">
								<view class="d-c-c counter-add"><u-icon name="minus" size="26rpx" color="#666"></u-icon>
								</view>
								<view class="counter-num">1</view>
								<view class="d-c-c counter-add"><u-icon name="plus" size="26rpx" color="#666"></u-icon>
								</view>
							</view>
							<u-icon width="34rpx" height="36rpx" name="/static/icon/product/cart-delete.png"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-if="type == 1">
			<view class="form-group">
				<view class="form-item">
					<view class="form-label">
						<text class="domation mr10">*</text>
						联系方式
					</view>
					<input class="form-input" type="text" value="" placeholder="请输入" />
				</view>
				<picker :range="list" @change="changeCardType" range-key="cardName">
					<view class="form-item">
						<view class="form-label">
							<text class="domation mr10">*</text>
							换货原因
						</view>
						<input class="form-input" disabled type="text"
							:value="card_index == -1 ? '请选择' : list[card_index].cardName" placeholder="" />
						<text class="icon iconfont icon-jiantou"></text>
					</view>
				</picker>
				<view class="form-upload">
					<view class="form-upload-name">
						<text class="domation mr10">*</text>
						法人身份证正反面
					</view>
					<view class="form-upload-tips">建议:图片大小为1MB以内</view>
					<view class="d-s-c f-w">
						<view>
							<image class="upload-add" src="/static/icon/upload-add.png" mode=""></image>
							<!-- <image class="upload-add" src="/static/icon/upload-add.png" mode=""></image> -->
						</view>
					</view>
					<view class="form-upload-tips2">
						<view>支持：jpg,png</view>
						<view>建议：上传图片不要光线太暗</view>
						<view>要清晰不能虚化，并且满画布显示，要保证亮要充足</view>
					</view>
				</view>
			</view>

		</template>
		<view class="order-btns-nav">
			<template v-if="type == 0">
				<button class="order-btn border-btn">取消</button>
				<button class="order-btn" @click="type = 1">下一步</button>
			</template>
			<template v-else>
				<button class="order-btn border-btn" @click="type = 0">上一步</button>
				<button class="order-btn" @click="isPopup = true">下一步</button>
			</template>
		</view>
		<Popup :show="isPopup" width="665" :padding="0" @hidePopup="hidePopupFunc">
			<view class="d-e-c ww100">
				<view class="p20" @click="hidePopupFunc(true)"><text class="icon iconfont icon-guanbi"></text></view>
			</view>
			<view class="ww100 box-s-b" style="padding: 0 60rpx;">
				<view class="d-s-c" style="margin-bottom: 10rpx;">
					<u-icon name="checkmark-circle-fill" color="#333333" size="38rpx"></u-icon>
					<text class="ml20 fb f30">提交成功</text>
				</view>
				<view class="f24 gray6 line-h-2">我们将在24小时内完成业务受理！具体进度将会以 短信通知形式发送您，请注意查收！</view>
				<view class="f24 gray6 line-h-2 mb40">售后电话：400-0000-8888</view>
				<button class="s-pop-btn">确认</button>
			</view>
		</Popup>
	</view>
</template>

<script>
	import Popup from '@/components/uni-popup.vue';
	export default {
		components: {
			Popup
		},
		data() {
			return {
				type: 0,
				list: [],
				card_index: -1,
				isPopup: false
			};
		},
		methods: {
			changeCardType(e) {},
			hidePopupFunc() {
				this.isPopup = false;
			}
		}
	};
</script>

<style lang="scss">
	.icon.icon-guanbi {
		font-size: 24rpx;
		color: #999;
	}

	.s-pop-btn {
		width: 462rpx;
		height: 78rpx;
		background: #fb3024;
		border-radius: 39rpx;
		text-align: center;
		line-height: 1.2;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #fff;
		margin: 0 auto;
		margin-bottom: 68rpx;
	}

	.order-item {
		padding: 0 23rpx;
		background-color: #fff;
		margin-bottom: 24rpx;

		.order-title {
			height: 84rpx;
			font-size: 22rpx;
			color: #999;
			border-bottom: 1rpx solid #eee;
		}

		.order-product-list {
			padding-top: 20rpx;

			.order-product-item {
				margin-bottom: 20rpx;
				width: 704rpx;
				background-color: #f5f5f5;
				padding: 30rpx 22rpx 27rpx 22rpx;
				box-sizing: border-box;
			}

			border-bottom: 1rpx solid #eee;
		}
	}

	.order-label-name {
		font-size: 26rpx;
		color: #333;
	}

	.order-label-content {
		font-size: 26rpx;
		color: #999;
	}

	.product-list-title {
		height: 92rpx;
		padding: 0 23rpx 0 26rpx;
		border-bottom: 1rpx solid #eee;
	}

	.exchange-product-item {
		background-color: #fff;
		margin-bottom: 6rpx;
		padding: 20rpx 22rpx 30rpx 24rpx;
	}

	.radio-check {
		width: 34rpx;
		height: 34rpx;
		background: #ffffff;
		border: 1rpx solid #dddddd;
		border-radius: 50%;
		box-sizing: border;
		position: relative;
		margin-right: 25rpx;
		margin-top: 30rpx;
		flex-shrink: 0;
	}

	.radio-check.checked {
		border: 1rpx solid #fb3024;
		background: #fb3024;
	}

	.exchange-product-name {
		padding: 30rpx 0;
		font-size: 28rpx;
		color: #333;
	}

	.icon.icon-jiantou {
		font-size: 28rpx;
		color: #999;
	}

	.exchange-orderid {
		width: 644rpx;
		height: 68rpx;
		background: #f5f5f5;
		padding: 0 23rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		color: #999;
	}

	.counter-box {
		width: 168rpx;
		height: 50rpx;
		border-radius: 30rpx;
		border: 1rpx solid #eeeeee;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #333;
	}

	.counter-num {
		height: 50rpx;
		min-width: 56rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
		border-left: 1rpx solid #eeeeee;
		border-right: 1rpx solid #eeeeee;
		line-height: 50rpx;
		text-align: center;
	}

	.counter-add {
		height: 50rpx;
		width: 56rpx;
		flex-shrink: 0;
		font-size: 26rpx;
		color: #666;
		font-weight: bold;
	}

	.order-btns-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 96rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 0 23rpx;
		background-color: #ffffff;
		z-index: 20;
		border-top: 1rpx solid #eee;
	}

	.order-btn {
		min-width: 152rpx;
		padding: 0 28rpx;
		box-sizing: border-box;
		height: 56rpx;
		border-radius: 30rpx;
		line-height: 56rpx;
		background: #fb3024;
		font-size: 26rpx;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
		margin-left: 23rpx;
	}

	.order-btn.border-btn {
		background: #3d3d3d;
		color: #fff;
	}

	.form-upload {
		padding: 30rpx 23rpx;
	}

	.form-upload-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
	}

	.form-upload-tips {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 20rpx;
	}

	.form-upload-tips2 {
		font-size: 24rpx;
		color: #fb3024;
		line-height: 1.5;
	}

	.form-group {
		padding: 0 22rpx;
		background: #ffffff;

		.form-item {
			min-height: 104rpx;
			box-sizing: border-box;
			padding: 15rpx 0;
			line-height: 1.5;
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: 1rpx solid #eee;

			.icon-jiantou {
				font-size: 32rpx;
				color: 090000;
			}

			.form-tips {
				font-size: 24rpx;
				color: #999;
			}

			.form-label {
				width: 255rpx;
				flex-shrink: 0;
				word-break: break-all;
				margin-right: 20rpx;
			}

			.disabled-input {
				width: 450rpx;
				height: 78rpx;
				padding: 0 18rpx;
				line-height: 78rpx;
				background: #eee;
				font-size: 28rpx;
				color: #333;
				flex: 1;
			}

			.form-textarea {
				width: 450rpx;
				padding: 0 18rpx;
				line-height: 1.5;
				font-size: 28rpx;
				color: #333;
				flex: 1;
				background: #fff;
			}

			.form-input {
				width: 450rpx;
				height: 78rpx;
				padding: 0 18rpx;
				line-height: 78rpx;
				background: #fff;
				font-size: 28rpx;
				color: #333;
				flex: 1;
			}

			.form-item:last-child {
				border: none;
			}
		}
	}

	.upload-add {
		width: 142rpx;
		height: 142rpx;
		margin-right: 18rpx;
		margin-bottom: 18rpx;
	}
</style>