<template>
	<view class="xiantuo">
		<view class="header">
			<view class="logo">
				<image src="@/static/logo.png"></image>
			</view>
			<view class="nav">
				<view class="li" @click="openPage('/pages/index/index')">
					<view class="title">首页</view>
				</view>
				<view class="li" :class="type !=2 ?'li-on':''" @click="openPage('/pages/case/index')">
					<view class="title">{{title?title:'案例'}}</view>
					<view class="desc">
						<view class="item" v-for="(a,i) in navList" @click="openPage('/pages/case/index?type='+a.scode+'&name='+a.name)">{{a.name}}</view>
					</view>
				</view>
				<view class="li" :class="type==2?'li-on':''" @click="openPage('/pages/news/index')"><view class="title">资讯</view></view>
				<view class="li" @click="openPage('/pages/about/index')"><view class="title">关于我们</view></view>
				<view class="li" @click="openPage('/pages/contact/index')"><view class="title">联系我们</view></view>
			</view>
			<view class="icon" @click="openMenu()">
				<image src="@/static/caidan.png"></image>
			</view>
		</view>
		<view class="content">
			<view v-html="info.content"></view>
		</view>
		<view class="footer">
			<view class="t wow fadeInUp">
				<view class="a">
					<image :src="baseUrl+companyInfo.weixin"></image>
				</view>
				<view class="b">微信</view>
				<view class="c">邮箱：{{companyInfo.email}}</view>
			</view>
			<view class="d wow fadeInUp" data-wow-delay="0.2s">
				<view class="p">联系方式：<text>{{companyInfo.contact}}{{companyInfo.mobile}}</text></view>
				<view class="p">联系地址：<text>{{companyInfo.address}}</text></view>
			</view>
		</view>
		<view class="menu" v-if="isShow">
			<view class="li" @click="openPage('/pages/index/index')">
				<view class="title">首页</view>
			</view>
			<view class="li" :class="type !=2 ?'li-on':''" @click="openPage('/pages/case/index')">
				<view class="title">案例</view>
			</view>
			<view class="li" :class="type ==2 ?'li-on':''" @click="openPage('/pages/news/index')"><view class="title">资讯</view></view>
			<view class="li" @click="openPage('/pages/about/index')"><view class="title">关于我们</view></view>
			<view class="li" @click="openPage('/pages/contact/index')"><view class="title">联系我们</view></view>
			<view class="btn" @click="openMenu()">关闭</view>
		</view>
	</view>
</template>

<script>
	import {WOW} from 'wowjs'
	export default {
		data() {
			return {
				tabIndex: -1,
				isShow: false,
				title: '',
				navList: [],
				companyInfo: {},
				navScope: "",
				baseUrl: "",
				info:{},
				type: ""
			}
		},
		onLoad(o) {
			this.baseUrl = this.$baseUrl
			this.navScope = o.id
			this.type = o.type?o.type:-1
			if(uni.getStorageSync("navInfo")){
				this.navList = uni.getStorageSync("navInfo")
			}
			if(uni.getStorageSync("companyInfo")){
				this.companyInfo = uni.getStorageSync("companyInfo")
			}
		},
		mounted() {
			var wow = new WOW({
				boxClass: 'wow',    //需要执行动画元素的Class
				animateClass: 'animated',    //animation.css动画的Class
				offset: 0,    //距离可视区域多少开始执行动画
				mobile: true,    //是否在移动设备执行动画
				live: false    //异步加载的内容是否有效
			})
			wow.init();
			this.getDetail();
		},
		methods: {
			async getDetail() {
				const {data} = await this.$api.getDetail(this.navScope);
				data.content = data.content.replace(/style=""/g,'').replace(/<img src=/g,'<img style="width: 100%; display:block" src=')
				this.info = data
				uni.setNavigationBarTitle({
					title: data.title
				})
			},
			openMenu() {
				this.isShow = !this.isShow
			},
			openPage(url){
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.content{
	min-height: calc(100vh - 370px);
	padding-top: 80px;
	padding-bottom: 30px;
	padding-left: 30px;
	padding-right: 30px;
	font-size: 14px;
	line-height: 30px;
	text-align: left;
	color: #212121;
	box-sizing: border-box;
	overflow-y: hidden;
}

</style>
