<template>
	<view>
		<!-- 状态栏 -->
		<nv :config="nvConfig" @nvTabTap="onNvTab" @nvBtnTap="onRightBtn"></nv>
		<block v-if="tabIndex === 0">
			<!-- 推荐商家 -->
			<view class="block-title">
				<view class="title">
					推荐商家
				</view>
			</view>
			<scroll-view scroll-x class="recommended">
				<block v-for="(item, index) in recommendBus" :key="index">
					<view class="item-box">
						<image
							class="item-cover"
							:src="item.cover"
							mode="aspectFill"
						/>
						<view class="item-title nowrap">{{item.name || '-'}}</view>
						<view class="item-btn" @click="onOpenWechat(item)">进店</view>
					</view>
				</block>
			</scroll-view>
			<!-- 热易商家 -->
			<view class="block-title">
				<view class="title">
					热易商家
				</view>
			</view>
			<swiper class="hot-swiper">
				<swiper-item v-for="(item, index) in hotBus" :key="index">
					<view class="hot-box">
						<image
							class="cover"
							:src="item.cover"
							mode="aspectFill"
						/>
						<view class="hot-content">
							<view class="hot-title nowrap">{{item.name || '-'}}</view>
							<view class="credibility">
								<uni-rate
									:readonly="true"
									color="#ddd"
									active-color="#c82626"
									:value="item.star"
									:size="14"
								/>
							</view>
							<view class="trading nowrap">累计交易{{item.orders || 0}}次</view>
						</view>
						<view class="btn" @click="onOpenWechat(item)">进店</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- 行业分类 -->
			<scroll-view class="industry-tabs" scroll-x>
				<view class="industry-item" :class="{'show':index === industryIndex}" v-for="(item, index) in industryBus" :key="index" @click="onBusIndustry(index)">{{item.title}}</view>
			</scroll-view>
			<!-- 商家 -->
			<industry-list :list="busList" @on-industry="onOpenWechat"/>
		</block>
		<!-- 易货商城 -->
		<block v-if="tabIndex === 1">
			<view class="header-back">
				<!-- 轮播图 -->
				<view class="banner">
					<swiper class="banner-swiper" indicator-color="#c82626" indicator-active-color="#f8f8f8" indicator-dots autoplay>
						<swiper-item v-for="(item, index) in banners" :key="index">
							<image class="cover" :src="item.cover" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
				</view>
				<!-- 分类 -->
				<view class="classify">
					<view class="classify-item" v-for="(item, index) in classify" :key="index" @click="onClassify">
						<image class="cover" :src="item.cover" mode="aspectFill"></image>
						<view class="title">{{item.name}}</view>
					</view>
				</view>
			</view>
			<!-- 每日推荐 -->
			<view class="block-title">
				<view class="title">
					每日推荐<text>小易精选 推荐好物</text>
				</view>
			</view>
			<view class="goods-push" v-if="JSON.stringify(position) != '{}'">
				<view class="itme item-mian" @click="onGoods(position.one)">
					<image class="cover" :src="position.one.cover" mode="widthFix"></image>
					<view class="title">{{position.one.name}}</view>
					<view class="price"><text>¥</text>{{position.one.original_price}}</view>
				</view>
				<view class="itme">
					<view class="itme-list" v-for="(item, index) in position.two" :key="index" @click="onGoods(item)">
						<image class="cover" :src="item.cover" mode="aspectFill"></image>
						<view class="title">{{item.name}}</view>
						<view class="price"><text>¥</text>{{item.original_price}}</view>
					</view>
				</view>
			</view>
			<!-- 优惠券 -->
			<view class="block-title">
				<view class="title">
					限时抢购<text>海量商家优惠券</text>
				</view>
				<navigator class="more" url="#">查看更多</navigator>
			</view>
			<view class="coupons" v-if="coupons.length > 0">
				<view class="coupons-item" v-for="(item, index) in coupons" :key="index">
					<view class="content">
						<view class="coupons-title">{{item.title}}</view>
						<view class="sun-text">{{item.title}}</view>
						<view class="btn">立即领取</view>
					</view>
					<image class="logo" :src="item.cover" mode="aspectFill"></image>
				</view>
			</view>
			<!-- 优选商品 -->
			<goods-list :list="goods" priceType="CNY" @on-goods="onGoods" />
		</block>
	</view>
</template>

