<template>
	<view class="page">
		<u-navbar title="帮助中心" :border-bottom="false" :background="background" title-color='#000' title-size='36'
			height='45' back-icon-color='#000'></u-navbar>
		<view class="help_time">
			<view class="help_time_left">
				<view class="help_time_left_tit">
					Hi~有什么可以帮您！
				</view>
				<view class="help_time_left_content" style="margin-top: 28rpx;">
					工作时间:
				</view>
				<view class="help_time_left_content" style="margin-top: 10rpx;">
					工作日8:30-11:30 13:30-18:00
				</view>
			</view>
			<view class="help_time_right">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uD8eJCmet0KN1WOEJBKZ" />
			</view>
		</view>
		<view class="help_btn_box">
			<view class="help_btn_item" @click="showWechat()">
				<view class="help_btn_item_left">
					<view class="help_btn_item_left_tit">
						微信客服
					</view>
					<view class="help_btn_item_left_content">
						为您解答疑惑
					</view>
				</view>
				<view class="help_btn_item_right">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uP0sux01iWvHzofugDjW"
						class="help_btn_item_right_img" />
				</view>
			</view>
			<view class="line"></view>
			<view class="help_btn_item" @click="callPhone()">
				<view class="help_btn_item_left">
					<view class="help_btn_item_left_tit">
						客服电话
					</view>
					<view class="help_btn_item_left_content">
						欢迎您拨打提问
					</view>
				</view>
				<view class="help_btn_item_right">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uKt6yZ7lMykYci7yITT5"
						class="help_btn_item_right_img" />
				</view>
			</view>
		</view>
		<view class="qscard">
			<view class="card_top">
				<view class="li" v-for="(item, index) in classifyList" :key="index"
					@click="changeTab(index, item.classifyId)">
					<view class="txt">
						{{ item.classifyName }}
					</view>
					<view class="bot_bor" v-if="tabindex == index"></view>
					<view class="bot_bor" v-if="tabindex != index" style="background: #fff;"></view>
				</view>

			</view>
			<view class="qs_li" v-for="(item, index) in wordlist" :key="index" @click="topage(item)">
				<view class="qs_li_txt">
					{{ item.title }}
				</view>
				<view class="iconfont icon-xiangyou1"></view>
			</view>
		</view>
		<view class="mask" v-if="showQrcode" @click.stop="closeQrcode">
			<view class="qrcode-box" @click.stop>
				<view class="qrcode-title">微信客服</view>
				<image class="qrcode-img" :src="phone.serverWx" mode="aspectFit" show-menu-by-longpress></image>
				<view class="qrcode-btn" @click="saveQrcode">保存二维码</view>
				<view class="close-btn" @click="closeQrcode">×</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			background: {
				backgroundColor: " ",
			},
			sn: '',
			tabindex: 0,
			classifyList: [

			],
			wordlist: [],
			phone: {},
			showQrcode: false,
		}
	},
	onShow() {
		this.getClassify()
		this.getPhone()
	},
	methods: {
		showWechat() {
			this.showQrcode = true
		},
		closeQrcode() {
			this.showQrcode = false
		},
		saveQrcode() {
			uni.getImageInfo({
				src: this.phone.serverWx,
				success: (res) => {
					uni.saveImageToPhotosAlbum({
						filePath: res.path,
						success: () => {
							uni.showToast({
								title: '保存成功',
								icon: 'success'
							})
						},
						fail: () => {
							uni.showToast({
								title: '保存失败，请检查权限设置',
								icon: 'none'
							})
						}
					})
				},
				fail: () => {
					uni.showToast({
						title: '图片加载失败',
						icon: 'none'
					})
				}
			})
		},
		callPhone(phone) {
			uni.makePhoneCall({
				phoneNumber: this.phone.serverPhone
			})
			// setTimeout(()=>{
			// 	this.showkf=false
			// },500)
		},
		getPhone() {
			this.$u.get('/app/getServerPhone').then((res) => {
				this.phone = res.data
			})
		},
		topage(item) {
			uni.navigateTo({
				url: `/page_user/word?id=` + item.articleId
			});
		},
		changeTab(index, id) {
			this.tabindex = index
			this.getClassifyList(id)
		},
		getClassifyList(id) {
			this.$u.get('/app/article/list?classifyId=' + id).then((res) => {
				this.wordlist = res.rows
				console.log(this.wordlist, 'aaaaaaaaaa')
			})
		},
		getClassify() {
			this.$u.get('/app/classify/list').then((res) => {
				this.classifyList = res.data
				this.getClassifyList(res.data[0].classifyId)
			})
		}
	}
}
</script>

