<template>
	<view>
		<u-navbar :is-back="true" title='帮助与客服' title-color="#000" :border-bottom="false" :background="true" 
			id="navbar">
		</u-navbar>
		<!-- <image class="bjimg" src="https://api.ccttiot.com/smartmeter/img/static/uXBpJuaUs0XUNb8HTahh" mode=""></image> -->
	    <view class="top">
	    	<view class="lt">
	    		<view class="one">Hi~有什么可以帮您！</view>
				<view class="two">工作时间:</view>
				<view class="two">工作日8:30-11:30 13:30-18:00</view>
	    	</view>
			<view class="rt">
				<image src="https://api.ccttiot.com/smartmeter/img/static/ug9Y5mLQSE1qkp5Pp1A8" mode=""></image>
			</view>
	    </view>
		
		<view class="cai">
			<view class="nav">
				<view v-for="(item,index) in fllist" key="index" :class="active == index ? 'active' : ''" @click="btntab(index)">
					{{item.classifyName}}
					<text v-if="active == index"></text>
				</view>
			</view>
			<view class="list">
				<view class="list_val" v-for="(item,index) in wzlist" :key="index" @click="btnitem(item.articleId)">
					<text>{{item.title}}</text> <image src="https://api.ccttiot.com/smartmeter/img/static/uFmOt7OXDSVaAOMeQ8eK" mode=""></image>
				</view> 
			</view> 
		</view>
		
		<!-- <view class="btn" @click="btndh">
			<image src="https://api.ccttiot.com/smartmeter/img/static/uNMbLZ4Ig7lkFLmhcU1P" mode=""></image> 在线客服
		</view>
		 -->
		<!-- 拨打电话 -->
		<view class="kfimg" v-if="flag">
			<image src="https://api.ccttiot.com/smartmeter/img/static/uc8dAVNneEshmNJjPW3w" mode=""></image>
			<view class="boda">
				<view class="tel">{{tel}}</view>
				<view class="btntel" @click="call">
					立即拨打
				</view>
			</view>
			<image class="yic" @click="btnyc" src="https://api.ccttiot.com/smartmeter/img/static/uPhDN73dFXTe31yvnHhP" mode=""></image>
		</view>
		<view class="mask" v-if="flag"></view>
		
	</view>
</template>

<script>
	export default {
			data() {
				return {
					bgc: {
						backgroundColor: "#fff",
					},
					active:0,
					flag:false,
					fllist:[],
					classifyId:'',
					wzlist:[],
					tel:''
				}
			},
			onLoad() {
				this.getfenlist()
			},
			methods:{
				// 点击切换高亮
                btntab(index){
					this.active = index
					this.classifyId = this.fllist[index].classifyId
					this.getwzlist()
				},
				// 点击拨打电话
				btndh(){
					this.flag = true
					this.$u.get("/app/getServerPhone").then(res => {
						if(res.code == 200){
							this.tel = res.data
						}
					})
				},
				// 点击隐藏拨打电话
				btnyc(){
					this.flag = false
				},
				// 点击拨打
				call() {
					let phoneNumber = this.tel
					uni.makePhoneCall({
						phoneNumber: phoneNumber,
						success: function(res) {
							console.log('拨打电话成功', res)
						},
						fail: function(err) {
							console.error('拨打电话失败', err)
							uni.showToast({
								title: '拨打电话失败',
								icon: 'none'
							})
						}
					})
				},
				// 点击详情
				btnitem(articleId){
					uni.navigateTo({
						url:'/page_user/bangzhuxq?classifyId=' + articleId
					})
				},
				
				//获取分类列表
				getfenlist(){
					this.$u.get("app/classify/list").then(res => {
						if(res.code == 200){
							this.fllist = res.data
							this.classifyId = res.data[0].classifyId
							this.getwzlist()
						}
					})
				},
				// 获取分类文章列表
				getwzlist(){
					let data = {
						classifyId:this.classifyId
					}
					this.$u.get(`/app/article/list?pageNum=1&pageSize=999&classifyId=${this.classifyId}`).then(res => {
						if(res.code == 200){
							this.wzlist = res.rows
						}
					})
				},
				
			}
		}
</script>

<style lang="less">
	/deep/ .u-title{
		margin-bottom: 22rpx;
	}
	/deep/ .uicon-nav-back{
		margin-bottom: 22rpx;
	}
	.kfimg{
		width: 590rpx;
		height: 706rpx;
		position: fixed;
		top: 380rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1;
		.yic{
			position: fixed;
			top: 750rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;
			width: 60rpx !important;
			height: 60rpx !important; 
		}
		.boda{
			text-align: center;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			bottom:72rpx;
			.tel{
				font-size: 36rpx;
				color: #3D3D3D;
				font-weight: 600;
				margin-bottom: 62rpx;
			}
			.btntel{
				margin: auto;
				width: 436rpx;
				height: 68rpx;
				background: #48893B;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				border-radius: 50rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: 600;
				text-align: center;
				line-height: 68rpx;
			}
		}
	}
	.mask{
		width: 100%;
		height: 100vh;
		background-color: #000;
		opacity: .5;
		position: fixed;
		top: 0;
		left: 0;
	}
	.btn{
		width: 644rpx;
		height: 88rpx;
		background: #48893B;
		border-radius: 55rpx 55rpx 55rpx 55rpx;
		border-radius: 50rpx;
		font-size: 40rpx;
		color: #FFFFFF;
		font-weight: 600;
	    display: flex;
		align-items: center;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 92rpx;
		justify-content: center;
		image{
			width: 42rpx;
			height: 42rpx;
			margin-right: 24rpx;
		}
 	}
	.active{
		font-size: 28rpx !important;
		color: #3D3D3D !important;
	}
	.cai{
		margin: auto;
		margin-top: 34rpx;
		width: 644rpx;
		max-height: 800rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 64rpx 0rpx rgba(0,0,0,0.08);
		border-radius: 20rpx;
		padding: 36rpx 32rpx;
		box-sizing: border-box;
		.list{
			height: 100%;
			// overflow: scroll;
			.list_val{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				color: #3D3D3D;
				margin-bottom: 34rpx;
				
				image{
					width: 42rpx;
					height: 42rpx;
				}
			}
		}
		.nav{
			display: flex;
			justify-content: space-between;
			margin-bottom: 40rpx;
			font-size: 28rpx;
			color: #666666;
			font-weight: 600;
			view{
				text-align: center;
				position: relative;
				text{
					position: absolute;
					top:22rpx;
					left: 8rpx;
					width: 92rpx;
					height: 26rpx;
					background: rgba(72,137,59,0.5);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					border-radius: 20rpx;
					display: inline-block;
				}
			}
		}
	}
	.top{
		width: 644rpx;
		margin: auto;
		margin-top: 42rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.lt{
			.one{
				font-weight: 600;
				font-size: 36rpx;
				color: #3D3D3D;
				margin-bottom: 28rpx;
			}
			.two{
				font-size: 24rpx;
				color: #3D3D3D;
			}
		}
		.rt{
			image{
				width: 168rpx;
				height: 154rpx;
			}
		}
	}
	.bjimg{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}

</style>