<template>
	<view v-if="afterServiceRecord">
		<view v-if="afterServiceRecord.createBy == 1" class="padding-tb solid-top">
			<view class='cu-tag bg-main-color radius light'>售后发起中</view>
			<view class="text-gray text-sm margin-bottom-xs">您需快速操作反馈，24小时内不操作将自动同意！</view>
			<view v-if="afterServiceRecord.operType === 1">
				<view class="flex justify-start align-end">
					<text>退款申请：</text>
					<uni-countdown :show-colon="false" :backgroundColor="'#eee'"
						:day="$dateUtil.countDownDiff($dateUtil.addHours(afterServiceRecord.createTime, 24)).day" 
						:hour="$dateUtil.countDownDiff($dateUtil.addHours(afterServiceRecord.createTime, 24)).hour" 
						:minute="$dateUtil.countDownDiff($dateUtil.addHours(afterServiceRecord.createTime, 24)).min" 
						:second="$dateUtil.countDownDiff($dateUtil.addHours(afterServiceRecord.createTime, 24)).seconds">
					</uni-countdown>
				</view>
				<view>
					<text>退款金额：</text>
					<text v-if="afterServiceRecord.refund">{{afterServiceRecord.refund}}</text>
					<text v-else-if="order.payMoney">{{order.payMoney}}</text>
				</view>
				<view>
					<text>退款原因：</text>
					<text v-if="afterServiceRecord.customerReasonType === 1">上门/服务不守时</text>
					<text v-else-if="afterServiceRecord.customerReasonType === 2">态度不友好，无法继续</text>
					<text v-else-if="afterServiceRecord.customerReasonType === 3">服务效果差，未达到合格</text>
					<text v-else-if="afterServiceRecord.customerReasonType === 4">技能水平问题，未妥善完成</text>
					<text v-else-if="afterServiceRecord.customerReasonType === 5">要求加费用，费用不合理</text>
					<text v-else-if="afterServiceRecord.customerReasonType === 6">订单拖太久了</text>
					<text v-else-if="afterServiceRecord.customerReasonType === 7">超了些服务内容，师傅不接受</text>
					<text v-else-if="afterServiceRecord.customerReasonType === 8">客户/我时间不方便了</text>
					<text v-else-if="afterServiceRecord.customerReasonType === 9">客户/我已让别的师傅服务了</text>
				</view>
				<view>
					<text>具体原因：</text>
					<text v-if="afterServiceRecord.customerReason">{{afterServiceRecord.customerReason}}</text>
				</view>
				<view class="grid col-3 grid-square flex-sub margin-top-sm">
					<view class="bg-img" v-for="(imgObj, imgIndex) in afterServiceRecord.imgsList" :key="imgIndex" v-if="imgObj.imgUploadBy === 1">
						<image :src="imgObj.imgUrl" @tap="viewImage($event, [imgObj.imgUrl])" :data-url="imgObj.imgUrl" mode="aspectFill"></image>
					</view>
				</view>
				<view>
					<text class="text-red" v-if="order.workerId == order.masterWorkerId && !order.isOnlyServ && order.payMoney < afterServiceRecord.refund && afterServiceRecord.customerFinalCheck == null">警报：退单金额大于该师傅接单金额，但客户发起的退款金额有效，您需介入处理，如让接单师傅系统上操作同意退款，系统最大按该单派单额退回客户，其余需人工处理！如属于师傅责任引起的退单，建议重做，重做后让客户撤消退单！</text>
				</view>
			</view>
			<view v-else-if="afterServiceRecord.operType === 2">
				<view class="flex justify-start align-end">
					<text>待处理售后：</text>
					<uni-countdown :show-colon="false" :backgroundColor="'#eee'"
						:day="$dateUtil.countDownDiff($dateUtil.addHours(afterServiceRecord.createTime, 24)).day" 
						:hour="$dateUtil.countDownDiff($dateUtil.addHours(afterServiceRecord.createTime, 24)).hour" 
						:minute="$dateUtil.countDownDiff($dateUtil.addHours(afterServiceRecord.createTime, 24)).min" 
						:second="$dateUtil.countDownDiff($dateUtil.addHours(afterServiceRecord.createTime, 24)).seconds">
					</uni-countdown>
				</view>
				<view>
					<text>售后原因：</text>
					<text v-if="afterServiceRecord.customerReasonType === 1">上门/服务不守时</text>
					<text v-else-if="afterServiceRecord.customerReasonType === 2">态度不友好，无法继续</text>
					<text v-else-if="afterServiceRecord.customerReasonType === 3">服务效果差，未达到合格</text>
					<text v-else-if="afterServiceRecord.customerReasonType === 4">技能水平问题，未妥善完成</text>
					<text v-else-if="afterServiceRecord.customerReasonType === 5">要求加费用，费用不合理</text>
					<text v-else-if="afterServiceRecord.customerReasonType === 6">订单拖太久了</text>
					<text v-else-if="afterServiceRecord.customerReasonType === 7">超了些服务内容，师傅不接受</text>
					<text v-else-if="afterServiceRecord.customerReasonType === 8">客户/我时间不方便了</text>
					<text v-else-if="afterServiceRecord.customerReasonType === 9">客户/我已让别的师傅服务了</text>
				</view>
				<view>
					<text>具体原因：</text>
					<text v-if="afterServiceRecord.customerReason">{{afterServiceRecord.customerReason}}</text>
				</view>
				<view>
					<text>完成操作：点击“操作处理”提交由客服回访！</text>
				</view>
				<view class="grid col-3 grid-square flex-sub margin-top-sm">
					<view class="bg-img" v-for="(imgObj, imgIndex) in afterServiceRecord.imgsList" :key="imgIndex" v-if="imgObj.imgUploadBy === 1">
						<image :src="imgObj.imgUrl" @tap="viewImage($event, [imgObj.imgUrl])" :data-url="imgObj.imgUrl" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="flex justify-end align-end margin-tb-sm" v-if="!afterServiceRecord.updateBy && afterServiceRecord.workerFeedbackResult === null && showActionBtn">
				<button class="cu-btn sm bg-yellow margin-right-sm" @tap="$emit('redoGoHome')">上门重做</button>
				<button class="cu-btn sm bg-yellow margin-right-sm" @tap="$emit('callModal', 'rejectAfterSale')">拒绝处理</button>
				<button class="cu-btn sm bg-yellow margin-right-sm" @tap="$emit('callModal', 'agreeAfterSale')">操作处理</button>
			</view>
		</view>
		<view v-if="afterServiceRecord.updateBy == 2" class="padding-tb solid-top">
			<view class='cu-tag bg-main-color radius light'>师傅反馈</view>
			<view>
				<view class="margin-top-xs">
					<text>师傅反馈结果：</text>
					<text v-if="afterServiceRecord.workerFeedbackResult === 0">拒绝</text>
					<text v-else-if="afterServiceRecord.workerFeedbackResult === 1">同意</text>
					<text v-else-if="afterServiceRecord.workerFeedbackResult === 2 || afterServiceRecord.workerFeedbackResult === 3">上门重做/补做</text>
				</view>
				<view v-if="afterServiceRecord.workerFeedbackResult === 1">
					<text>同意退款金额：</text>
					<text>{{afterServiceRecord.agreedRefund ? afterServiceRecord.agreedRefund : afterServiceRecord.refund}}</text>
				</view>
				<view style="padding-left: 196upx;"  v-if="afterServiceRecord.workerFeedbackResult === 2 || afterServiceRecord.workerFeedbackResult === 3">
					<view>客户同意则本次退款金额为0元</view>
					<view>客户同意的需马上处理并重新提交</view>
					<view class="text-right" v-if="afterServiceRecord.customerAgreeRedo === 1">
						<view class='cu-tag bg-main-color radius light'>客户同意方案</view>
					</view>
				</view>
				<template v-if="afterServiceRecord.workerFeedbackResult == 0 || afterServiceRecord.workerFeedbackResult == 1">
					<view>
						<text>师傅反馈：</text>
						<text v-if="afterServiceRecord.workerFeedbackReasonType === 1">客户原因</text>
						<text v-else-if="afterServiceRecord.workerFeedbackReasonType === 2">师傅原因</text>
						<text v-else-if="afterServiceRecord.workerFeedbackReasonType === 3">其他</text>
						<text v-if="afterServiceRecord.workerFeedbackReason">
							<text v-if="afterServiceRecord.workerFeedbackReasonType">，</text>
							{{afterServiceRecord.workerFeedbackReason}}
						</text>
					</view>
					<view class="grid col-3 grid-square flex-sub margin-top-sm" v-if="afterServiceRecord.workerFeedbackImages">
						<view class="bg-img" v-for="(imgUrl, imgIndex) in afterServiceRecord.workerFeedbackImages.split(',')" :key="imgIndex">
							<image :src="imgUrl" @tap="viewImage($event, [imgUrl])" :data-url="imgUrl" mode="aspectFill"></image>
						</view>
					</view>
				</template>
				<template v-else-if="afterServiceRecord.workerFeedbackResult === 3">
					<view class="margin-top-xs">
						<text>师傅重做/补做提交：</text>
					</view>
					<view class="grid col-3 grid-square flex-sub margin-top-sm" v-if="afterServiceRecord.redoCompleteImages">
						<view class="bg-img" v-for="(imgUrl, imgIndex) in afterServiceRecord.redoCompleteImages.split(',')" :key="imgIndex">
							<image :src="imgUrl" @tap="viewImage($event, [imgUrl])" :data-url="imgUrl" mode="aspectFill"></image>
						</view>
					</view>
					<view class="margin-bottom-xs">
						<text>{{afterServiceRecord.redoCompleteRemark}}</text>
					</view>
				</template>
			</view>
			
			<view style="border-top: 1px solid gainsboro;padding-top: 10upx;" v-if="afterServiceRecord.customerFinalCheck == null && afterServiceRecord.redoCompleteTime && (afterServiceRecord.workerFeedbackResult === 0 || afterServiceRecord.workerFeedbackResult === 1 || afterServiceRecord.workerFeedbackResult === 3)">
				<text class="text-gray" style="font-size: 20upx;">待客户验收或审核，36小时未操作将自动取消本次售后</text>
				<view class="flex align-center margin-top-sm">
					<text>工单时限：</text>
					<uni-countdown :show-colon="false" :backgroundColor="'#eee'"
						:day="$dateUtil.countDownDiff($dateUtil.addHours(afterServiceRecord.redoCompleteTime, 36)).day" 
						:hour="$dateUtil.countDownDiff($dateUtil.addHours(afterServiceRecord.redoCompleteTime, 36)).hour" 
						:minute="$dateUtil.countDownDiff($dateUtil.addHours(afterServiceRecord.redoCompleteTime, 36)).min" 
						:second="$dateUtil.countDownDiff($dateUtil.addHours(afterServiceRecord.redoCompleteTime, 36)).seconds">
					</uni-countdown>
				</view>
			</view>
			
			
			<view class="flex justify-end align-end margin-tb-sm" v-if="afterServiceRecord.workerFeedbackResult === 2 && showActionBtn">
				<button class="cu-btn sm bg-yellow margin-right-sm" @tap="$emit('callModal', 'showReFinishSubmit')">重做/补做提交</button>
			</view>
		</view>
		<view v-if="afterServiceRecord.customerFinalCheck != null" class="padding-tb solid-top">
			<template v-if="order.afterPlatformServiceStatus === 0 || order.afterPlatformServiceStatus == 1">
				<view class='cu-tag bg-main-color radius light'>客户最终确认</view>
				<view class="margin-top-xs">
					{{afterServiceRecord.customerFinalCheck === 1 ? '同意' : '不同意'}}
					<text v-if="afterServiceRecord.isAutoProcessed == 1 && afterServiceRecord.customerFinalCheck === 1">（超时系统自动同意）</text>
				</view>
				<view v-if="afterServiceRecord.customerFinalCheck === 0">
					<view class="grid col-3 grid-square flex-sub margin-top-sm" v-if="afterServiceRecord.customerDisagreeImages">
						<view class="bg-img" v-for="imgUrl in afterServiceRecord.customerDisagreeImages.split(',')" :key="imgUrl">
							<image :src="imgUrl" @tap="viewImage($event, [imgUrl])" :data-url="imgUrl" mode="aspectFill"></image>
						</view>
					</view>
					<view class="margin-bottom-xs" v-if="afterServiceRecord.customerDisagreeReason">
						<text>不同意理由：{{afterServiceRecord.customerDisagreeReason}}</text>
					</view>
					<view class="text-red" v-if="afterServiceRecord.customerFinalCheck === 0">订单交由平台协商处理</view>
					<view v-if="afterServiceRecord.customerFinalCheck === 0">系统提示您，如能协商尽可能与客户协商一致（能重新协商则按双方认可方案重新发起）！可让客户撤单最佳。</view>
				</view>
				<view v-else-if="afterServiceRecord.customerFinalCheck === 1">
					<template v-if="afterServiceRecord.workerFeedbackResult !== 0">
						<view v-if="(afterServiceRecord.agreedRefund > 0 || afterServiceRecord.originalRefund > 0) && order.refundPayStatus == 1">
							<view>
								<text>本单退款，系统已发起按客户支付的帐户原路退回</text>
								<text class="text-red">{{afterServiceRecord.originalRefund || afterServiceRecord.agreedRefund}}</text>
								<text>元，银行按工作日退款，节假日顺延到帐。遇客户问询，请其耐心等待，到账时会在客户端”客户最终确认“处有到账时间。</text>
							</view>
							<view>退款支付到账：{{afterServiceRecord.refundApplyTime}}</view>
						</view>
						<view v-else-if="order.refundPayStatus == 0">
							<text v-if="afterServiceRecord.workerFeedbackResult === 3">本次售后已重新补做并验收完成（退款额为0）。</text>
							<text v-else>本单已退款<text class="text-red">{{afterServiceRecord.originalRefund || afterServiceRecord.agreedRefund}}</text>元，因未实际支付，实退为0元。未退部分继续完成订单及正常支付！</text>
						</view>
					</template>
					<view v-else>
						<text>本次售后已操作完毕，售后申请已结束！</text>
					</view>
				</view>
			</template>
			<template v-else-if="order.afterPlatformServiceStatus === 2 || order.afterPlatformServiceStatus === 3">
				<view class='cu-tag bg-main-color radius light'>客户最终确认</view>
				<view class="margin-top-xs">
					{{order.afterPlatformServiceStatus === 2 ? '同意' : '取消售后'}}
					（平台操作）
				</view>
				<view v-if="afterServiceRecord.platformHandleReason">
					<text>平台意见：{{afterServiceRecord.platformHandleReason}}</text>
				</view>
				<view v-if="order.afterPlatformServiceStatus === 3">
					<text>本次售后已操作完毕，售后申请已结束!</text>
				</view>
				<template v-else>
					<view v-if="(afterServiceRecord.platformRefund || afterServiceRecord.agreedRefund) && order.refundPayStatus == 1">
						<view>
							<text>本单退款，系统已发起按客户支付的帐户原路退回</text>
							<text class="text-red">{{afterServiceRecord.platformRefund || afterServiceRecord.agreedRefund}}</text>
							<text>元，银行按工作日退款，节假日顺延到帐。遇客户问询，请其耐心等待，到账时会在客户端”客户最终确认“处有到账时间。</text>
						</view>
						<view>退款支付到账：{{afterServiceRecord.refundApplyTime}}</view>
					</view>
					<view v-else-if="order.refundPayStatus == 0">
						<text>本单已退款<text class="text-red">{{afterServiceRecord.platformRefund || afterServiceRecord.agreedRefund || 0}}</text>元，因未实际支付，实退为0元。未退部分继续完成订单及正常支付！</text>
					</view>
				</template>
			</template>
			
		</view>
	</view>
</template>

<script>
	export default {
		emits: ['redoGoHome', 'callModal'],
		props: {
			afterServiceRecord: {
				type: Object,
				default: () => {}
			},
			order: {
				type: Object,
				default: () => {}
			},
			showActionBtn: {
				type: Boolean,
				default: true
			}
		},
		data() {
		    return {
		      
		    }
		  },
		methods: {
			viewImage(e, imgList) {
				uni.previewImage({
					urls: imgList,
					current: e.currentTarget.dataset.url
				});
			},
		}
	}
</script>

<style>
</style>