<template>
	<view class="home-article" v-if="isLoad">
		<fixed>
			<view>
				<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex" :activeColor="primaryColor"
					height="100rpx"></tab>
			</view>
		</fixed>
		<view class="mg-md pd-md fill-base box-shadow radius-24" v-if="tabList.length > 0">
			<parser :html="tabList[activeIndex].text" @linkpress="linkpress" show-with-animation lazy-load>加载中...
			</parser>
		</view>
		<view class="space-footer"></view>
	</view>
</template>

<script>
	import {
		mapState,
	} from "vuex"
	import parser from "@/components/jyf-Parser/index"
	export default {
		components: {
			parser
		},
		data() {
			return {
				isLoad: false,
				options: {},
				tabList: [],
				activeIndex: 0,
				id: 0
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			userInfo: state => state.user.userInfo,
		}),
		onLoad(options) {
			this.$util.showLoading()
			this.options = options
			this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh()
			uni.stopPullDownRefresh()
		},
		methods: {
			async initIndex() {
				let data = await this.$api.home.aboutUsList();
				let {
					id = 0
				} = this
				let ind = data.findIndex(item => {
					item.id == id
				})
				this.activeIndex = ind == -1 ? 0 : ind
				this.tabList = data
				this.isLoad = true
				this.$util.hideAll()
			},
			initRefresh() {
				this.initIndex()
			},
			handerTabChange(index) {
				this.activeIndex = index
				this.id = this.tabList[index].id
			},
			linkpress(res) {
				console.log("linkpress", res);
				// #ifdef APP-PLUS
				this.$util.goUrl({
					url: res.href,
					openType: 'web'
				})
				// #endif
			},
		}
	}
</script>


<style lang="scss">
	.home-article {
		.article-title {
			font-size: 44rpx;
			line-height: 65rpx;
		}
	}
</style>
