<template>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">上传完工照片</block>
		</cu-custom>
		<!-- 具体服务栏 -->
		<view class="bg-white margin-top-sm flex justify-start padding">
			<view class="cu-avatar"
				:style="'width: 120rpx; height: 120rpx; background-image:url(' + servInfo.picUrl + ');'"></view>
			<view class="flex flex-column-between margin-left">
				<view class="text-bold">{{servInfo.name}}</view>
				<view>
					<view v-for="(tag, index1) in servInfo.tags" v-if="tag.level === 'error'" class='cu-tag margin-right-xs radius line-red margin-top-xs'>{{tag.content}}</view>
					<view v-else-if="tag.level === 'info'" class='cu-tag margin-right-xs radius line-main-color margin-top-xs'>{{tag.content}}</view>
				</view>
			</view>
		</view>
		<view class="margin-top-sm bg-white padding">
			<!-- 服务指标 -->
			<checkbox-group class="block" @change="checkServIndex">
				<view style="min-width: 50%;" class="flex justify-start align-center margin-top-sm float-left" v-for="(item, index) in servIndex">
					<checkbox style="transform:scale(1)" class="main-color margin-right-xs" :checked="checkIndexArr[index] === '1'" value='1'>
					</checkbox>
					<text @click="checkedCurBox(index)">{{item}}</text>
				</view>
			</checkbox-group>
			<!-- 完工图片上传 -->
			<view class="padding-top-lg float-clear">
				<view>
					<text class="text-bold text-black">上传完工照片</text>
					<text>（按订单要求上传）</text>
				</view>
				<view class="grid col-4 grid-square flex-sub margin-top-sm">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index"
						@tap="viewImage($event, imgList)" :data-url="item">
						<image :src="item" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="delImg($event, imgList)" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="chooseImage" v-if="imgList.length < 4">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
			<!-- 备注 -->
			<view class="padding-top-lg uni-textarea">
				<textarea style="width: 100%;" class="solid padding-sm" maxlength="-1" @input="inputSpecificReason"
					placeholder="温馨提示: 服务过程中有分歧存在客诉隐患或未能及时处理彻底的,请急报说明情况,将由平台客服一起协调沟通,否则造成你有责任的客诉将不利于服务评价;上述勾选需真实,被反映虚假或回访不实属恶意反馈,可能会被商家投诉" />
			</view>
			<!-- 确认按钮 -->
			<view class="margin-lr margin-bottom padding-top-xl">
				<button class="cu-btn bg-main-color long-btn radius shadow-blur">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				servInfo: {
					name: '空调挂机柜机清洗服务',
					picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20000.jpg',
					tags: [{
						level: 'info',
						content: '商城订单'
					}]
				},
				checkIndexArr: [],
				servIndex: [
					'本单准时上门',
					'鞋套工装设备完善',
					'订单备注处理完成',
					'水电隐患已核查',
					'服务前后都已试机',
					'卫生已清理',
					'服务中出现过问题，已和客户沟通并同意',
					'产生的费用是服务前说明并报给予客户，客户同意',
					'已让客户验收，并提示客户验收内容，已完成此项'
				],
				imgList: []
			}
		},
		onLoad(options) {
			if (options && options.order) {
				let orderInfo = JSON.parse(decodeURIComponent(options.order));
				this.loadData(orderInfo);
			}
		},
		methods: {
			loadData (orderInfo) {
				console.log(orderInfo)
			},
			checkedCurBox(index) {
				this.checkIndexArr[index] = 1;
			}
		},
	}
</script>

<style>
</style>
