<template>
	<view class="pages">
		<view class="" :style="{height: navHeight+'px' }"></view>
		<view class="page-wrap">
			<u-swiper
				:list="bannerList"
				indicator
				keyName="sliderImg"
				indicatorMode="dot"
				@click="bannerClick()"
			></u-swiper>
			
			<view class="icon-nav u-flex u-row-around">
				<view class="nav-item" @click="$u.route('/xushuo/about')">
					<u--image 
					class="image" 
					:src="staticUrl+'/img/xushuo-index-01.png'" 
					width="101rpx" 
					height="101rpx" 
					></u--image>
					关于旭烁
				</view>
				<view class="nav-item" @click="$u.route('/xushuo/xushuoproduct')">
					<u--image 
					class="image" :src="staticUrl+'/img/xushuo-index-02.png'" width="101rpx" height="101rpx"></u--image>
					商行产品
				</view>
				<view class="nav-item" @click="vrClick">
					<u--image class="image" :src="staticUrl+'/img/xushuo-index-03.png'" width="101rpx" height="101rpx"></u--image>
					VR探访
				</view>
				<view class="nav-item">
					<u--image
					 @click="goCooper"
					 class="image" :src="staticUrl+'/img/xushuo-index-04.png'" width="101rpx" height="101rpx"></u--image>
					合作加盟
				</view>
			</view>
			
			<view class="experience">
				<view class="single-til u-flex u-row-between">
					<text class="text">体验店分布</text>
					<view class="u-flex">
						<text class="more-text" @click="$u.route('/xushuo/experience')">更多</text>
						<u-icon name="arrow-right" color="#676767" size="24rpx"></u-icon>
					</view>
				</view>
				<view class="index-img" @click="$u.route('/xushuo/experience')">
					<u--image class="image" :src="xsIntro.uxImg" width="100%" height="500rpx" radius="15rpx"></u--image>
				</view>
			</view>
			
			<view class="tabs-wrap u-flex u-row-between">
				<view class="tabs">
					 <u-tabs 
					 :list="tabsList"
					  :activeStyle="{color:'#333','font-weight': '600','font-size':'30rpx'}"
					  lineColor="#00A447"
					 @click="tabsClick"></u-tabs>
				</view>
				<view class="more u-flex">
					<text class="more-text" @click="$u.route('/xushuo/dynamic')">更多</text>
					<u-icon name="arrow-right" color="#999" size="24rpx"></u-icon>
				</view>
			</view>
			<view class="news">
				<view class="news-item u-flex u-col-top u-border-bottom" @click="goNewsDetails(item.id)" v-for="(item,index) in newsList" :key="item.id">
					<view class="pic">
						<u--image class="image" :src="item.mainImg" width="200rpx" height="145rpx"></u--image>
					</view>
					<view class="text">
						<view class="til ellipsis-2">
							{{item.title}}
						</view>
						<view class="info u-flex u-row-between">
							<view class="view-count">浏览量：{{item.viewCount}}</view>
							<view class="time">{{item.publicTime}}</view>
						</view>
						<!-- <view class="time">{{item.createTime}}</view> -->
					</view>
				</view>
			</view>
			<tabbar :tabbarIndexProps='1' />
		</view>
	</view>
</template>

<script>
	import { systemInfo } from "@/mixin.js";
	import tabbar from "../components/tabbar.vue"
	export default {
		components:{
			tabbar
		},
		mixins:[systemInfo],
		data() {
			return {
				staticUrl:this.$commonConfig.staticUrl,
				advantageSize:20,
				bannerList: [],
				tabsList:[],
				newsList:[],
				xsIntro:{}
			}
		},
		onLoad() {
			this.shopNewsType()
			this.swiperList();
			this.getIntro();
			this.getSystemInfo();
		},
		methods: {
			swiperList(){
				this.$u.api.swiperList({postion:3}).then(res=>{
					this.bannerList = res.data.rows;
					// console.log('res',res.data.rows);
				}).catch(err=>{
					console.log('swiperList',err.data);
				})
			},
			bannerClick(e){
				// console.log('bannerClick',this.bannerList[e]);
				let item = this.bannerList[e];
				uni.$u.route('/xushuo/dynamicdetails', {
					type: 'swiperDetail',
					id: item.id
				});
			},
			getIntro(){
				this.$u.api.xsGetIntro().then(res=>{
					this.xsIntro = res.data;
					console.log('res',res.data);
				}).catch(err=>{
					console.log('xsGetIntro',err.data);
				})
			},
			shopNewsType(){
				this.$u.api.shopNewsType().then(res=>{
					this.tabsList = res.data.splice(0,3);
					this.shopNewsList(this.tabsList[0]?.id);
					// console.log('res',res);
				}).catch(err=>{
					console.log('shopNewsType',err.data);
				})
			},
			shopNewsList(typeId){
				this.$u.api.shopNewsList({type:typeId}).then(res=>{
					this.newsList = res.data.rows;
					// console.log('res',res);
				}).catch(err=>{
					console.log('shopNewsType',err.data);
				})
			},
			tabsClick(item){
				let typeId = item.id;
				this.shopNewsList(typeId);
				
			},
			goNewsDetails(id){
				uni.$u.route('/xushuo/dynamicdetails', {
					id: id
				});
			},
			vrClick(){
				uni.showToast({title:'暂未开发',icon:'none'});
				// uni.$u.route('/xushuo/vrlist')
			},
			goCooper(){
				if(this.vuex_member_info.name){
					uni.$u.route('/xushuo/cooperation')
				}else{
					uni.showModal({
					  title: '提示',
					  content: '你需要登录后,才可使用此功能！',
					  success: res => {
					    if (res.confirm) {
							uni.setStorage({
								key: 'backUrl',
								data:'xushuo/cooperation' ,
								success: function () {
									uni.$u.route('/pages/login/login')
								}
							});
					    }
					  }
					})
				}
			}
		}
	}
</script>
<style>
page{
	/* background: url(@/static/img/index-bg.png) no-repeat left top; */
	background-image:url('data:image/png;base64,[encoded data, 945176 characters]');
	background-color: #F9F9F9;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% auto;
	padding-top: 0;
}
</style>
<style lang="scss" scoped>
.icon-nav{
	margin-top: 70rpx;
}
.experience{
	margin-bottom: 50rpx;
}
.subsection{
	width: 240rpx;
	height: 66rpx;
}
</style>
