<template>
	<view class="content">
		<statusNav returnColor="#c2c2c2" navBarTitle="工单回访"></statusNav>
		<container-subgroup-two>
			<view slot="content" style="margin: -25rpx -30rpx 0rpx;">
				<view class="hint">
					客户服务，重在回访仔细倾听，以服务质量求发展
				</view>
				<view class="payReturnVisit-from">
					<view class="payReturnVisit-input">
						<view class="title">
							<text>联</text>
							<text>系</text>
							<text>人</text>
						</view>
						<input class="input" disabled v-model="name" placeholder="请填写联系人称呼" type="text" placeholder-class="placeClass" />
					</view>
					<view class="payReturnVisit-input">
						<view class="title">
							联系电话
						</view>
						<input class="input" disabled maxlength="11" v-model="phone" placeholder="请输入手机号码" type="number" placeholder-class="placeClass" />
					</view>
					<view class="payReturnVisit-input">
						<view class="title">
							<text>微</text>
							<text>信</text>
							<text>号</text>
						</view>
						<input class="input" disabled v-model="wxcode" placeholder="请输入微信号码" type="text" placeholder-class="placeClass" />
					</view>

					<view class="payReturnVisit-textarea">
						<view class="title">
							回访内容
						</view>
						<textarea class="textarea" v-model="content" placeholder="请输入回访内容" placeholder-class="placeClass" />
					</view>
					<view class="payReturnVisit-input">
						<view class="title">
							客服电话
						</view>
						<input class="input" disabled placeholder="400-765-9876" type="text" placeholder-class="placeClass" />
					</view>
					<view class="payReturnVisit-input">
						<view class="title">
							回访时间
						</view>
						<input class="input colc" v-model="custmertime" disabled placeholder="2022/02/13 14:18:00" type="text" placeholder-class="placeClass" />
						<!-- <input class="input" v-model="custmertime" @tap="openDatetimePicker" disabled placeholder="2022/02/13 14:18:00" type="text" placeholder-class="placeClass" />
						<yy-mm-dd-hh-ss ref="myPicker" @submit="handleSubmit" :start-year="2022" :end-year="2122"></yy-mm-dd-hh-ss> -->
					</view>
				</view>
				<button class="submit-button" @tap="setVisit" type="default">确认发送</button>
			</view>
		</container-subgroup-two>

	</view>
</template>

<script>
	import statusNav from '../../components/status-nav.vue';
	import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
	import yyMmDdHhSs from '@/components/dates/yy-mm-dd-hh-ss.vue';
	export default {
		components: {
			statusNav,
			containerSubgroupTwo,
			yyMmDdHhSs
		},
		data() {
			return {
				name:'',//联系人
				phone:'',//联系电话
				wxcode:'',//微信号
				content:'',//回访内容
				custmerphone:'400-765-9876',//客服电话
				custmertime:'',//回访时间
				workId:'',//工单id
				flag:true,
				visitTypeList:[]
			}
		},
		onLoad(op) {
			this.getVisitType();
			if(op.order_id) {this.workId = op.order_id}
			this.getVisitInfo(this.workId);
			this.custmertime = this.$toolAll.tools.returnCurrentTime('/',1);
		},
		methods: {
			// 获取回访方式
			getVisitType(){
				this.$requst.get('/universal/api.order/visit_type').then(res=>{
					if(res.code) {
						this.visitTypeList = res.data;
					}
				})
			},
			// 获取回访信息
			getVisitInfo(id){
				this.$requst.get('/universal/api.order/visit',{order_id:id}).then(res=>{
					if(res.code) {
						this.name = res.data.order_contact;
						this.phone = res.data.order_contact_phone;
						this.wxcode = res.data.order_contact_wechat;
						this.custmerphone = res.data.consumer_hotline;
					}
				})
			},
			// 工单回访提交事件
			setVisit() {
				if(this.checkEmpty() && this.flag) {
					this.flag = false;
					uni.showLoading({
						title:'正在发送',
						mask:true
					})
					let parmas = {
						order_id:this.workId,
						return_visit:this.content,
						type_id:this.visitTypeList[0].type_id
					}
					this.$requst.post('/universal/api.order/visit',parmas).then(res=>{
						if(res.code) {
							this.$toolAll.tools.showToast('回访成功');
							setTimeout(()=>{
								// 接口调用成功,自动返回上一级
								this.$toolAll.tools.automaticBack();
							},1000)
						} else {
							this.$toolAll.tools.showToast(res.msg);
						}
					})
					setTimeout(()=>{
						this.flag = true;
					},2000)
				}
			},
			// 判空
			checkEmpty() {
				let result = false;
				if(!this.content) {
					this.$toolAll.tools.showToast('请输入回访内容');
				} else {
					result = true;
				}
				
				return result;
			},
			// 打开时间选择弹框
			openDatetimePicker() {
			    this.$refs.myPicker.show();
			},
			// 时间弹框确认事件
			handleSubmit(e) {
			    this.custmertime = `${e.year}/${e.month}/${e.day} ${e.hour}:${e.minute}:00`;
			},
		}
	}
</script>

<style>
	.placeClass {
		color: #cccccc;
	}

	.hint {
		color: #358ff0;
		font-size: 24rpx;
		padding: 25rpx 30rpx;
	}

	.submit-button {
		width: 686rpx;
		border-radius: 50rpx;
		height: 90rpx;
		background-color: #02A2ea;
		line-height: 90rpx;
		color: #FFFFFF;
		margin-top: 60rpx;
		text-align: center;
		font-size: 30rpx;
	}

	.payReturnVisit-input {
		background-color: #FFFFFF;
		height: 103rpx;
		display: flex;
		align-items: center;
		width: 700rpx;
		border-bottom: 2rpx solid #f4f4f4;
		margin: auto;
	}

	.payReturnVisit-input .title {
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		font-weight: bold;
		width: 120rpx;
		color: #333333;
		margin-right: 40rpx;


	}

	.payReturnVisit-input .input {
		flex: 1;
		font-size: 30rpx;
		margin-top: 2rpx;
	}

	.payReturnVisit-from {
		background-color: #FFFFFF;
	}

	.payReturnVisit-textarea {
		width: 700rpx;
		border-bottom: 2rpx solid #f4f4f4;
		margin: auto;
		padding-bottom: 30rpx;
	}

	.payReturnVisit-textarea .title {
		padding: 30rpx 0rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.payReturnVisit-textarea .textarea {
		width: 100%;
		height: 200rpx;
		background-color: #F5F5F5;
		border-radius: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}
</style>