<template>
	<view class="content">
		<view class="nav flex">
			<view class="nav-item" v-for="(item,index) in navList" :key="index" :class="{'action': index == current}"
				@click="tabChange(index)">
				{{item.tit}}
			</view>
		</view>
		<scroll-view scroll-y="true" class="good-content" :style="{'height': height}" @scrolltolower="getList">
			<view>

				<view class="sig" v-for="item in navList[current].list" @click="check(item)">
					<view class="sig-status"
						:style="{backgroundColor: item.status == 1 ? '#ff6e15': ( item.status == 2 ? '#31c98f': '#fd4664')}">
						{{showStatus(item)}}
					</view>
					<view class="sig-tit">
						服务预约
					</view>
					<template v-if="item.content &&item.content.jsonAr && item.content.jsonAr.length > 0">
						<template v-for="items in item.content.jsonAr">
							<view class="sig-info" v-if="items.code == 'name'">
								<text class="sig-info-tit">客户姓名</text><text class="sig-info-val">{{items.value}}</text>
							</view>
							<view class="sig-info" v-if="items.code == 'phone'">
								<text class="sig-info-tit">联系方式</text><text class="sig-info-val">{{items.value}}</text>
							</view>
							<view class="sig-info" v-if="items.code == 'address'">
								<text class="sig-info-tit">地址</text><text class="sig-info-val">{{items.value}}</text>
							</view>

							<view class="sig-info" v-if="items.code == 'price'">
								<text class="sig-info-tit">服务费</text><text class="sig-info-val">{{items.value}}</text>
							</view>
							<view class="sig-info" v-if="items.code == 'deposit'">
								<text class="sig-info-tit">定金</text><text class="sig-info-val">{{items.value}}</text>
							</view>
						</template>
						<template v-for="items in item.content.jsonBr">
							<view class="sig-info" v-if="items.code == 'name'">
								<text class="sig-info-tit">母婴师</text><text class="sig-info-val">{{items.value}}</text>
							</view>
						</template>
					</template>
					<template v-else>
						<view class="sig-info">
							<text class="sig-info-tit">客户姓名</text><text class="sig-info-val">{{item.name}}</text>
						</view>
						<view class="sig-info">
							<text class="sig-info-tit">联系方式</text><text class="sig-info-val">{{item.phone}}</text>
						</view>
						<view class="sig-info">
							<text class="sig-info-tit">地址</text><text class="sig-info-val">{{item.address}}</text>
						</view>
						<view class="sig-info">
							<text class="sig-info-tit">母婴师</text><text class="sig-info-val">{{item.to_name}}</text>
						</view>
						<view class="sig-info">
							<text class="sig-info-tit">服务费</text><text class="sig-info-val">{{item.price}}</text>
						</view>
						<view class="sig-info">
							<text class="sig-info-tit">定金</text><text class="sig-info-val">{{item.deposit}}</text>
						</view>
					</template>
					<view class="sig-info">
						<text class="sig-info-tit">开始时间</text><text
							class="sig-info-val">{{item.start_time | showTime}}</text>
					</view>
					<view class="sig-info">
						<text class="sig-info-tit">结束时间</text><text
							class="sig-info-val">{{item.end_time | showTime}}</text>
					</view>
					<view class="sig-btn">
						<!-- 甲方签约 -->
						<signInput v-if="!item.uid_img && userInfo.uid == item.uid && item.status == 0"
							:ref="'sign' + index" :canvasId="'twoDrowCanvas' + index" :type="1"
							:canvasIds="'twoRotateCanvas' + index" :header="header" :action="action"
							@signToUrl="signToUrl">
							<view class="sig-btn-base">
								签约
							</view>
						</signInput>
						<view v-if="!item.to_uid_img && userInfo.uid == item.to_uid && item.status == 0"
							class="sig-btn-base" @click="openY(item)">
							签约
						</view>
						<!-- <view class="sig-btn-base" -->
						<!-- userInfo.uid == item.uid &&  -->
						<view class="sig-btn-base" v-if="userInfo.uid == item.uid && item.status == 1 && !item.comment" @click="pj(item)">
							评价
						</view>
						<view class="sig-btn-base" v-if="userInfo.uid == item.to_uid && item.status == 1"
							@click="dk(item)">
							打卡
						</view>
						<view class="sig-btn-base sig-btn-cancel" v-if="userInfo.uid != item.to_uid && item.status != 0"
							@click="lookdk(item)">
							查看打卡
						</view>
						<view class="sig-btn-base sig-btn-cancel" v-if="item.comment && item.comment.id"
							@click="lookPj(item)">
							查看评价
						</view>
						<view class="sig-btn-base sig-btn-cancel" @click.stop="lookHt(item)">
							查看合同
						</view>
						<view class="sig-btn-base sig-btn-cancel" v-if="item.status == 0" @click="cancelSig(item)">
							取消
						</view>
					</view>
				</view>
				<empty v-if="navList[current].list.length == 0 && navList[current].loaded"></empty>
				<uni-load-more v-else :status="navList[current].loading"></uni-load-more>
			</view>
		</scroll-view>
		<uni-popup ref="popup" type="center">
			<view class="listBox">
				<template v-if="checkItem.content && checkItem.content.jsonBr.length > 0">
					<template v-for="item in checkItem.content.jsonBr">
						<view class="list" v-if="item.type != 'img' && item.type != 'date'">
							<view class="flex listItem">
								<view class="flex titleBox">
									<text class="font-color-red font-size-sm">✲</text> <text
										class="title">{{item.name}}</text>
								</view>
								<view class="right flex">
									<input class="input" v-model="item.value" type="number"
										:placeholder="'请填写' + item.name" placeholder-class="placeholder" />
								</view>
							</view>
						</view>
						<template v-if="item.type == 'img'">
							<view class="list">
								<view class="flex listItem" style="border-bottom: none;">
									<view class="flex titleBox">
										<text class="font-color-red font-size-sm">✲</text> <text
											class="title">{{item.name}}</text>
									</view>
								</view>
							</view>
							<view class=" qm-wrap">
								<signInput ref="sign" canvasId="twoDrowCanvas" canvasIds="twoRotateCanvas"
									:header="header" :action="action" @signToUrl="signToUrl">
								</signInput>
							</view>
						</template>
					</template>

				</template>
				<template v-else>
					<view class="list">
						<view class="flex listItem">
							<view class="flex titleBox">
								<text class="font-color-red font-size-sm">✲</text> <text class="title">姓名</text>
							</view>
							<view class="right flex">
								<input class="input" v-model="partyB.name" type="text" placeholder="请填写姓名"
									placeholder-class="placeholder" />
							</view>
						</view>
					</view>
					<view class="list">
						<view class="flex listItem">
							<view class="flex titleBox">
								<text class="font-color-red font-size-sm">✲</text> <text class="title">联系电话</text>
							</view>
							<view class="right flex">
								<input class="input" v-model="partyB.phone" type="text" placeholder="请填写联系电话"
									placeholder-class="placeholder" />
							</view>
						</view>
					</view>
					<view class="list">
						<view class="flex listItem">
							<view class="flex titleBox">
								<text class="font-color-red font-size-sm">✲</text> <text class="title">地址</text>
							</view>
							<view class="right flex">
								<input class="input" v-model="partyB.address" type="text" placeholder="请填写地址"
									placeholder-class="placeholder" />
							</view>
						</view>
					</view>
					<view class="list">
						<view class="flex listItem">
							<view class="flex titleBox">
								<text class="font-color-red font-size-sm">✲</text> <text class="title">身份证号</text>
							</view>
							<view class="right flex">
								<input class="input" v-model="partyB.idcard" type="idcard" placeholder="请填写身份证号"
									placeholder-class="placeholder" />
							</view>
						</view>
					</view>
					<view class="list">
						<view class="flex listItem" style="border-bottom: none;">
							<view class="flex titleBox">
								<text class="font-color-red font-size-sm">✲</text> <text class="title">电子签名</text>
							</view>
						</view>
					</view>
					<view class=" qm-wrap">
						<signInput ref="sign" canvasId="twoDrowCanvas" canvasIds="twoRotateCanvas" :header="header"
							:action="action" @signToUrl="signToUrl">
						</signInput>
					</view>
				</template>
				<view class="btn" @click="goYqy">
					提交
				</view>
				<view class="btn-s" @click="closeYq">
					取消
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="pjPopup" type="center">
			<view class="listBox" style="padding-top: 40rpx;">
				<view class="pj-tit ">
					评价内容
				</view>
				<textarea name="" id="" cols="30" rows="10" placeholder="请输入您的评价(500字以内)" v-model="pjs" maxlength="500"
					class="pj-wrap"></textarea>
				<view class="pj-tit ">
					评价图片
				</view>
				<view class="image-list flex">
					<view class="pj-img" v-for="item,index in pjImg" :key="'pj' + index">
						<image :src="item" mode="" class="pj-img" @click="imgsub(index)"></image>
						<image src="/static/icon/goodsExit.png" mode="" class="scbtn" @click.stop="scPjImg(index)">
						</image>
					</view>
					<image src="/static/image/upImg.png" mode="" class="pj-img" @click="imgsub(pjImg.length)"
						v-if="pjImg.length < 3"></image>
				</view>
				<view class="btn" @click="goPj">
					提交
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="lookPjPopup" type="center">
			<view class="listBox" style="padding-top: 40rpx;">
				<view class="pj-tit">
					客户评价
				</view>
				<textarea name="" id="" cols="30" rows="10" v-model="checkItem.comment.content" maxlength="200"
					class="pj-wrap" disabled></textarea>
				<view class="image-list flex">
					<image mode="" v-for="item,index in checkItem.comment.imgs"  class="pj-img"
						:src="item" @click="lookImg(item)"></image>
				</view>
			</view>
		</uni-popup>
		
	</view>

