<template>
	<!-- 退款 -->
	<view class="refund">
		<view class="refundBox">
			<view class="refundBoxA">
				<image src="../../static/avatar.png"
					style="width: 86rpx;height: 86rpx;border-radius: 12rpx 12rpx 12rpx 12rpx;" mode=""></image>
				<view>
					【辣与不辣随心选】汉堡3选1MT19
				</view>
			</view>
			<view style="width: 100%;height: 2rpx;background-color: #E6E6E6;margin-top: 18rpx;"> </view>
			<view class="refundBoxB">
				<view>
					退款数量
				</view>
				<view>
					最多可退1张
				</view>
				<!-- 计步器 -->
				<u-number-box class="Unumber" v-model="Unumbervalue" style="position: absolute;right: 20rpx;"
					:disabled="true"></u-number-box>
			</view>
			<view style="width: 100%;height: 2rpx;background-color: #E6E6E6;margin-top: 32rpx;"> </view>
			<view class="refundBoxC">
				<view>
					退款金额
				</view>
				<view>
					1-3 个工作日退还至原支付方，以实际退款金额为准
				</view>
				<view>$9.9</view>
			</view>
			<view style="width: 100%;height: 2rpx;background-color: #E6E6E6;margin-top: 32rpx;"> </view>
			<view class="refundBoxD">
				<view>退款原因 <text style="color: #FF4C11;">*</text> </view>
				<view class="as-input" @click="openFood">
					<view class="placeholder" v-if="fruitName==undefined||fruitName==''">请至少选择一项</view>
					<view class="as-content" v-else>{{fruitName}}</view>
					<!-- <uni-icons type="forward" size="16" color="#c0c4cc" class="customer-icon"></uni-icons> -->
					<u-icon name="arrow-right" color="#666666" size="16"></u-icon>
				</view>
			</view>
			<view style="width: 100%;height: 2rpx;background-color: #E6E6E6;margin-top: 32rpx;"> </view>
			<view class="refundBoxE">
				<view>退款说明 </view>
				<textarea placeholder-style="font-size: 24rpx;color: #999999;" @input="sumfontnum" :value='tareaValue'
					placeholder="请输入退款说明，我们将用心倾听你的任何不满" name="" id="" maxlength="200" cols="30" rows="10"
					style="padding: 16rpx 26rpx;margin-top: 16rpx;border: solid 2rpx #999;border-radius: 18rpx 18rpx 18rpx 18rpx;"></textarea>
				<view class="Unumberxz"><text>{{fontNum}}</text>/200</view>
			</view>
		</view>
		<view class="buttonBox">
			<button class="buttonStyle">
				提交订单
			</button>
		</view>
		<niceui-popup-select ref="showFruit" :columns="foods" :selectValue="fruitId" :is-search="false"
			:option="{label:'name', value:'id'}" @confirm="confirmFruit"></niceui-popup-select>
	</view>
</template>

<script>
	import '../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
	export default {
		data() {
			return {
				Unumbervalue: 1,
				tareaValue: '',
				fontNum: 0,
				foods: [{
						id: '1',
						name: '计划有变没时间消费'
					},
					{
						id: '2',
						name: '买多了/买错了'
					},
					{
						id: '3',
						name: '担心安全问题（天气等）'
					}, {
						id: '3',
						name: '担心安全问题（天气等）'
					}, {
						id: '3',
						name: '担心安全问题（天气等）'
					}, {
						id: '3',
						name: '担心安全问题（天气等）'
					}, {
						id: '3',
						name: '担心安全问题（天气等）'
					},
				],
				fruitId: [],
				fruitName:''
			}
		},
		methods: {
			// 限制文本框字数
			sumfontnum(e) {
				console.log(e)
				this.fontNum = e.detail.value.length
			},
			confirmFruit(value, data) {
				this.fruitId = value
				this.fruitName = data.map(it => it.name)
				this.$refs.showFruit.closePopup()
			},

			openFood() {
				this.$refs.showFruit.showPopup()
			},
		}
	}
</script>

<style lang="less" scoped>
	.refundBox {
		background-color: #fff;
		padding: 32rpx 64rpx;

		.refundBoxA {
			.df(flex-start, stretch);

			>view {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
		}

		.refundBoxB {
			position: relative;

			>view:first-child {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				margin-top: 16rpx;
			}

			>view:nth-child(2) {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				margin-top: 16rpx;
			}

			.Unumber {

				// transform: translateY(-50%);
			}
		}

		.refundBoxC {
			position: relative;

			>view:first-child {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				margin-top: 16rpx;
			}

			>view:nth-child(2) {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				margin-top: 16rpx;
			}

			>view:last-child {
				position: absolute;
				right: 0rpx;
				top: 20rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FF4C11;
			}
		}

		.refundBoxD {
			.df(space-between);
			// margin-top: 32rpx;
			padding-top: 32rpx;

			>view:first-child {
				.df;
				width: 160rpx;
				font-weight: 500;
				font-size: 28rpx;
			}

			>view:last-child {
				// .df();
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
			}
		}

		.refundBoxE {
			margin-top: 32rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			position: relative;

			.Unumberxz {
				position: absolute;
				right: 40rpx;
				bottom: 14rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;

				>text {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}

	.buttonBox {
		width: 100%;
		height: 136rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		// .df(center,center);

		.buttonStyle {
			margin-left: 50%;
			margin-top: 40rpx;
			transform: translateX(-50%);
			width: 712rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			background: linear-gradient(110deg, #F1A666 0%, #FF4C11 100%);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;
		}
	}

	.df(@start: flex-start, @position: center) {
		// @start:     flex-start(默认)     space-between(两端对齐)     space-around(间隔相等)
		// @position:stretch(默认) center(垂直居中)
		display: flex;
		align-items: @position;
		justify-content: @start;
	}
</style>
<style>
	/deep/ .u-number-box {
		position: absolute;
		right: 0;
		top: 30%;
	}

	radio-group,
	checkbox-group {
		width: 92%;
	}
</style>
<style lang="scss" scoped>
	.content {
		background-color: #f7f7f7;
		width: 100vw;
		height: 100vh;

	}

	.uni-title {
		font-size: 33rpx;
		font-weight: bold;
		padding: 20rpx 20rpx;
	}

	.uni-list-cell {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 20rpx;

		.uni-list-cell-left {
			font-size: 35rpx;
		}
	}

	.uni-list-cell-db {
		flex: 1
	}

	.as-input {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.customer-icon {
			padding: 0 0 0 5rpx;
		}

		.placeholder {
			font-size: 33rpx;
			color: #999;
		}

		.as-content {
			color: #333;
			font-size: 33rpx;
		}
	}
</style>