<template>
	<!-- <div class="mynav" :style="{'background':bg}" style="padding-bottom:5px;"> -->
	<div class="mynav" style="padding-bottom:5px;min-height: 430px;" :style="{'background-color': navs.backgroundColor}">
		<swiper v-if="navs.navType==1" :autoplay="false" :style="{'height': height + 'rpx' }">
			<swiper-item v-for="(item, index) in cols" :key="index">
				<view :style="[formatStyle]" style="height: 100%;">
					<u-grid :col="getColumn(navs)" align="left" :border="false" :height="height">
						<u-grid-item v-for="(c, i) in item" :key="i" class="grid-text" v-if="c.isShow==1" @click="clickHandler(c)"
						:height="height"
						:style="{'background':isTemplateId==c.TemplateId?'url('+getIconLink(c.checkBgImg)+')no-repeat top 0 left 0':'',
						'background-size': '100% 100%'}">
							<image :src="isTemplateId==c.TemplateId?getIconLink(c.checkIcon):getIconLink(c.icon)" mode="widthFix" style="width: 58rpx; height: 58rpx;" />
							<text :style="{'color':navs.color}">{{ c.name }}</text>
						</u-grid-item>
					</u-grid>
				</view>
			</swiper-item> 
		</swiper>
		<u-tabs v-if="navs.navType===0" :bg-color="navs.backgroundColor" :is-scroll="true" name="Name" :list="navs.navs"  :active-color="mainColor" :current="active" @change="changeHandler2"
		 :show-bar="true" :activeFontSize="34" :bold="true" height="100" duration="0" font-size="28"></u-tabs>
		<template>
			<template v-if="clickItem.ShowType==0">
				<cats v-if="clickItem.ComponentName == 'cats'"></cats>
				<activity v-if="clickItem.ComponentName == 'activity'"></activity>
				
			</template>
			<template v-else>
				<template v-if="clickItem&&clickItem.TemplateData" v-for="subItem in clickItem.TemplateData">
					<view v-if="subItem.Id == 'image-text'" class="imageText">
						<view v-html='subItem.data.content.replace(new RegExp("max-width: 100%", "gm"), "max-width:100%;display:block")'></view>
					</view>
					<rubik v-if="subItem.Id == 'rubik'" :ad="subItem.data"></rubik>
					<!-- 网课列表 -->
					<rgoods v-if="subItem.Id == 'educationCustom'" :goods="subItem.data"></rgoods>
					<matchmaking v-if="subItem.Id == 'miaiuser'" :navs="subItem.data"></matchmaking>
					<pagetitle v-if="subItem.Id == 'link'" :ts="subItem.data" ></pagetitle>
					<goods v-if="subItem.Id == 'goods'" :goods="subItem.data" ></goods>
				</template>
			</template>
		</template>
		<u-popup v-model="showModal" mode="center" length="90%">
			<view class="companyMainCon">
				<view class="companyCanhui">
					<Text class="companyLeftTitle">参会人<text>*</text>：</Text>
					<input class="uni-input inputM" style='margin-left: 10px;margin-top: 5px;' v-model="companyMsg.Principal" placeholder="请输入参会人" />
				</view>
				<view class="companyCanhui">
					<Text class="companyLeftTitle">手机号码<text>*</text>：</Text>
					<input class="uni-input inputM" type="number" style='margin-left: 10px;margin-top: 5px;' v-model="companyMsg.Mobile" placeholder="请输入手机号码" />
				</view>
				<view class="companyCanhui">
					<Text class="companyLeftTitle">邮箱地址<text>*</text>：</Text>
					<input class="uni-input inputM" type="number" style='margin-left: 10px;margin-top: 5px;' v-model="companyMsg.EMail" placeholder="请输入邮箱地址" />
				</view>
				<view class="companyCanhui">
					<Text class="companyLeftTitle">公司名(中文)<text>*</text>：</Text>
					<input class="uni-input inputM" style='margin-left: 10px;margin-top: 5px;' v-model="companyMsg.CompanyName" placeholder="请输入企业中文名称" />
				</view>
				<view style="display: flex;flex-direction: row;margin-top:30px;align-items: center;height: 50px;border-top: 1px solid #F5F5F5;width: 100%;">
					<view style="width: 50%;display: flex;align-items: center;justify-content: center" @click="showModal=false">
						<Text>取消</Text>
					</view>
					<view style="width: 50%;color: #000450;display: flex;align-items: center;justify-content: center" @click="signUpCompany">
						<Text>确定</Text>
					</view>
				</view>
			</view>
		</u-popup>
	</div>
