<!-- 过程反馈 -->
<template>
	<view class="refuse-box bg">
		<u-navbar back-icon-color="#FFFFFF" :background="background" title-color="#fff" :border-bottom="false"></u-navbar>
		<view class="title">拒单说明</view>
		<view class="content">
			<view class="con-box">
				<view class="tit u-m-b-40  u-flex"><text class="txt label">※</text>{{refuse.title}}</view>
				<view class="u-flex u-flex-wrap">
					<view 
						:class="{
							'txt-item':true,
							'active': (formData.rejectReason == txt)}" 
							v-for="(txt,index) in refuse.list" 
							:key="index" @click="changeReason(txt)">
						<text class="txt">{{txt}}</text>
					</view>
				</view>
			</view>
			<view class="con-box" style="padding-top: 10rpx;">
				<view class="tit  u-m-b-20">补充说明</view>
				<u-input v-model="formData.remark" class="textarea" height="156" type="textarea" placeholder="请补充详细说明，以便于记录您的接单信用分" :clearable="false"></u-input>
			</view>
			
		</view>
		<view class="bottom-btn-view">
			<button :loading="submiting" :disabled="disabledSubmit" class="btn bottom-btn" @click="handleClickSubmit"><text class="button-text">提交</text></button>
		</view>
		<PopView title="拒单提示" message="确定“拒单”操作，将影响对您的派单频率，\n甚至进入黑名单，请谨慎操作"
		 :visible.sync="visibale" :count="count" @click="handleClick" buttonText="确定"/>
	</view>
</template>

<script>
	import PopView from "@/components/popView/index.vue"
	export default {
		data() {
			return {
				visibale: false,
				orderId: '',
				submiting: false,
				background: {
					backgroundColor: 'none',
				},
				refuse:{
					title:'拒单原因',
					list:['时间不匹配', '技术不匹配', '价格过低', '距离太远', '其他'],
				},
				formData: {
					rejectReason: '',
					remark: ''
				},
				count: 0, // 剩余次数
			};
		},
		computed: {
			disabledSubmit() {
				return !this.formData.rejectReason
			}
		},
		components:{
			PopView
		},
		onLoad(e) {
			getApp().trackPage('订单拒单页')
			if(e && e.orderId) {
				this.orderId = e.orderId
				if(e.count) {
					this.count = e.count
				} else {
					this.getRejectCount()
				}
			} else {
				this.$u.toast("本月无拒单机会，请联系客服")
			}
		},
		methods: {
			changeReason(reason) {
				this.formData.rejectReason = reason
			},
			getRejectCount() {
				let self = this
				// 获取拒单次数
				self.$u.api.checkRejectable({}).then(res => {
					if (res.code === 200 && res.data && res.data.rejectable) {
						self.count = res.data.remainderTimes
					} else {
						self.count = 0
					}
				})
			},
				
			handleClickSubmit() {
				if(!this.orderId) {
					uni.showToast({
						icon: 'none',
						title: '订单ID不能为空',
					})
					return
				}
				if (this.count > 0) {
					this.visibale = true
				} else {
					uni.showToast({
						icon: 'none',
						title: '本月无拒单机会，请联系客服',
					})
				}
			},
			handleClick() {
				this.visibale = false
				this.submitForm()
			},
			async submitForm() {
				let self = this
				self.submiting = true
				let res = await self.$u.api.rejectOrder(self.formData, self.orderId)
				self.submiting = false
				if(res && res.code == 200) {
					self.$u.toast({title: res.message || res.data || '拒单成功'})
					self.$u.route({type: 'reLaunch', url: 'pages/index/index'})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 750rpx;
		height: 100vh;
		overflow: auto;
		background-color: #F4F5F7;
		background-image: linear-gradient(to top, #F4F5F7 0%, #2272FF 50%);
		background-size: 750rpx 600rpx;
		background-repeat: no-repeat;
	}
	/deep/ .u-subsection{
		padding:4rpx!important;
	} 
	.content{
		margin:0 30rpx;
		overflow: hidden;
		border-radius: 12rpx;
		padding-bottom: 60rpx;
		background-color: #fff;
		min-height: 800rpx;
	}
	.con-box{
		padding: 30rpx;
		// border-radius: 12rpx;
		background-color: #FFFFFF;
		.tit{
			font-weight: bold;
			font-size: 32rpx;
			line-height: 32rpx;
			color: #333;
		}
		&>.u-flex{
			// margin-top:40rpx;
			margin-right:-20rpx;
			.txt-item{
				border-radius: 12rpx;
				padding-top:24rpx;
				padding-bottom: 24rpx;
				width: 196rpx;
				text-align: center;
				margin-right: 22rpx;
				margin-bottom: 20rpx;
				background-color: #F4F5F7;
				&.active{
					background-color: #2272FF;
					.txt{
						color: #fff;
					}
				}
			}
		}
		.txt{
			display:block;
			font-size: 26rpx;
			line-height: 26rpx;
			color: #333;
		}
		.label{
			font-size:24rpx;
			line-height: 40rpx;
			color:#FA5A49
		}
		.textarea{
			
			/deep/ .u-input{
				textarea{
					margin-top:20rpx;
					border: 2rpx solid #ECECEC;
					padding:18rpx 30rpx;
				}
			} 
		}
	}
	.btn{
		padding:30rpx;
		border-radius: 52rpx;
		line-height: 44rpx;
		font-size:32rpx;
		text-align: center;
		background-color: #2272FF;
		color:#fff;
		&::after{
			content:'';
			height:0;
			border: none;
		}
	}
	button[disabled]:not([type]) {
		background: #D1D4D4;
		color: #FFFFFF;
	}
	.width-320{
		width:320rpx;
	}
	.title{
		padding:30rpx 30rpx 46rpx;
		line-height: 40rpx;
		font-size:40rpx;
		color:#fff;
	}
	.label{
		display: inline-block;
		line-height: 40rpx;
		font-size:24rpx;
		margin-right: 10rpx;
		color:#FA5A49
	}
	.bottom-btn-view {
		width: 100%;
		padding: 0 80rpx;
		position: absolute;
		bottom: 44rpx;
		.bottom-btn {
			height: 104rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.button-text {
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		
	}
</style>
