<template>
	<view class="page">
		<u-navbar title="帮助中心" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='36' id="navbar">
		</u-navbar>
		<image src="https://api.ccttiot.com/smartmeter/img/static/u4Sa5nNBvGs3zIwS5k9S" class="bj" mode=""></image>
        <view class="box">
			<u-tabs :list="list" :is-scroll="true" :current="current" @change="change"></u-tabs>
        	<u-collapse v-for="(item,index) in contlist" :key="index">
        		<u-collapse-item :title="item.title">
        			<!-- <view class="" v-html="item.content">
        				
        			</view> -->
					<u-parse :html="item.content" style="width: 100%;height: 420rpx;background-color: #fff;margin-top: 20rpx;"></u-parse>
        		</u-collapse-item>
        	</u-collapse>
			<view class="" style="width: 100%;text-align: center;margin-top: 30rpx;color: #ccc;">
				当前没有更多帮助信息咯...
			</view>
        </view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "",
                },
				list:[{
					name: '',
					value:''
				}],
				current: 0,
				id:'',
				contlist:[]
			}
		},
		onLoad() {

		},
		onShow() {
			this.getfenlei()
		},
		methods: {
			// 请求帮助分类
			getfenlei(){
				this.$u.get(`/app/articleCategory/list`).then(res =>{
					if(res.code == 200){
						this.id = res.rows[0].id
						this.getcont()
						this.list = res.rows.map(item => ({
						  name: item.categoryName,
						  id:item.id
						}))
					}
				})
			},
			// 根据分类id请求内容
			getcont(){
				this.$u.get(`/app/articleCategory/article?id=${this.id}&pageNum=1&pageSize=999`).then(res =>{
					if(res.code == 200){
						this.contlist = res.rows
					}
				})
			},
			change(index) {
				this.current = index
				this.id = this.list[index].id
				console.log('当前选中ID:', this.id)
				this.getcont()
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-scroll-view{
		padding: 0 30rpx;
		box-sizing: border-box;
		margin: auto;
	}
	page {
		background: #fff;
	}
	.box{
		width: 750rpx;
		height: 1209rpx;
		overflow: scroll;
		background: #FFFFFF;
		position: fixed;
		padding-bottom: 50rpx;
		box-sizing: border-box;
		left: 0;
		bottom: 0;
		border-radius: 30rpx 30rpx 0 0;
		/deep/ .u-collapse-content{
			width: 684rpx;
			max-height: 5110rpx;
			background: #fff;
			margin: auto;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
		}
		/deep/ .u-collapse-title{
			padding-left: 20rpx;
			box-sizing: border-box;
		}
		/deep/ .u-collapse-head{
			width: 684rpx;
			height: 94rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0,0,0,0.1);
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			margin: auto;
			margin-top: 18rpx;
		}
	}
    .bj{
		width: 750rpx;
		height: 588rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}
</style>