<script>
	import { companies, companiesList } from '@/apis/interfaces/company'
	import { mall, list } from '@/apis/interfaces/goods'
	import goodsList from '@/components/goods-list/goods-list'
	import industryList from '@/components/industry-list/industry-list'
	export default{
		comments:{
			goodsList,
			industryList
		},
		data() {
			return {
				tabIndex	 : 0,
				nvConfig	 : {
					tabArr: [
						{title:'广场', active:true},
						{title:'易货'}
					],
					color: '#FFF',
					hideback: true,
					bgColor: '#c82626',
					
					btn: [{
						icon: '/static/icons/search-icon.png',
						style: 'paddingRight: 20rpx;'
					}]
				},
				// 易货部分
				banners		 : [],
				classify	 : [], 
				coupons		 : [],
				position	 : {},
				goods		 : [],
				pages		 : {},
				// 广场部分
				industryIndex: 0,
				recommendBus : [],
				hotBus		 : [],
				industryBus	 : [],
				busList		 : [],
				busPages	 : {}
			};
		},
		created() {
			this.getCompanies()
		},
		methods:{
			// tab
			onNvTab(e){
				let tabIndex = e.index
				for(let i in this.nvConfig.tabArr){
					if(i == tabIndex) this.nvConfig.tabArr[i].active = true
					else this.nvConfig.tabArr[i].active = false
				}
				this.tabIndex = tabIndex
				if(this.goods.length <= 0) this.getMall()
			},
			// 搜索
			onRightBtn(e){
				switch(e.index){
					case 0:
						this.$Router.push({name: 'Search'})
						break
				}
			},
			// 企业广场
			getCompanies(){
				companies().then(res=>{
					console.log(res)
					this.recommendBus = res.positions
					this.hotBus		  = res.hot
					this.industryBus  = [{title: '全部', industry_id: ''}, ...res.industries]
					this.getCompaniesList()
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 企业广场行业
			onBusIndustry(index){
				this.industryIndex = index
				this.getCompaniesList()
			},
			// 企业列表
			getCompaniesList(){
				companiesList({
					industry_id: this.industryBus[this.industryIndex].industry_id
				}).then(res => {
					this.busList  = res.data
					this.busPages = res.pages
				})
			},
			// 易货首页
			getMall(){
				mall().then(res => {
					this.classify = res.categories
					this.banners  = res.banners
					this.coupons  = res.coupons
					this.position = res.positions
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
				this.getGoods()
			},
			// 商品列表
			getGoods(){
				list().then(res => {
					this.goods = res.data
					this.pages = res.page
				})
			},
			// 商品详情
			onGoods(e){
				this.$Router.push({name: 'goodsDetails', params: {id: e.goods_id}})
			},
			// 易货分类
			onClassify(){
				this.$Router.push({name: 'goodsList'})
			},
			// 打开微信小程序
			onOpenWechat(e){
				plus.share.getServices(res => {
					let sweixin = null;
					for(let val of res){
						console.log(val)
						if(val.id === weixin){
							sweixin = val
							return
						}
					}
					sweixin ? sweixin.launchMiniProgram({
						id: e.original_id
					}):plus.nativeUI.alert('当前环境不支持微信操作!');
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 易货
	.header-back{
		background-image: linear-gradient(to bottom, white , #f8f8f8);
		padding-top: $padding;
		// 易货轮播
		.banner{
			position: relative;
			background: white;
			margin: 0 $margin;
			border-radius: $radius/2;
			padding-top: calc(50% - #{$margin * 2});
			overflow: hidden;
			.banner-swiper{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				.cover{
					width: 100%;
					height: 100%;
					border-radius: $radius/2;
				}
			}
		}
		// 分类
		.classify{
			display: flex;
			margin: $margin/2;
			flex-wrap: wrap;
			.classify-item{
				margin: $margin/2;
				width: calc(20% - #{$margin});
				text-align: center;
				.cover{
					width: 98rpx;
					height: 98rpx;
					vertical-align: top;
					margin-bottom: $margin/2;
				}
				.title{
					line-height: 40rpx;
					font-size: $title-size-sm;
					color: $text-gray;
				}
			}
		}
	}
	// 每日推荐
	.goods-push{
		margin: 0 $margin;
		background: white;
		border-radius: $radius/2;
		display: flex;
		.itme{
			width: 50%;
		}
		.item-mian{
			width: 50%;
			padding: $padding/2;
			height: 450rpx;
			box-sizing: border-box;
			text-align: center;
			border-right: solid 1rpx $border-color;
			@extend .vertical;
			.title{
				font-weight: bold;
				font-size: $title-size;
				@extend .nowrap;
				line-height: 50rpx;
			}
			.price{
				color: $text-price;
				font-size: $title-size;
				font-weight: bold;
				line-height: 50rpx;
				text{
					font-size: 80%;
					margin-right: 10rpx;
				}
			}
			.cover{
				margin-bottom: 30rpx;
				width: 220rpx;
				height: 220rpx;
				vertical-align: top;
			}
		}
		.itme-list{
			position: relative;
			padding: 25rpx $padding/2;
			padding-left: 150rpx;
			height: 150rpx;
			box-sizing: border-box;
			
			.title{
				font-size: $title-size-lg;
				@extend .nowrap;
				line-height: 60rpx;
			}
			
			.price{
				color: $text-price;
				font-size: $title-size;
				font-weight: bold;
				line-height: 40rpx;
				text{
					font-size: 80%;
					margin-right: 10rpx;
				}
			}
			.cover{
				position: absolute;
				left: $padding/2;
				top: $padding/2;
				width: calc(150rpx - #{$padding});
				height: calc(150rpx - #{$padding});
			}
		}
	}
	// 优惠券
	.coupons{
		display: flex;
		flex-wrap: wrap;
		margin: -10rpx ($margin - 10rpx);
		.coupons-item{
			background: white;
			width: calc(50% - 20rpx);
			margin: 10rpx;
			border-radius: $radius/2;
			padding: $padding - 10;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.content{
				width: calc(100% - 118rpx);
				.coupons-title{
					font-size: $title-size-lg;
					@extend .nowrap;
				}
				.sun-text{
					font-size: $title-size-sm;
					color: $text-gray;
					margin-bottom: $margin/2;
					@extend .nowrap;
				}
				.btn{
					color: $text-price;
					border:solid 1rpx $text-price;
					display: inline-block;
					font-size: $title-size-sm;
					padding: 0 ($padding/2);
					height: 45rpx;
					line-height: 45rpx;
					border-radius: 22rpx;
				}
			}
			.logo{
				width: 98rpx;
				height: 98rpx;
				border-radius: 50%;
				border:solid 1rpx $border-color;
			}
		}
	}
	// 行业分类
	.industry-tabs{
		white-space:nowrap;
		.industry-item{
			margin-left: $margin;
			display: inline-block;
			line-height: 50rpx;
			font-size: $title-size-lg;
			color: $text-gray;
			&:last-child{
				margin-right: $margin;
			}
			&.show{
				color: $text-price;
				font-size: $title-size;
				font-weight: bold;
			}
		}
	}
	// 热易商家
	.hot-swiper{
		margin: 0 $margin $margin $margin;
		height: 198rpx;
		.hot-box{
			position: absolute;
			height: 100%;
			width: 100%;
			border-radius: ($radius/2);
			background: white;
			padding: $padding;
			box-sizing: border-box;
			.cover{
				position: absolute;
				left: $padding;
				top: $padding;
				width: calc(198rpx - #{$padding * 2});
				height: calc(198rpx - #{$padding * 2});
			}
			.hot-content{
				padding-left: calc(198rpx - #{$padding});
				padding-right: calc(100rpx + #{$padding});
				.hot-title{
					font-weight: bold;
					font-size: $title-size-lg;
					line-height: 40rpx;
					height: 40rpx;
					padding-bottom: 10rpx;
				}
				.credibility{
					height: calc(108rpx - #{$padding * 2});
					font-size: $title-size-m;
					color: $text-gray;
				}
				.trading{
					line-height: 40rpx;
					font-size: $title-size-sm;
					color: $text-gray;
				}
			}
			.btn{
				position: absolute;
				top: 50%;
				right: $padding;
				font-size: $title-size-m;
				background-color: $text-price;
				color: white;
				line-height: 50rpx;
				width: 100rpx;
				text-align: center;
				margin-top: -25rpx;
			}
		}
	}
	// 推荐商家
	.recommended{
		white-space:nowrap;
		.item-box{
			display: inline-block;
			background: white;
			width: 240rpx;
			margin-left: $margin;
			border-radius: ($radius/2);
			padding: ($padding + $padding/2) $padding;
			box-sizing: border-box;
			text-align: center;
			&:last-child{
				margin-right: $margin;
			}
			.item-cover{
				background: #eee;
				width: 88rpx;
				height: 88rpx;
				vertical-align: top;
				border-radius: $radius / 2;
			}
			.item-title{
				font-weight: bold;
				font-size: $title-size-lg;
				padding: ($padding/2) 0;
			}
			.item-btn{
				font-size: $title-size-m;
				background-color: $text-price;
				color: white;
				line-height: 50rpx;
				display: inline-block;
				width: 100rpx;
			}
		}
	}
	// 模块标题
	.block-title{
		padding: $padding;
		display: flex;
		justify-content: space-between;
		.title{
			font-weight: bold;
			text{
				padding-left: $padding/2;
				font-weight: normal;
				font-size: $title-size-m;
				color: $text-gray;
			}
		}
		.more{
			font-size: $title-size-m;
			font-weight: normal;
			color: $text-gray;
		}
	}
</style>


