<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">
				服务需求详情
			</block>
			<block slot="right"></block>
			<block slot="right">

			</block>
		</cu-custom>

		<view>
			<view style="font-size: 32rpx;font-weight: bold;color: #111111; margin: 40rpx 30rpx;">
				<text>{{info.name }}</text>
			</view>
			<view
				style="margin: 0 20rpx; background: #F7F8F9;border-radius: 15rpx; padding: 20rpx; font-size: 26rpx;font-weight: 500;color: #7A8FB4;">
				<view class="flex align-start justify-start" style="margin-bottom: 20rpx;">
					<view style="width: 130rpx; min-width: 130rpx; ">服务类型：</view>
					<view style=" max-width: 530rpx;">
						{{info.parentCategoryName == null ? info.categoryName :  info.parentCategoryName + "-" +  info.categoryName}}
					</view>
				</view>
				<view class="flex align-start justify-start">
					<view style="width: 130rpx; min-width: 130rpx; ">服务地址：</view>
					<view style=" max-width: 530rpx;">
						{{info.publishAddress.address + "-" + info.publishAddress.detailed}}</view>
				</view>
			</view>

			<view class="flex justify-between align-center" style="padding: 20rpx 30rpx 10rpx 30rpx">
				<view style="color: #999999; font-size: 26rpx;"> {{ $timefilter('YY-MM-DD HH:MM',info.createTime)}} </view>

				<view style="color: #111111; font-size: 26rpx;">
					<text>有</text>
					<text style="color: #FC6035;">{{info.quoteCount}}</text>
					<text>人报价</text>
				</view>
			</view>

			<view style="margin: 30rpx;">
				<view
					style="font-size: 30rpx;font-weight: 500;color: #111111; margin-bottom: 30rpx;word-wrap:break-word">
					{{info.publishDesc}}
				</view>
				<view class="bg-f8 flex align-center justify-center margin-bottom-xs"
					v-for="(ele,index) in  info.publishImageList" :key="index"
					style="border-radius: 6rpx;overflow: hidden;margin-right:11rpx;margin-top: 10rpx;"
					@tap.stop="$videoList(index,item.resourceList,'resourceType')">
					<video :src="ele.url" v-if="ele.type=='002'" :poster="ele.faceImg" style="width: 690rpx;height:'auto';"></video>
						<image :src="ele.url" v-else-if="ele.type=='001'" style="width: 690rpx;height: 'auto';" mode="aspectFill">
					</image>
				</view>
			</view>
			<view style="width: 750rpx;height: 15rpx;background: #F6F6F6;"></view>
			<view class="flex align-center justify-between" style="padding: 20rpx 30rpx;">
				<view style="font-size: 32rpx;font-weight: bold;color: #111111; line-height: 60rpx;">服务人员报价</view>
			</view>
			<view style="width: 680rpx;height: 2rpx;background: #F6F6F6; margin: 0 35rpx;"></view>


			<view class="content text-df flex align-center justify-center flex-direction" v-show="empty&&!emptyLoading"
				style="margin-top: 84rpx;">
				<image src="../../static/empty.png" class="empty-img"></image>
				<view class="color-66" style="margin: 0rpx 0 80rpx 0;">暂无报价数据</view>
			</view>
            <view class="flex flex-direction align-center justify-center content text-df" style="width:100%;margin-top: 84rpx;" v-if="emptyLoading">
                <image src="../../static/empty-loading.png" mode="" style="width: 256rpx;height: 158rpx;"></image>
                <view style="color:#3A3A3A;font-size;34rpx;margin-top:46rpx;">加载中...</view>
            </view>
                


			<view v-for="(item, index) in items" :key="index">
				<!-- 报价 -->
				<view style="padding: 30rpx;" v-show="!empty" class="flex justify-center align-start">
					<view style="width: 80rpx; height: 80rpx; margin-right: 10rpx;">
						<u-image :src="item.serverUser.avatar" :fade="true" duration="450" width="80rpx" height="80rpx" shape="circle">
							<view slot="error" style="font-size: 24rpx;"><image src="../../static/defalut_avatar.png" mode="" style="width: 80rpx;height: 80rpx;"></image></view>
													      
						</u-image>
						       
					</view>
					<view style="width: 590rpx;">
						<view class="flex align-center justify-between" style="width: 590rpx;">
							<view style="">
								<view class="flex align-center justify-start">
									<view style="font-size: 28rpx;font-weight: bold;color: #111111;">
									 {{item.serverUser.nikeName != null ? item.serverUser.nikeName : item.serverUser.realName}}</view>
									<view
										style="font-size: 24rpx;font-weight: 500;color: #D99864; padding-left: 14rpx;">
										{{item.serverUser.serverLevelName}}</view>
								</view>

							</view>
							<view style="font-size: 24rpx;font-weight: 500;color: #999999;">{{ $timefilter('YY-MM-DD HH:MM',item.createTime)}} </view>
						</view>
						<view class="flex align-center justify-between" style="margin: 10rpx 0;">
							<text
								style="font-size: 22rpx;background: #FAFAFA;border: 2rpx solid #CCCCCC;border-radius: 8rpx;font-weight: 500;color: #333333;  padding: 2rpx 6rpx; text-align: center; ">
								{{item.serverUser.serverAge}}年工龄
							</text>
							<view v-if="item.serverUser.phone != null" @click="callPhone(item.serverUser.phone)">
								<image src="../../static/publish/phone.png" style="width: 46rpx; height: 46rpx;">
								</image>
							</view>
						</view>
						<view class="flex align-center justify-between" style="margin-top: 6rpx;" v-if="item.serverUser.score != '' && item.serverUser.score > 0">
							<view >
								<text style="font-size: 22rpx;font-weight: 500;color: #999999;">综合评分：</text>
								<text
									style="font-size: 24rpx;font-weight: 500;color: #999999;">{{item.serverUser.score}}</text>
							</view>
							<view style="background: #FFFFFF;font-size: 22rpx;font-weight: 500;color: #FF0000; " v-if="item.serverUser.rate > 0">好评率
								{{item.serverUser.rate}}%</view>
						</view>
						<view style="margin-top: 6rpx;">
							<text v-if="item.merchant.merchantType == 0"
								style="font-size: 22rpx;font-weight: 500;color: #999999;">{{item.serverUser.merchantName}}</text>
						</view>
						<view
							style="width: 100%; background-color: #F7F8F9;border-radius: 10px; margin-top: 20rpx; padding: 20rpx;word-wrap:break-word">
							<text style="font-size: 28rpx;font-weight: 500;color: #333333;">{{item.quoteDesc}}</text>
						</view>
						<view class="flex align-center justify-between" style="margin-top: 20rpx;">
							<view>
								<view class="flex align-center justify-start"
									style="background: #FFEDED;border-radius: 8rpx;">
									<view
										style="background: #FF6368;border-radius: 8rpx;font-size: 22rpx;font-weight: 500;color: #FFFFFF; width: 64rpx; height: 40rpx; line-height: 40rpx; text-align: center;">
										报价</view>
									<view style="padding: 0 10rpx;">
										<text
											style="font-size: 26rpx;font-weight: 500;color: #FF0000; line-height: 40rpx;">{{item.totalPrice}}</text>
										<text
											style="font-size: 22rpx;font-weight: 500;color: #FF0000; line-height: 40rpx;">元</text>
									</view>
								</view>
								<view style="font-size: 24rpx;font-weight: 500;color: #333333; margin-top: 10rpx;">
									{{item.singlePrice}}元/{{item.quoteUnit == '999' ? item.otherUnit : item.monad }}
									x{{item.quoteCounts}}
								</view>
							</view>
							<view class="flex align-center justify-end">
								<u-button class="publish-reply-button" :ripple="true" @click="showReply(item)" v-if="info.publishState == '001'">回复
								</u-button>
								<u-button class="publish-done-button" :custom-style="doneButton" :ripple="true"
									v-if="info.publishState == '001'" @click="goOrder(item)">立即预约</u-button>
							</view>
						</view>
						<view style="width: 590rpx;height: 2rpx;background: #F6F6F6; margin-top: 20rpx;"></view>
						<!-- ---回复---- -->
						<view class="flex justify-between align-start" style="margin-top: 20rpx;" :key="index"
							v-for="(itemm, index) in item.quoteReplyVoList">
							<view style="width: 60rpx; height: 60rpx; margin-right: 10rpx;">
								<u-image :src="itemm.avatar" :fade="true" duration="450" width="60rpx" height="60rpx" shape="circle" v-if="itemm.replyType == '0'">
									<view slot="error" style="font-size: 24rpx;"><image src="../../static/avatar_icon.png" mode="" style="width: 80rpx;height: 80rpx;"></image></view>
								</u-image>
								<u-image :src="itemm.serverAvatar" :fade="true" duration="450" width="60rpx" height="60rpx" shape="circle" v-if="itemm.replyType == '1'">
									 <view slot="error" style="font-size: 24rpx;"><image src="../../static/defalut_avatar.png" mode="" style="width: 80rpx;height: 80rpx;"></image></view>	
								</u-image>	
							</view>
							

							<view style="width: 520rpx; ">
								<view class="flex align-center justify-between" style="padding: 10rpx 0;">
									<view>
										<text style="font-size: 28rpx;font-weight: 500;color: #111111;"
											v-if="itemm.replyType == '0'">{{itemm.name}}</text>
										<text style="font-size: 28rpx;font-weight: 500;color: #111111;"
											v-if="itemm.replyType == '1'">{{itemm.serverName}}</text>
										<text
											style="font-size: 28rpx;font-weight: 500;color: #999999; margin: 0 8rpx;">回复</text>

										<text style="font-size: 28rpx;font-weight: 500;color: #111111;"
											v-if="itemm.replyType =='1'">{{itemm.name}}</text>
										<text style="font-size: 28rpx;font-weight: 500;color: #111111;"
											v-if="itemm.replyType =='0'">{{itemm.serverName}}</text>
									</view>
									<view>
										<text
											style="font-size: 22rpx;font-weight: 500;color: #999999;word-wrap:break-word">{{ $timefilter('YY-MM-DD HH:MM',itemm.createTime)}} </text>
									</view>
								</view>
								<view>
									<text
										style="font-size: 28rpx;font-weight: 500;color: #333333;word-wrap:break-word">{{itemm.replyDesc}}</text>
								</view>
								<view class="flex align-center justify-end" v-if="itemm.replyType =='0' && info.publishState == '001'">
									<u-button size="mini" style="margin: 0;" :ripple="true" type="error" plain
										v-if=" itemm.memberId == memberId" @click="deleteReply(itemm.replyId)">删除
									</u-button>

									<!-- <text style="font-size: 28rpx;font-weight: 500;color: #FC6035;" v-if=" itemm.memberId == memberId"  @click="deleteReply(itemm)">删除</text> -->
								</view>

								<!-- <view class="flex align-center justify-end">
								<u-button size="mini" style="margin: 0;" :ripple="true" @click="showReply()">回复</u-button>
							</view> -->
								<view style="width: 520rpx;height: 2rpx;background: #F6F6F6; margin-top: 20rpx;"></view>
							</view>
						</view>
					</view>
				</view>

				<view style="height: 20rpx;"></view>
				<u-modal v-model="showModel" :content="modelContent" confirm-color="#FC6035" :showCancelButton="true"
					confirmText='确认' @confirm="confirmDeleteReply()"></u-modal>

				<view>
					<u-popup border-radius="20" v-model="replyShow" mode="bottom" :safe-area-inset-bottom="true"
						@close="closeReply">
						<view class="flex align-center justify-end" style="padding: 38rpx 54rpx; color: #111111;">
							<span class="font-34 text-bold">回复内容</span>
							<view style="width:30rpx;height:30rpx; margin-left: 228rpx;" @tap="replyShow=false">
								<image src="../../static/close_x.png" style="width:30rpx;height:30rpx; "></image>
							</view>

						</view>

						<view style="width: 700rpx; margin: 0 25rpx; ">
							<u-input v-model="reply.replyDesc" :type="inputArea.type" :border="inputArea.border"
								:height="inputArea.height" :auto-height="inputArea.autoHeight"
								:borderColor="inputArea.borderColor" :placeholder="inputArea.placeholder"
								style="padding: 20rpx 30rpx; background-color: #FAFAFA; font-size: 30rpx;" />
						</view>
						<view style="padding: 30rpx 70rpx;" @click="saveTime">
							<view class="select_time_sure">确定</view>
						</view>
					</u-popup>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" :load-text="loadText" @loadmore="loadmore()" v-show="items.length > 0" />
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				needInputUnitId: "099",
				status: "loadmore",
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				items: [],
				inputArea: {
					value: '',
					type: 'textarea',
					border: true,
					height: 100,
					autoHeight: true,
					borderColor: '#E3E3E3',
					placeholder: '请输入回复内容'
				},
				showModel: false,
				modelContent: "",
				deleteReplyId: "",
				doneButton: {
					color: '#FC6035'
				},
				replyShow: false,
				reply: {
					replyDesc: "",
				},

				icon: "http://fresh-life.oss-cn-shanghai.aliyuncs.com/uploadimages/2022/01/14/1642141148408.jpeg",
				info: {
					publishAddress: {
						address: "",
						detailed: "",
					}
				},
				memberId: '',
				replyId: '',
				empty: true,
                emptyLoading: true,
			}
		},
		watch: {},
		// 接收 上个页面传递过来的参数
		onLoad(option) {
			this.publishId = option.publishId;
			// this.publishId = 10005;
			this.memberId = uni.getStorageSync('userInfo').memberId;
		},
		created() {
			//查询详情
			this.getPublishInfo();
			//查询报价分页
			this.getQuoteList(1);
		},
		mounted() {

		},
		watch: {

		},
		onPullDownRefresh() {
			// this.load();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		onReachBottom() {
			this.loadmore()
		},
		methods: {
			//查询详情
			getPublishInfo() {
				this.$u.api.getPublishInfo(this.publishId).then(res => {
					// console.log(res)
					if (res.code == 200) {
						this.info = res.data;
						// console.log(this.info.publishImageList);

					} else {
						this.$api.msg(res.msg)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//查询报价分页数据
			getQuoteList(pageNum) {
				var that = this;

				let params = {
					pageNum: pageNum,
					pageSize: this.$store.state.pageSizes,
					publishId: this.publishId
				}
				that.$u.api.quoteList(params).then(res => {
					// console.log(res)
					if (res.code == 200) {
						if (res.pageNum == 1) {
							this.items = res.rows;
						} else {
							this.items = this.items.concat(res.rows)
						}

						this.hasNextPage = res.hasNextPage;
						this.pageNum = res.pageNum;
						if (this.hasNextPage) {
							this.status = "loadmore";
						} else {
							this.status = "nomore";
						}

						if (this.items.length > 0) {
							this.empty = false;
						} else {
							this.empty = true;
						}
					} else {
						this.$api.msg("查询失败")
						if (this.hasNextPage) {
							this.status = "loadmore";
						} else {
							this.status = "nomore";
						}
					}
				}).catch(err => {
					console.log(err)
					if (this.hasNextPage) {
						this.status = "loadmore";
					} else {
						this.status = "nomore";
					}
				}).finally(()=>{
                    this.emptyLoading = false
                });
			},

			deleteReply(replyId) {
				this.deleteReplyId = replyId;
				this.showModel = true;
				this.modelContent = "确定删除回复吗？";
			},
			confirmDeleteReply() {
				var that = this;
				//根据留言回复id删除留言
				that.$u.api.delReply(that.deleteReplyId).then(res => {
					// console.log(res)
					if (res.code === 200) {
						that.$api.msg('操作成功')
						//重新查询列表数据
                        that.emptyLoading = true
						that.getQuoteList(1);
					} else {
						that.$api.msg(res.msg)
					}
					that.deleteReplyId = '';
					that.modelContent = '';

				}).catch(err => {
					console.log(err)
				})
			},
			//点击拨打电话
			callPhone(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber: phoneNumber
				})
			},
			//点击回复
			showReply(quote) {
				//需要回复的报价数据
				console.log(quote)
				this.reply.quoteId = quote.quoteId;
				this.reply.serverUserId = quote.serverUserId;
				this.replyShow = true;
			},
			//提交回复
			saveTime() {
				this.reply;
				this.reply.memberId = this.memberId;
				
				if(this.reply.replyDesc == "" ){
					this.$api.msg("留言不能为空")
					return
				}
				this.$u.api.insertReply(this.reply).then(res => {

					if (res.code == 200) {
						this.$api.msg("留言成功")
						this.replyShow = false;
						this.reply = {
							replyDesc:"",
						};
						//列表数据刷新
                        this.emptyLoading = true
						this.getQuoteList(1);
					} else {
						this.$api.msg(res.msg)
						this.replyShow = false;
						this.reply = {};
						//列表数据刷新
                        this.emptyLoading = true
						this.getQuoteList(1);
					}
				}).catch(err => {
					console.log(err)
				})

			},
			loadmore() {
				// console.log("loadmore")
				if (this.status == "loadmore" && this.hasNextPage) {
					this.getQuoteList(this.pageNum + 1)
				}
			},
			closeReply() {

			},
			//立即预约
			goOrder(item) {
				// console.log(item.serverUser.serverId)
				const id = item.serverUser.serverId
				this.$u.api.getServerIsStopTakeOrder(id).then(res => {
					if (res.code == 200) {
						// console.log(res)
						if (res.data === '0') {
							// console.log("立即预约")
							// console.log(item)
							let publish=this.info;
							publish.quote=item;
							console.log(publish)
							uni.setStorageSync('publishDetail', publish)
							uni.navigateTo({
								url:'../index/shopOrderPublish'
							})
						}else{
							this.$api.msg('当前服务不可接单')
						}
					}

				}).catch(err => {
					console.log(err)
				})


			},
		}


	}
</script>
<style lang='scss' scoped>
	page {
		background: #FFFFFF;
	}

	.play-btn-img {
		position: absolute;
		top: calc(50% - 30rpx);
		left: calc(50% - 30rpx);
		width: 60rpx;
		height: 60rpx;
	}

	.select_time_sure {
		background: #fc6035;
		box-shadow: 0rpx 5rpx 14rpx 0rpx #eb4553;
		border-radius: 50rpx;
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 400;
		text-align: center;
		padding-top: 29rpx;
		padding-bottom: 29rpx;
	}

	/deep/ .u-icon-minus {
		font-weight: bold;
		border: 2rpx solid #CCCCCC;
		border-radius: 8rpx;
	}

	/deep/ .u-icon-plus {
		font-weight: bold;
		border: 2rpx solid #CCCCCC;
		border-radius: 8rpx;
	}

	.picker-view {
		width: 750rpx;
		height: 400rpx;
		margin-top: 20rpx;
	}

	.item {
		height: 100rpx;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 32rpx;
		line-height: 100rpx;
	}

	.publish-reply-button {
		/* width: 130rpx; */
		height: 58rpx;
		background: #FFFFFF;
		// border: 2rpx solid #CCCCCC;
		border-radius: 10rpx;
		margin: 0 10rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
		line-height: 58rpx;
		padding: 24rpx;
	}

	.publish-done-button {
		/* width: 130rpx; */
		height: 58rpx;
		background: #FFFFFF;
		// border: 2rpx solid #CCCCCC;
		border-radius: 10rpx;
		margin: 0 10rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
		line-height: 58rpx;
		padding: 24rpx;
	}


	.empty-img {
		width: 380rpx;
		height: 380rpx;
		margin-bottom: 32rpx;
	}

	.border-top {
		border-top: 2rpx solid #eee;
	}
</style>