</template>
<script>
	import cats from "@/components/navpage/category";
	import activity from "@/components/navpage/activity";
	import rubik from "@/components/rubik/index";
	import rgoods from "@/components/study/index.vue";
	import matchmaking from "@/components/matchmaking/index";
	import pagetitle from "@/components/pagetitle/index";
	import goods from "@/components/goods/index";
	export default {
		components: {
			cats,
			activity,
			rubik,
			rgoods,
			matchmaking,
			pagetitle,
			goods
		},
		props: ["navs"],
		data() {
			return {
				isTemplateId:'',
				cols: [],
				formatStyle: "",
				height: 92,//160
				bg: "",
				clickItem: {}, //当前点击的页面
				showModal:false,
				companyMsg:{
					Principal:'', //参会人
					Mobile:'', //手机号码
					EMail:'', //邮箱地址
					CompanyName:'' //公司名-中文
				},
				mainColor:"",
				active:0
			};
		},
		created() {
			// console.log(this.navs)
			this.mainColor = this.$uiConfig.mainColor;
			let tempArray = [];
			this.height = (this.navs.rows * this.height);//-21
			this.navs.navs.forEach((x, i) => {
				tempArray.push(x);
				if (
					((i + 1) % (this.navs.columns * this.navs.rows) == 0 ||
						i == this.navs.navs.length - 1) &&
					(i != 0 || this.navs.navs.length == 1)
				) {
					this.cols.push(tempArray);
					this.isTemplateId = this.cols[0][0].TemplateId
					tempArray = [];
				}
			});
			if (this.navs.showImg) {
				this.formatStyle = {
					backgroundColor: this.navs.backgroundColor,
					backgroundImage: `url('${this.backgroundPicUrl}');`,
					backgroundPosition: this.navs.position,
					backgroundSize: `${this.navs.backgroundWidth}% ${this.navs.backgroundHeight}%;`,
				};
			} else {
				if (this.navs.backgroundColor.indexOf("#") == -1) {
					this.navs.backgroundColor = "#" + this.navs.backgroundColor;
				}
				this.formatStyle = {
					backgroundColor: this.navs.backgroundColor
				};
			}
			this.bg = this.formatStyle.backgroundColor;
			if(this.cols&&this.cols.length>0){
				this.clickItem = this.cols[0][0];
			}
			//this.getList();
		},
		methods: {
			clickHandler(item) {
				this.isTemplateId = item.TemplateId
				this.clickItem={};
				this.$nextTick(function(){
					this.clickItem = item;
				})
			},
			changeHandler2(i) {
				this.active = i;
				this.clickItem={};
				this.$nextTick(function(){
					this.clickItem = this.navs.navs[i];
				})
			},
			//获取数据
			getList(){
				this.request2({
						url: "/api/AppletTrade/GetUserCompany",
						data: {},
					},
					(res) => {
						uni.hideLoading();
						if (res.resultCode == 1) {
							if(res.data==null){
								this.showModal=true
							}else{
								this.showModal=false
							}
						}
					}
				);
			},
			//保存信息
			signUpCompany(){
				if(this.companyMsg.Principal==''){
					uni.showToast({
					  title: "请输入参会人",
					  icon:'none'
					});
					return;
				}
				if(this.companyMsg.Mobile==''){
					uni.showToast({
					  title: "请输入手机号码",
					  icon:'none'
					});
					return;
				}
				if(this.companyMsg.EMail==''){
					uni.showToast({
					  title: "请输入邮箱地址",
					  icon:'none'
					});
					return;
				}
				if(this.companyMsg.CompanyName==''){
					uni.showToast({
					  title: "请输入公司中文名称",
					  icon:'none'
					});
					return;
				}
				this.request2({
						url: "/api/AppletTrade/SetCompany",
						data: this.companyMsg,
					},
					(res) => {
						if (res.resultCode == 1) {
							uni.showToast({
							  title: "保存成功",
							});
							this.getList();
						}
					}
				);
			},
			//判断返回几个图标
			getColumn(nav){
				var Num = 0;
				for(var i=0;i<nav.navs.length;i++){
					if(nav.navs[i].isShow==1){
						Num++
					}
				}
				return Num;
			}
		},
	};
</script>

<style>
	.mynva .grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: "#330330";
	}

	.grid-text view {
		background: transparent !important;
	}
	.companyMainCon{
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #fff;
	}
	.companyCanhui{
		display: flex;
		width: 100%;
		margin-top:30px;
		padding-left:20px;
	}
	.companyLeftTitle{
		display:inline-block;
		width:110px;
		text-align: right;
		margin-top: 6px;
	}
	.companyLeftTitle text{
		color:red;
		margin-left:3px; 
		background: url()no-repeat;
		
	}
</style>
