<template>
	<view class="n-ps-all-base">
		<uni-nav-bar 
			left-icon="back" 
			@clickLeft="goto(1)"
			fixed
			statusBar
			:title="title">
		</uni-nav-bar>
		<view class="u-content">
			<u-parse 
				v-if="content" 
				:domain="config.website"
				:previewImg="false"
				:showImgMenu="false"
				:content="content">
			</u-parse>
		</view>
		<view class="n-flex-row" v-if="showButton" :style="{marginTop:'100rpx'}">
			<u-button class="n-flex-1 n-ms-base" v-for="(item, idx) in buttonList" :key="idx" @click="switchButton(idx, item)" :text="item.title" :icon="'/static/image/' + item.value + '.png'" :plain="current==idx" :color="current==idx ? item.color:'#f8f8f8'" :customStyle="{height:'80rpx'}" :customTextStyle="{color:current==idx ? item.color:'#333333',marginLeft:'20rpx'}" shape="circle" color="#f8f8f8" throttleTime="1000"></u-button>
		</view>
		<u-empty :show="empty" icon="/static/image/empty.png" text="暂无数据~" width="200" marginTop="100"></u-empty>
	</view>
</template>

<script>
	import {getSpage,getArticle} from '@/api/login.js'
	import { mapGetters } from "vuex";
	import util from "@/util"
	
	export default {
		data() {
			return {
				empty: false,
				title:"",
				content: '',
				current: null,
				questionId: 0,
				showButton: false,
				buttonList: [
					{title:'未解决', value:'unresolved', color:'#fc3463'},
					{title:'已解决', value:'resolved', color:'#5ac725'}
				] 
			}
		},
		onLoad(evt) {
			if(evt.type=='config') this.setConfig(evt)
			if(evt.type=='question') this.setQuestion(evt)
			if(evt.type=='article') this.setArticle(evt)
			if(evt.type=='spage') this.setSpage(evt)
			this.title = evt.title;
			uni.setNavigationBarTitle({title:evt.title})
		},
		computed:{
			...mapGetters(["config"]),
		},
		methods: {
			// 设置配置内容
			setConfig(evt) {
				let config = getApp().globalData.config
				if(evt.name && config[evt.name]){
					this.content = config[evt.name]
				}else{
					this.empty = true
				}
			},
			// 设置问题内容
			setQuestion(evt) {
				this.content = evt.content
				this.questionId = evt.id
				this.showButton = true
			},
			setArticle(evt) {
				this.showButton = false;
				getArticle(evt.id).then(res=>{
					this.content = res.content
				}).catch(e=>{
					console.log(e);
				})
			},
			setSpage(evt) {
				this.showButton = false;
				getSpage(evt.name).then(res=>{
					this.content = res.content
				}).catch(e=>{
					console.log(e);
				})
			},
			// 切换按钮
			switchButton(idx, item) {
				this.current = idx
				getArticle({id:this.questionId,type:item.value})
			},
			goto:util.goto
		}
	}
</script>

<style lang="scss" scoped>

  .u-content {
    padding: 24rpx;
    font-size: 32rpx;
    color: $u-content-color;
    line-height: 1.6;
  }
</style>
