<template>
	<view class="container">
		<uni-popup ref="popup" type="bottom">
			<view class="popup">
				<uni-easyinput type="textarea" v-model="params.reply" maxlength="-1"
					placeholder="请输入回复内容"></uni-easyinput>
				<view v-if="status" class="sure" @click="sureRequest(0)">
					确定回复
				</view>
				<view v-else class="sure" @click="sureRequest(1)"> 修改回复 </view>
			</view>
		</uni-popup>
		<view class="list-item" v-for="(item, index) in list" :key="item.id">
			<view :class="item.state == 0?'state0' : 'state1'">
				<view class="text-box"></view>
				<p class="text-content">{{item.state == 0?'未回复' : '已回复'}}</p>
			</view>
			<view class="issueContent">
				<view class="headerText">{{item.content}}</view>
				<view class="startTime">
					<view class="lable-icon">
						<image :src="baseImgUrl + 'liao-ning/icon_shijian.png'" mode=""></image>
					</view>
					<view class="right-span">
						发布时间<span class="symbol">:</span>
						<span>{{item.createTime.slice(0,10)}}</span>
					</view>
				</view>
				<view class="startTime">
					<view class="lable-icon">
						<image :src="baseImgUrl + 'liao-ning/icon_faburen.png'" mode=""></image>
					</view>
					<view class="right-span">
						发布人<span class="symbol">:</span>
						<span>{{item.createBy}}</span>
					</view>
				</view>
			</view>
			<view v-if='isEnterprise'>
				<view class="reply" v-if="item.state == 0" @click="replyMsg(item.id, 0)">回复</view>
				<view class="footerBox" v-else>
					<view class="navTitle">
						<view>
							<view style="color: black;margin: 6rpx 0 ;">{{item.answerPeopleName}}</view>
							回复内容:
						</view>

						<!-- <view class="rightBoxMain">
							<view class="update" @click="replyMsg(item.id, 1)">
								修改
							</view>
							<view class="deleteBox" @click="deleteCurrent(item.id)">
								删除
							</view>
						</view> -->

					</view>
					<view class="replyMain">
						{{item.reply}}
					</view>
				</view>
			</view>
			<view v-else>
				<view v-if="item.state == 1" class="footerBox">
					<view class="navTitle">
						<view>
							<span style="color: black;margin: 6rpx 0 ;">{{item.answerPeopleName}}</span>
							回复内容:
						</view>
					</view>
					<view class="replyMain">
						{{item.reply}}
					</view>
				</view>
				<view class="footerBox" v-else>
					暂无回复
				</view>
			</view>
		</view>
		<u-loadmore :status="startStatus" :load-text="newLoadText" color="#C4CCD8" font-size="24" />
	</view>
</template>