</template>

<script>
	import {
		upload
	} from '@/api/set.js';
	import signInput from "@/components/am-sign-input/am-sign-input.vue"
	import empty from '@/components/empty/empty.vue'
	import {
		mapState
	} from "vuex"
	import {
		getContractList,
		Jcheck,
		tjCheck,
		cancelSig,
		goPj,

	} from '@/api/signing.js'
	import {
		getHdDetail
	} from '@/api/model.js';
	export default {
		components: {
			signInput,
			empty,
		},
		computed: {
			// #ifdef H5
			...mapState(['urlFile']),
			// #endif
			...mapState(['baseURL']),
			...mapState('user', ['userInfo', 'hasLogin']),
			action() {
				return this.baseURL + '/api/user/qiniuUpload' //上传服务器的地址
			}
		},
		data() {
			return {
				zzYy: '',
				pjImg: [],
				pjs: '',
				partyB: {
					address: '',
					phone: '',
					idcard: '',
				},
				checkItem: {},
				header: {
					"token": uni.getStorageSync('token')
				}, //图片上传携带头部信息
				qm: '',
				height: '',
				current: 0,
				loading: false,
				navList: [{
						tit: '待签约',
						status: 0,
						list: [],
						loading: 'more',
						page: 1,
						limit: 10,
						loaded: false
					},
					{
						tit: '进行中',
						status: 1,
						list: [],
						loading: 'more',
						page: 1,
						limit: 10,
						loaded: false
					},
					{
						tit: '已结束',
						status: 2,
						list: [],
						loading: 'more',
						page: 1,
						limit: 10,
						loaded: false
					}
				]
			}
		},
		onReady(res) {
			var that = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.good-content').boundingClientRect();
					query.exec(function(res) {
						that.height = resu.windowHeight - res[0].top + 'px';
					});
				},
				fail: res => {}
			});
		},
		filters: {
			showTime(val) {
				let date = new Date(val * 1000)
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			}
		},
		methods: {
			lookImg(url) {
				uni.previewImage({
					urls: [url],
					current:url
				})
			},
			imgsub(index) {
				upload({
					filename: ''
				}).then(data => {
					this.$set(this.pjImg, index, data[0].img)
				})
			},
			scPjImg(index) {
				this.pjImg.splice(index, 1)
			},
			showTimes(val) {
				let date = new Date(val * 1000)
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			closeYq() {
				this.$refs.popup.close()
			},
			lookHt(item) {
				let that = this
				console.log(item, 'item----------------------------');
				// return
				console.log('item.template_iditem.template_iditem.template_id', item.template_id);
				if (item.template_id && item.template_id > 1) {
					uni.setStorageSync('htDetail', item)
					uni.navigateTo({
						url: '/pages/user/signing/ht?id=' + item.id
					})
				} else {
					getHdDetail({
						id: 2
					}).then(res => {
						let jsonAr = res.data.content.jsonAr.map(i => {
							i.value = item[i.code] || ''
							if (i.type == 'date') {
								i.value = that.showTimes(i.value)
							}
							return i
						})
						let jsonBr = res.data.content.jsonBr.map(j => {
							if (j.code.indexOf('to_') != -1) {
								console.log(item[j.code], j.code);
								j.value = item[j.code]
							} else {
								j.value = item['to_' + j.code]
							}
							if (j.type == 'date') {
								j.value = that.showTimes(item[j.code])
							}
							return j
						})
						console.log(jsonBr, 'jsonBr');
						uni.setStorageSync('htDetails', {
							imgs: res.data.imgs,
							content: {
								jsonAr,
								jsonBr
							}
						})
						uni.navigateTo({
							url: '/pages/user/signing/ht?hid=2'
						})
					})

				}

			},
			dk(item) {
				let addr = {
					value: ''
				}
				if (item.content && item.content.jsonAr) {
					addr = item.content.jsonAr.find(i => i.code == 'address')
				}
				uni.navigateTo({
					url: '/pages/user/signing/dk?id=' + item.id + '&latitude=' + item.latitude + '&longitude=' +
						item.longitude + '&address=' + (item.address || addr.value)
				})
			},
			lookdk(item) {
				uni.navigateTo({
					url: '/pages/user/signing/dkhis?id=' + item.id
				})
			},
			showStatus(item) {
				if (item.status == 0) {
					if (this.userInfo.uid == item.uid) {
						if (!item.uid_img) {
							return '待签约'
						} else {
							return '待乙方签约'
						}
					} else {
						if (!item.to_uid_img) {
							return '待签约'
						} else {
							return '待甲方签约'
						}
					}
				} else if (item.status == 1) {
					return '进行中'
				} else if (item.status == 2) {
					return '已完成'
				}
			},
			cancelSig(item) {
				cancelSig({
					contract_id: item.id
				}).then(res => {
					uni.showToast({
						title: '取消成功',
						duration: 2000
					});
					this.getList('re')
				})
			},
			goYqy() {
				let that = this
				let re = true
				if (that.checkItem.content && that.checkItem.content.jsonBr.length > 0) {
					//自动校验
					for (let i = 0; i < that.checkItem.content.jsonBr.length; i++) {
						if (that.checkItem.content.jsonBr[i].type != 'img' && that.checkItem.content.jsonBr[i].name !=
							'签约时间' && that.checkItem.content.jsonBr[i].verify == 1 && !that.checkItem.content.jsonBr[i]
							.value) {
							uni.showModal({
								title: '温馨提醒',
								content: '请完善' + that.checkItem.content.jsonBr[i].name,
								showCancel: false,
							});
							re = false;
							break;
						}
						// 其他操作
					}
					if (!that.qm) {
						uni.showModal({
							title: '温馨提醒',
							content: '请完善电子签名',
							showCancel: false,
						});
						return;
					}
					if (!re) return;

				} else {
					if (!that.partyB.phone) {
						return uni.showModal({
							title: '温馨提醒',
							content: '请输入联系电话',
							showCancel: false,
						});

					}
					if (!that.partyB.address) {
						return uni.showModal({
							title: '温馨提醒',
							content: '请输入地址',
							showCancel: false,
						});

					}
					if (!that.partyB.idcard) {
						return uni.showModal({
							title: '温馨提醒',
							content: '请输入身份证号',
							showCancel: false,
						});

					}
					if (!that.qm) {
						return uni.showModal({
							title: '温馨提醒',
							content: '请完成电子签名',
							showCancel: false,
						});
					}
				}
				console.log('去执行');
				this.goQy()
			},
			pj(item) {
				this.checkItem = item
				this.$refs.pjPopup.open()
			},
			lookPj(item) {
				this.checkItem = item
				if (this.checkItem.comment && this.checkItem.comment.imgs) {
					console.log(this.checkItem.comment.imgs,typeof(this.checkItem.comment.imgs));
					if(typeof(this.checkItem.comment.imgs) == 'string') {
						
						this.checkItem.comment.imgs = this.checkItem.comment.imgs.split(',')
					}
				}
				this.$refs.lookPjPopup.open()
			},
			goPj() {
				if (!this.pjs) {
					return uni.showModal({
						title: '温馨提醒',
						content: '请填写评价',
						showCancel: false,
					});
				}
				if (this.loading) return;
				this.loading = true
				goPj({
					contract_id: this.checkItem.id,
					content: this.pjs,
					imgs: this.pjImg,
					uid: this.userInfo.uid
				}).then(res => {

					this.$refs.pjPopup.close()
					uni.showToast({
						title: '评价成功',
						duration: 2000
					});
					this.loading = false
					this.getList('re')
				}).catch(err => {
					this.loading = false
				})
			},
			openY(item) {
				this.checkItem = item
				if (this.checkItem.comment && this.checkItem.comment.imgs) {
					if(typeof(this.checkItem.comment.imgs) == 'string') {
						this.checkItem.comment.imgs = this.checkItem.comment.imgs.split(',')
					}
				}
				this.$refs.popup.open()
			},
			check(item) {
				this.checkItem = item
			},
			signToUrl(uploadFileRes) {
				console.log(uploadFileRes, 'uploadFileResuploadFileResuploadFileRes')
				let data = {}
				if ("string" === typeof uploadFileRes.data) {
					data = JSON.parse(uploadFileRes.data).data
				} else {
					data = uploadFileRes.data.data
				}
				this.qm = data.img
				if (this.userInfo.uid == this.checkItem.uid) {
					this.goQy()
				}
			},
			goQy() {
				let that = this
				let date = ''
				const today = new Date();
				const year = today.getFullYear();
				const month = String(today.getMonth() + 1).padStart(2, '0');
				const day = String(today.getDate()).padStart(2, '0');
				date = `${year}-${month}-${day}`;
				console.log(that.loading, 'that.loading');
				if (that.loading) return;
				that.loading = true
				let qy = null;
				let data = {}
				let content = that.checkItem.content || {}

				if (that.userInfo.uid == that.checkItem.uid) {
					// if (that.userInfo.uid != that.checkItem.uid) {
					console.log('jiafang');
					qy = Jcheck
					data = {
						id: that.checkItem.id,
						uid_img: that.qm,
						check_time: date,
						content: ''
					}
					if (content.jsonAr && content.jsonAr.length > 0) {
						content.jsonAr = content.jsonAr.map(item => {
							if (item.code == 'check_time') {
								item.value = data.check_time
							}
							if (item.code == 'uid_img') {
								item.value = data.uid_img
							}
							return item
						})
					}
					data.content = JSON.stringify(content)
				} else {
					console.log('yifang');
					qy = tjCheck

					console.log(content.jsonBr, 'JSON.stringify(content)');

					if (content.jsonBr && content.jsonBr.length > 0) {
						data = {
							to_uid_img: that.qm,
							to_check_time: date,
							id: that.checkItem.id,
						}
						content.jsonBr = content.jsonBr.map(item => {
							if (item.code == 'to_check_time') {
								item.value = date
							}
							if (item.code == 'to_uid_img') {
								item.value = that.qm
							}
							if (item.code == 'phone') {
								data.to_phone = item.value
							}
							if (item.code == 'address') {
								data.to_address = item.value
							}
							if (item.code == 'card') {
								data.to_card = item.value
							}
							return item
						})
						console.log(content.jsonBr, 'content.jsonBr---------------------------------');
						data.content = JSON.stringify(content)
						console.log(data, '结束data');
					} else {
						data = {
							to_uid_img: that.qm,
							to_check_time: date,
							id: that.checkItem.id,
							to_phone: that.partyB.phone,
							to_address: that.partyB.phone,
							to_card: that.partyB.idcard
						}

						data.content = JSON.stringify(content)
					}

				}
				qy(data).then(res => {
					that.qm = ''
					if (that.checkItem.to_uid == that.userInfo.uid) {
						this.$refs.popup.close()
					}
					that.checkItem = {}
					uni.showToast({
						title: '签约成功',
						duration: 2000
					});
					that.getList('re')
					that.loading = false

				}).catch(err => {
					this.loading = false
				})
			},
			tabChange(index) {
				this.current = index
				this.getList('tab')
			},
			getList(type) {
				let that = this
				let item = that.navList[that.current]
				if (type == 're') {
					item.page = 1
					item.loading = 'more'
					item.loaded = false
					item.list = []
				}
				if (type == 'tab' && item.loaded) return;
				if (item.loading == 'noMore' || item.loading == 'loading') return;
				item.loading = 'loading'
				getContractList({
					page: item.page,
					limit: item.limit,
					status: item.status,
					uid: that.userInfo.uid
				}).then(res => {
					let arr = res.data.list.map(item => {
						if (item.content) {
							try {
								item.content = JSON.parse(JSON.parse(item.content))
							} catch (error) {
								item.content = JSON.parse(item.content)
								//TODO handle the exception
							}
						}
						return item
					})
					console.log(arr);
					item.list = item.list.concat(arr)
					item.page++
					if (arr.length == item.limit) {
						item.loading = 'more'
					} else {
						item.loading = 'noMore'
					}
					item.loaded = true
				})
			}
		},
		onLoad() {
			this.getList()
		},
		onShow() {

		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		height: 80rpx;
		background-color: #fff;

		.nav-item {
			line-height: 80rpx;
			// width: 33.3%;
			flex: 1;
			text-align: center;
			font-size: 30rpx;

		}

		.action {
			font-weight: bold;
			position: relative;

			&::after {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0rpx;
				margin: auto;
				content: '';
				width: 62rpx;
				height: 4rpx;
				background: #FC4564;
				border-radius: 2rpx 2rpx 2rpx 2rpx;
			}
		}
	}

	.good-content {
		padding-top: 1rpx;
	}

	.sig {
		width: 688rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx auto;
		padding: 35rpx;
		padding-bottom: 20rpx;
		position: relative;

		&-status {
			position: absolute;
			right: 0;
			top: 50rpx;
			// width: 112rpx;
			padding: 0 10rpx;
			height: 40rpx;
			background: #FC4564;
			border-radius: 10rpx 0rpx 0rpx 10rpx;
			text-align: center;
			font-size: 24rpx;
			line-height: 40rpx;
			color: #fff;
		}

		&-tit {
			font-weight: bold;
			font-size: 32rpx;
			color: #1E324D;
			margin-bottom: 20rpx;
		}

		&-info {
			margin: 10rpx 0;

			&-tit {
				display: inline-block;
				width: 160rpx;
				font-size: 26rpx;
				color: #667177;
			}

			&-val {
				font-size: 26rpx;
				color: #1E3350;
			}
		}

		&-line {
			width: 616rpx;
			height: 1rpx;
			background: #eff0f1;
			margin: auto;
		}

		&-btn {
			padding-top: 20rpx;
			display: flex;
			justify-content: flex-end;

			&-base {
				width: 158rpx;
				height: 58rpx;
				line-height: 58rpx;
				background: #FC4564;
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
				margin-left: 20rpx;
			}

			&-cancel {
				background: #fff;
				border: 2rpx solid #E0E3E4;
				font-size: 26rpx;
				color: #999;
			}
			&-cancels {
				background: #fff;
				border: 2rpx solid #FC4564;
				font-size: 26rpx;
				color: #FC4564;
			}
		}
	}

	.listBox {
		width: 690rpx;
		// margin: $page-row-spacing;
		margin-top: 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #FFFFFF;
		padding-bottom: 40rpx;

		.btn {
			margin: 20rpx auto 0;
			width: 400rpx;
			background: #FC4564;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			font-size: 26rpx;
			color: #FFFFFF;
			text-align: center;
			height: 58rpx;
			line-height: 58rpx;
		}

		.btn-s {
			margin: 20rpx auto 0;
			width: 400rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			font-size: 26rpx;
			color: #FC4564;
			border: #FC4564 1px solid;
			text-align: center;
			height: 58rpx;
			line-height: 58rpx;
		}
	}

	.list {

		.input {
			text-align: right;
			font-size: $font-base;
			color: $color-gray;
			width: 100%;
		}

		.listItem {
			padding: 35rpx 40rpx;
			border-bottom: 1px solid $page-color-light;

			.ql-editor.ql-blank:before {
				font-style: normal;
			}

			.textarea {
				font-size: $font-base;
				width: 100%;
				word-wrap: break-word;
				white-space: pre-line;
				min-height: 9rem;
			}
		}

		.listIconImg {
			width: 36rpx;
		}

		.right {
			color: $font-color-light;
			font-size: $font-base;
			flex-grow: 1;
			justify-content: flex-end;

			.timetype {
				width: 100%;
				justify-content: flex-end;
			}

			.citylist {
				.del {
					color: $color-red;
					font-size: $font-sm;
					border: 1px solid $color-red;
					border-radius: 10rpx;
					line-height: 1;
					padding: 5rpx 15rpx;
				}
			}

			.img {
				width: 26rpx;
			}

			.buttom {
				color: $base-color;
				border: 1px solid $base-color;
				border-radius: 10rpx;
				line-height: 1;
				padding: 10rpx 20rpx;
			}
		}

		.titleBox {
			.title {
				color: $font-color-base;
				font-size: $font-base;
			}
		}
	}

	.qm-wrap {
		position: relative;
		// width: 100%;
		width: 140px;
		justify-content: center;
		padding-bottom: 20rpx;
		border-bottom: 1px solid $page-color-light;
		margin: auto;
	}

	.pj-wrap {
		width: 600rpx;
		height: 300rpx;
		border-radius: 20rpx;
		border: 1px solid $page-color-light;
		margin: auto;
		padding: 20rpx;
	}

	.pj-tit {
		text-align: center;
		padding: 10rpx 0 30rpx;
		font-size: 30rpx;
		color: #000;
		font-weight: bold;
	}

	.image-list {
		padding: 20rpx 40rpx;
		justify-content: flex-start;
	}

	.pj-img {
		width: 150rpx;
		height: 150rpx;
		margin-right: 20rpx;
		border: 1rpx solid #eee;
		position: relative;
		border-radius: 10rpx;
	}

	.scbtn {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		top: -15rpx;
		right: -15rpx;
	}
</style>