<template>
	<view class="pages">
		<u-navbar title="咨询客服" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff"
			title-size='36' height='50'></u-navbar>
        <image class="topimg" src="https://api.ccttiot.com/smartmeter/img/static/uzjRZtHgttsXPNCWi4PF" mode=""></image>


		<!-- 咨询客服 -->
		<view class="list" style="margin-top: 360rpx;">
			<view v-for="(item, index) in list" :key="index" class="kflist">
				<!-- 判断索引的奇偶性 -->
				<template v-if="index % 2 === 0">
					<!-- 当索引为偶数时，内容在左侧 -->
					<view class="kflt">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uMSwHVPLeC3CFbPtwt9c" mode=""></image>
						<view class="kfname">{{item.name}}</view>
					</view>
					<view class="kfrt">
						<view class="wz">
							<view class="" style="z-index: 1;">
								微信号：{{item.wx == null ? '--' : item.wx}}
							</view>
							<view class="fz" @click="btnfzwx(item.wx)">
								复制
							</view>
						</view>
						<view class="wz">
							<view class="" style="z-index: 1;">
								手机号：{{item.mobile == null ? '--' : item.mobile}}
							</view>
							<view class="fz" @click="btnfzsj(item.mobile)">
								复制
							</view>
						</view>
						<image src="https://api.ccttiot.com/smartmeter/img/static/uwX5ob5jDuugNnd8cCaX" mode=""></image>
					</view>
				</template>
				<template v-else>
					<!-- 当索引为奇数时，内容在右侧 -->
					<view class="kfrt">
						<view class="wz">
							<view class="" style="z-index: 1;">
								微信号：{{item.wx == null ? '--' : item.wx}}
							</view>
							<view class="fz" @click="btnfzwx(item.wx)">
								复制
							</view>
						</view>
						<view class="wz">
							<view class="" style="z-index: 1;">
								手机号：{{item.mobile == null ? '--' : item.mobile}}
							</view>
							<view class="fz" @click="btnfzsj(item.mobile)">
								复制
							</view>
						</view>
						<image src="https://api.ccttiot.com/smartmeter/img/static/ueTBM3ydsEvrLcm5Hp59" mode=""></image>
					</view>
					<view class="kflt">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uMSwHVPLeC3CFbPtwt9c" mode=""></image>
						<view class="kfname">{{item.name}}</view>
					</view>
				</template>
			</view>
			<view class="" style="width: 100%;text-align: center;font-size: 30rpx;color: #3D3D3D;margin-top: 82rpx;">
				复制可帮您快速拨打电话及搜索微信
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnmsk: false,
				bgc: {
					backgroundColor: "#8883f0",
				},
				textValue: '',
				currentCount: 0,
				cutidx: -1,
				imglist: [],
				token: '',
				contact: '',
				stause: false,
				list:[]
			}
		},
		computed: {

		},
		onLoad() {

			this.getstause()
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '创想物联',
				path: '/pages/shouye/index'
			}
		},

		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '创想物联',
				query: '',
				path: '/pages/shouye/index'
			}
		},
		methods: {
			
			btnfzsj(text) {
				uni.setClipboardData({
					data:text, 
					success: () => {
						uni.showToast({
							title: '复制成功',
							duration: 2000,
							icon: 'success'
						});
					}
				})
			},
			btnfzwx(text) {
                uni.setClipboardData({
                	data:text, 
                	success: () => {
                		uni.showToast({
                			title: '复制成功',
                			duration: 2000,
                			icon: 'success'
                		});
                	}
                })
			},

			getstause() {
				this.$u.get(`/app/customerService/list?pageSize=999&pageNum=1&orderByColumn=sort&isAsc=desc`).then((res) => {
					if (res.code == 200) {
                        this.list = res.rows
					}
				})
			},
			hidePlaceholder() {
				this.placeholderVisible = false
			},
			showPlaceholder() {
				if (!this.textValue) {
					this.placeholderVisible = true
				}
			},
			updateWordCount() {
				this.currentCount = this.textValue.trim().replace(/\s+/g, '').length
			},
			sub() {
				if (this.cutidx == -1) {
					uni.showToast({
						title: '请选择反馈类型',
						icon: 'none',
						duration: 2000
					});
				} else if (this.textValue == '') {
					uni.showToast({
						title: '请输入问题描述',
						icon: 'none',
						duration: 2000
					});
				} else {
					this.btnmsk = true
					var imgString = this.imglist.join(',')
					let data = {
						type: this.cutidx,
						content: this.textValue,
						picture: imgString,
						contact: this.contact
					}
					// console.log(data, 'dadada');
					this.$u.post("/app/complaint", data).then((res) => {
						if (res.code == 200) {
							// this.token=res.token
							uni.showToast({
								title: '提交成功',
								icon: 'success',
								duration: 2000
							})
							setTimeout(() => {
								this.btnmsk = false
								uni.navigateBack()
							}, 1000)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
							this.btnmsk = false
						}
					})
				}
			},
			getImage(e) {
				let _this = this
				let math = 'static/' + _this.$u.guid(20)
				uni.chooseImage({
					count: 9,
					type: 'all',
					success(res) {
						console.log(res);
						const tempFilePaths = res.tempFilePaths[0]
						wx.uploadFile({
							url: 'https://up-z2.qiniup.com',
							name: 'file',
							filePath: tempFilePaths,
							formData: {
								token: _this.token, //后端返回的token
								key: 'smartmeter/img/' + math
							},
							success: function(res) {
								// console.log(res, 'resres');
								let str = JSON.parse(res.data)
								_this.userImgs = 'https://api.ccttiot.com/' + str.key
								_this.imglist.push(_this.userImgs)
							}
						})
					}
				})
			},
			// 获取上传七牛云token
			getQiniuToken() {
				this.$u.get("/common/qiniu/uploadInfo").then((res) => {
					if (res.code == 200) {
						this.token = res.token
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	/deep/ .u-title {
		padding-bottom: 22rpx;
	}

	/deep/ .u-icon__icon {
		padding-bottom: 22rpx;
	}
    .topimg{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 498rpx;
	}
	.list{
		position: fixed;
		top: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1;
		height: 71vh;
		overflow: scroll;
	}
	.kflist {
		display: flex;
		margin-top: 32rpx;
        background-color: #fff;
		padding: 22rpx;
		box-sizing: border-box;
		border-radius: 30rpx;
		width: 662rpx;
		.kflt {
			text-align: center;
			// margin-right: 16rpx;

			image {
				width: 118rpx;
				height: 104rpx;
			}
		}

		.kfrt {
			width:100%;
			height: 154rpx;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			padding: 4rpx 30rpx;
			box-sizing: border-box;
			position: relative;
            image{
				width: 500rpx;
				height: 151rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
			.wz {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 20rpx;
				box-sizing: border-box;
				font-size: 32rpx;
				color: #3D3D3D;
				.fz {
					width: 72rpx;
					height: 38rpx;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					border: 1rpx solid #8883F0;
					font-size: 24rpx;
					color: #8883F0;
					text-align: center;
					z-index: 1;
				}
			}
		}

		.kfname {
			font-weight: 600;
			font-size: 28rpx;
			width: 120rpx;
			color: #3D3D3D;
		}
	}

	.btn {
		width: 590rpx;
		height: 84rpx;
		background: #8883F0;
		filter: blur(0px);
		color: #fff;
		font-size: 36rpx;
		line-height: 84rpx;
		text-align: center;
		border-radius: 50rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 96rpx;
	}

	page {
		background-color: #F7FAFE !important;
	}

	.pages {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.leix {
		margin-top: 34rpx;

		.title {
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			line-height: 50rpx;
		}

		.lxxz {
			display: flex;

			view {
				border-radius: 15rpx;
				border: 2rpx solid #C4C4C4;
				padding: 14rpx 34rpx 14rpx 34rpx;
				box-sizing: border-box;
				margin-right: 28rpx;
				margin-top: 40rpx;
				position: relative;
				overflow: hidden;

				text {
					position: absolute;
					bottom: 0;
					right: 0;
					display: inline-block;
					width: 31rpx;
					height: 19rpx;
					background: #8883F0;
					color: #fff;
					border-radius: 5rpx;
					font-size: 18rpx;
					text-align: center;
					line-height: 19rpx;
				}
			}
		}
	}

	.active {
		border: 2rpx solid #8883F0 !important;

		image {
			display: block !important;
		}
	}

	.problem {
		margin-top: 40rpx;

		.title {
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			line-height: 50rpx;
		}
	}

	.lxfs {
		margin-top: 40rpx;

		.title {
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			line-height: 50rpx;
		}

		input {
			margin-top: 32rpx;
			width: 612rpx;
			height: 80rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
			border-radius: 20rpx;
			padding-left: 20rpx;
		}
	}

	.scpic {
		margin-top: 40rpx;

		.title {
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			line-height: 50rpx;
		}

		text {
			display: block;
			margin-top: 40rpx;
			font-size: 28rpx;
			color: #95989D;
			line-height: 38rpx;
		}

		.icon {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin-top: 40rpx;

			.imgbox {
				width: 33%;

				image {
					width: 142rpx;
					height: 142rpx;
				}
			}

		}
	}


	.input-container {
		position: relative;
		width: 612rpx;
		height: 248rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
		border-radius: 20rpx;
		margin-top: 40rpx;
		overflow: hidden;
		padding-right: 38rpx;
		box-sizing: border-box;
	}

	.placeholder {
		position: absolute;
		top: 18rpx;
		left: 38rpx;
		color: #999;
		/* placeholder颜色 */
		pointer-events: none;
		/* 确保点击事件可以穿透到textarea上 */
	}

	.custom-textarea {
		width: 100%;
		height: 100%;
		/* 设置一个合适高度 */
		padding-top: 18rpx;
		/* 为placeholder留出空间 */
		padding-left: 38rpx;
		box-sizing: border-box;
		border: 1px solid #ccc;
		padding-bottom: 50rpx;
	}

	.word-count {
		position: absolute;
		right: 10px;
		bottom: 10px;
		font-size: 12px;
		color: #999;
	}
</style>