<script>
	import {
		getList,
		requestText,
		updataReply,
		deleteReply,
	} from "@/api/shianliaoning/message.js";
	export default {
		data() {
			return {
				//获取服务器图片地址
				baseImgUrl: getApp().globalData.config.iamgeBaseUrl,
				showLoad: false,
				//开始进入时的loading变量
				startStatus: "nomore",
				statusFlag: false,
				newLoadText: {
					nomore: '已经到底了~',
					loading: '努力加载中',
				},
				status: true,
				//企业端可以回复
				//公众端只能提问
				//判断企业端还是公众端
				isEnterprise: true,
				query: {
					pageSize: 10,
					pageNum: 1,
				},
				//列表
				list: [],
				//回复内容表单
				params: {
					id: "",
					reply: "",
				},
				//总数
				total: 0,
			};
		},
		onLoad() {
			if (uni.getStorageSync("USER_DATA").userDto.code) {
				//企业端
				this.isEnterprise = true;
				this.query.uniscid = uni.getStorageSync("USER_DATA").userDto.code;
				this.enterpriseList();
			} else {
				//公众端
				console.log('11111111111');
				this.isEnterprise = false;
				this.query.identification = uni.getStorageSync("USER_DATA").userDto.identity;
				this.enterpriseList();
			}
		},
		onReachBottom() {
			if (this.total > this.list.length) {
				if (this.statusFlag) {
					return
				}
				this.query.pageNum++;
				// this.showLoad = true;
				this.enterpriseList();
			}
		},
		methods: {
			//重新请求列表
			newList() {
				this.list = [];
				this.query.pageNum = 1;
				this.enterpriseList();
			},
			//获取列表
			enterpriseList() {
				this.startStatus = "loading"
				this.statusFlag = true
				getList(this.query).then((res) => {
					console.log(res);
					this.list = [...this.list, ...res.rows];
					if (this.list.length == 0) {
						uni.showToast({
							title: "暂无消费者咨询",
							icon: 'none'
						});
					}
					this.total = res.total;
					this.startStatus = "nomore"
					this.statusFlag = false
				});
			},
			//修改和回复
			replyMsg(id, num) {
				this.$refs.popup.open();
				this.params.id = id;
				if (num == 0) {
					this.status = true;
					this.empty();
				} else {
					this.status = false;
					this.params.reply =
						this.list.filter((item) => item.id == id)[0].reply || "";
				}
			},
			//删除
			deleteCurrent(id) {
				uni.showModal({
					title: "提示",
					content: "确定删除当前提问回复信息吗",
					success: (res) => {
						if (res.confirm) {
							deleteReply(id).then((msg) => {
								console.log(msg);
								uni.showToast({
									title: "删除成功",
								});
								this.newList();
							});
						}
					},
				});
			},
			//清空文本输入框
			empty() {
				this.params.reply = "";
			},
			//新增和修改
			sureRequest(num) {
				if (num == 0) {
					if (this.params.reply) {
						this.params.answerPeopleName = uni.getStorageSync('USER_DATA').userDto.enterpriseName
						requestText(this.params).then((res) => {
							this.$refs.popup.close();
							console.log(res);
							uni.showToast({
								title: "回复成功",
							});
							this.newList();
						});
						this.empty();
					} else {
						uni.showToast({
							title: "请输入回复信息",
							icon: "none",
						});
					}
				} else {
					if (this.params.reply) {
						this.params.answerPeopleName = uni.getStorageSync('USER_DATA').userDto.enterpriseName
						updataReply(this.params).then((res) => {
							this.$refs.popup.close();
							console.log(res);
							uni.showToast({
								title: "修改成功",
							});
							this.newList();
						});
						this.empty();
					} else {
						uni.showToast({
							title: "请输入修改信息",
							icon: "none",
						});
					}
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx 40rpx 10rpx 40rpx;
		box-sizing: border-box;

		.list-item {
			position: relative;
			margin-bottom: 30rpx;
			background-color: white;
			border-top-right-radius: 15rpx;
			border-top-left-radius: 15rpx;

			.issueContent {
				width: 100%;
				margin: 0 auto;
				padding: 20rpx;
				border-top-right-radius: 15rpx;
				border-top-left-radius: 15rpx;
				overflow: hidden;

				.headerText {
					width: 80%;
					font-size: 32rpx;
					font-weight: 600;
					margin: 10rpx 0 20rpx 0;
					word-break: break-all;
				}

				.startTime {
					margin: 10rpx 0;
					display: flex;
					align-items: center;

					.lable-icon {
						width: 32rpx;
						height: 32rpx;
						margin-right: 15rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.right-span {
						color: #B0B4BB;

						.symbol {
							margin: 0 10rpx 0 5rpx;
						}
					}
				}


			}

			.reply {
				height: 70rpx;
				width: 100%;
				line-height: 70rpx;
				text-align: center;
				color: white;
				background-color: rgb(57, 118, 242);
				border-bottom-right-radius: 15rpx;
				border-bottom-left-radius: 15rpx;
			}

			.footerBox {
				padding: 20rpx;
				border-top: 0.5px solid #E6E6E6;

				.navTitle {
					color: rgb(85, 136, 243);
					margin: 10rpx 0;
					display: flex;
					justify-content: space-between;

					.rightBoxMain {
						display: flex;

						.update {
							color: rgb(57, 118, 242);
							margin-right: 30rpx;
						}

						.deleteBox {
							color: rgb(252, 85, 49);
						}
					}

				}

				.replyMain {
					color: #B0B4BB;
					// overflow: hidden;
					// text-overflow: ellipsis;
					// display: -webkit-box;
					// -webkit-box-orient: vertical;
					// -webkit-line-clamp: 2;
				}
			}
		}
	}

	//已回复和未回复
	.state0 {
		position: absolute;
		top: 0;
		right: 0;
		width: 120rpx;
		height: 120rpx;
		border-top-right-radius: 15rpx;
		background-color: rgb(255, 234, 232);

		.text-box {
			width: 0;
			height: 0;
			border-bottom: 60rpx solid #fff;
			border-left: 60rpx solid transparent;
			border-top: 60rpx solid transparent;
			border-right: 60rpx solid #fff;
			transform: rotate(90deg);

		}

		.text-content {
			color: rgb(242, 113, 100);
			transform: rotate(45deg);
			position: relative;
			top: -88rpx;
			right: -32rpx;
		}
	}

	.state1 {
		position: absolute;
		top: 0;
		right: 0;
		width: 120rpx;
		height: 120rpx;
		border-top-right-radius: 15rpx;
		background-color: rgb(208, 243, 238);

		.text-box {
			width: 0;
			height: 0;
			border-bottom: 60rpx solid #fff;
			border-left: 60rpx solid transparent;
			border-top: 60rpx solid transparent;
			border-right: 60rpx solid #fff;
			transform: rotate(90deg);

		}

		.text-content {
			color: rgb(23, 170, 129);
			transform: rotate(45deg);
			position: relative;
			top: -88rpx;
			right: -32rpx;
		}
	}


	.popup {
		background-color: white;
		padding: 20rpx;
	}

	.sure {
		margin: 20rpx 0;
		background-color: white;
		width: 150rpx;
		background-color: #3976f1;
		line-height: 60rpx;
		text-align: center;
		height: 60rpx;
		border: none;
		font-size: 28rpx;
		color: white;
		border-radius: 40rpx;
	}
</style>