<style lang="scss">
page {
	overflow-y: auto;
	background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uYRs7Cv2Pbp95w3KjGO3');
	background-size: cover;
	/* 背景图片等比缩放以覆盖整个容器 */
	background-position: center;
	/* 背景图片居中显示 */
	background-repeat: no-repeat;
	/* 防止背景图片重复 */
	min-height: 100vh;
	/* 确保页面至少有 100% 的视窗高度，避免高度不足导致无法滚动 */

}

.page {
	padding-left: 40rpx;
	padding-right: 64rpx;
	.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .qrcode-box {
    width: 600rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 40rpx;
    position: relative;
    
    .qrcode-title {
      font-size: 32rpx;
      font-weight: 500;
      text-align: center;
      margin-bottom: 30rpx;
      color: #333;
    }
    
    .qrcode-img {
      width: 400rpx;
      height: 400rpx;
      margin: 0 auto;
      display: block;
    }
    
    .qrcode-btn {
      width: 400rpx;
      height: 80rpx;
      line-height: 80rpx;
      background: #4297F3;
      color: #FFFFFF;
      text-align: center;
      border-radius: 40rpx;
      margin: 40rpx auto 0;
      font-size: 28rpx;
    }
    
    .close-btn {
      position: absolute;
      right: 20rpx;
      top: 20rpx;
      width: 60rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 40rpx;
      color: #999;
    }
  }
}
	.qscard {
		width: 680rpx;
		margin: 40rpx auto;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 28rpx 30rpx;
		box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);

		.card_top {
			display: flex;
			align-items: center;
			flex-wrap: nowrap;

			// justify-content: space-around;
			.li:first-child {
				margin-left: 0rpx;
			}

			.li {
				min-width: 112rpx;
				display: flex;
				flex-wrap: wrap;
				// justify-content: center;
				margin-right: 20rpx;

				.txt {

					font-weight: 500;
					font-size: 28rpx;
					color: #3D3D3D;
					z-index: 1;
				}

				.bot_bor {

					margin-top: -20rpx;
					width: 90%;
					height: 26rpx;
					background: rgba(66, 151, 243, 0.55);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					z-index: 0;

				}
			}
		}

		.qs_li:first-child {
			margin-top: 40rpx;
		}

		.qs_li:last-child {
			border-bottom: 2rpx solid #fff;
		}

		.qs_li {
			// margin-top: 10rpx;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #D8D8D870;
			padding-top: 26rpx;
			padding-bottom: 26rpx;

			.qs_li_txt {

				font-weight: 400;
				font-size: 28rpx;
				color: #3D3D3D;
			}

			.icon-xiangyou1 {
				font-size: 32rpx;
				color: #3D3D3D;
			}
		}
	}

	.help_btn_box {

		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		margin-top: 50rpx;
		width: 644rpx;
		padding: 20rpx 38rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 20rpx;

		.help_btn_item {
			width: 49%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.help_btn_item_left {
				.help_btn_item_left_tit {
					font-weight: 700;
					font-size: 28rpx;
					color: #3D3D3D;
				}

				.help_btn_item_left_content {
					margin-top: 14rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #3D3D3D;
				}
			}

			.help_btn_item_right {
				image {
					width: 84rpx;
					height: 84rpx;
				}
			}
		}

		.line {
			margin-left: 20rpx;
			margin-right: 20rpx;
			width: 2rpx;
			height: 128rpx;
			background: #D8D8D8;
		}
	}

	.help_time {
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.help_time_left {
			margin-left: 40rpx;

			.help_time_left_tit {
				font-weight: 700;
				font-size: 36rpx;
				color: #3D3D3D;
			}

			.help_time_left_content {
				font-weight: 400;
				font-size: 24rpx;
				color: #3D3D3D;
			}
		}

		.help_time_right {
			image {
				width: 168rpx;
				height: 154rpx;
			}
		}
	}
}
</style>
