<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" @click="openPage('/pages/case/index')">
					<view class="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" @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 li-on" @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 class="banner wow fadeInUp">
				<image mode="widthFix" src="@/static/8.png"></image>
			</view>
			<view class="banner1 wow fadeInUp"></view>
			<view class="map wow fadeInUp">
				<view class="fl">
					<view class="title">{{companyInfo.name}}</view>
					<view class="sub">{{companyInfo.other}}</view>
					<view class="item">
						<view class="icon1">
							<image src="@/static/icon-02.png"></image>
						</view>
						<view class="txt">{{companyInfo.mobile}}</view>
					</view>
					<view class="item">
						<view class="icon2">
							<image src="@/static/icon-03.png"></image>
						</view>
						<view class="txt">{{companyInfo.email}}</view>
					</view>
					<view class="item">
						<view class="icon3">
							<image src="@/static/icon-01.png"></image>
						</view>
						<view class="txt">{{companyInfo.address}}</view>
					</view>
					<view class="code">
						<image :src="baseUrl+companyInfo.weixin"></image>
					</view>
				</view>
				<view class="fr" id="mmap">
					<baidu-map
					        　class="bm-view"
							style="height: 100%;"
					        　:center="covers"
					        　:zoom="17"
					        　:scroll-wheel-zoom="true"
					      >
						  <bm-marker :position="covers" :icon="{url: iconPath, size: {width: 26, height: 32}}">
							 <bm-label  content="先拓设计" :labelStyle="labelStyle" :offset="{width: -40, height: -60}" />
							</bm-marker>
						  </baidu-map>
				</view>
			</view>
			<view class="from">
				<view class="title wow fadeInUp">立即咨询</view>
				<view class="sub wow fadeInUp">CONSULT NOW</view>
				<view class="info wow fadeInUp">
					<view class="a">
						<view class="item">
							<view class="f"><text>*</text>称呼：</view>
							<view class="c">
								<input type="text" v-model="info.zxname" />
							</view>
						</view>
						<view class="item">
							<view class="f"><text>*</text>电话：</view>
							<view class="c">
								<input type="number" v-model="info.zxtel" />
							</view>
						</view>
						<view class="item">
							<view class="f"><text>*</text>企业名称：</view>
							<view class="c">
								<input type="text" v-model="info.zxgongsi" />
							</view>
						</view>
					</view>
					<view class="b">
						<view class="f"><text>*</text>需求类型：</view>
						<checkbox-group class="c" @change="checkboxChange">
							<label v-for="a in info.list" :key="a.id">
								<checkbox :value="a.name" :checked="a.isCheck" />{{a.name}}
							</label>
						</checkbox-group>
					</view>
					<view class="b">
						<view class="f"><text>*</text>需求描述：</view>
						<view class="c">
							<textarea class="area" v-model="info.zxms" placeholder="请输入内容..."></textarea>
						</view>
					</view>
					<view class="d">
						<view class="btn" @click="toSubmit()">提交</view>
					</view>
				</view>
			</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" @click="openPage('/pages/case/index')">
				<view class="title">案例</view>
			</view>
			<view class="li" @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 li-on" @click="openPage('/pages/contact/index')"><view class="title">联系我们</view></view>
			<view class="btn" @click="openMenu()">关闭</view>
		</view>
	</view>
</template>
<script>
	import {WOW} from 'wowjs'
	import iconPath from "@/static/location.png"
	export default {
		data() {
			return {
				isShow: false,
				iconPath,
				name: 'Hello',
				tel: 'Hello',
				company: 'Hello',
				labelStyle: {
					color: '#fff', borderRadius: "5px", borderColor:"#fff", fontSize : '18px',padding: '10px 20px', fontWeight:'600', backgroundColor: "#000"
				},
				covers: {
					lat: 32.137299,
					lng: 118.734774
				},
				navList: [],
				companyInfo: {},
				baseUrl: "",
				info: {
					zxtel: "",
					zxname: "",
					zxgongsi: "",
					zxxq: "",
					zxms: "",
					list: [{
						id: 1,
						name: "设计咨询",
						isCheck: false,
					},{
						id: 2,
						name: "产品策划",
						isCheck: false,
					},{
						id: 3,
						name: "结构设计       ",
						isCheck: false,
					},{
						id: 4,
						name: "品牌策划",
						isCheck: false,
					},{
						id: 5,
						name: "LOGO设计",
						isCheck: false,
					},{
						id: 6,
						name: "包装设计",
						isCheck: false,
					},{
						id: 7,
						name: "VI设计",
						isCheck: false,
					},{
						id: 8,
						name: "硬件设计",
						isCheck: false,
					},{
						id: 9,
						name: "软件设计",
						isCheck: false,
					},{
						id: 10,
						name: "批量生成",
						isCheck: false,
					}]
				},
			}
		},
		onLoad() {
			this.baseUrl = this.$baseUrl;
			if(uni.getStorageSync("navInfo")){
				this.navList = uni.getStorageSync("navInfo")
			}
			if(uni.getStorageSync("companyInfo")){
				this.companyInfo = uni.getStorageSync("companyInfo")
			}
			if(uni.getStorageSync("navScope") && uni.getStorageSync("navScope").type){
				uni.removeStorageSync("navScope") 
			}
		},
		mounted() {
			var wow = new WOW({
				boxClass: 'wow',    //需要执行动画元素的Class
				animateClass: 'animated',    //animation.css动画的Class
				offset: 0,    //距离可视区域多少开始执行动画
				mobile: true,    //是否在移动设备执行动画
				live: false    //异步加载的内容是否有效
			})
			wow.init();
		},
		methods: {
			checkboxChange(e){
				this.info.zxxq = e.detail.value
			},
			async toSubmit() {
				if(!this.info.zxname){
					uni.showToast({
						icon: "none",
						title: "称呼不能为空"
					})
					return ;
				}
				if(!this.info.zxtel){
					uni.showToast({
						icon: "none",
						title: "电话不能为空"
					})
					return ;
				}
				if(!this.info.zxgongsi){
					uni.showToast({
						icon: "none",
						title: "企业名称不能为空"
					})
					return ;
				}
				if(!this.info.zxgongsi){
					uni.showToast({
						icon: "none",
						title: "企业名称不能为空"
					})
					return ;
				}
				if(this.info.zxxq.length == 0){
					uni.showToast({
						icon: "none",
						title: "请勾选需求类型"
					})
					return ;
				}
				if(!this.info.zxms){
					uni.showToast({
						icon: "none",
						title: "需求描述不能为空"
					})
					return ;
				}
				const {code} = await this.$api.addform({
					zxtel: this.info.zxtel,
					zxname: this.info.zxname,
					zxgongsi: this.info.zxgongsi,
					zxxq: this.info.zxxq.join(","),
					zxms: this.info.zxms,
				});
				if(code == 1){
					uni.showToast({
						title: "提交成功"
					})
				}
				else{
					uni.showToast({
						icon: "error",
						title: "提交失败"
					})
				}
			},
			openMenu() {
				this.isShow = !this.isShow
			},
			openPage(url){
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.content{
	width: 100%;
	padding-top: 80px;
	padding-bottom: 50px;
	box-sizing: border-box;
	.banner{
		width: 100%;
		overflow: hidden;
		image{
			width: 100%;
			height: 100%;
			transition: transform 0.1s;
			-webkit-transition: transform 0.1s;
			transform: scale(1);
			-webkit-transform: scale(1);
			&:hover{
				-webkit-transform: scale(1.01);
				transform: scale(1.01);
			}
		}
		
	}
	.banner1{
		width: 100%;
		overflow: hidden;
		display: none;
		height: 210px;
		background: url(/static/8.png) center center no-repeat;
		background-size: auto 100%;
	}
	.map{
		padding: 0 8%;
		display: flex;
		align-items: flex-start;
		margin-top: 30px;
		.fl{
			width: 350px;
			height: 750px;
			background: url(/static/bg.png) center top;
			background-size: 100% 100%;
			padding: 40px 30px;
			box-sizing: border-box;
			.title{
				font-weight: 400;
				font-size: 24px;
				color: #FFFFFF;
				line-height: 56px;
			}
			.sub{
				font-weight: 400;
				font-size: 14px;
				color: #FFFFFF;
				margin-bottom: 20px;
			}
			.code{
				width: 160px;
				height: 160px;
				margin-top: 60px;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.item{
				display: flex;
				align-items: flex-start;
				font-weight: 400;
				font-size: 18px;
				color: #FFFFFF;
				padding: 10px 0;
				line-height: 30px;
				.icon1{
					width: 20px;
					height: 20px;
					margin-right: 15px;
					image{
						width: 20px;
						height: 20px;
						margin-top: 7px;
					}
				}
				.icon2{
					width: 20px;
					height: 20px;
					margin-right: 15px;
					image{
						width: 20px;
						height: 20px;
						margin-top: 7px;
					}
				}
				.icon3{
					width: 20px;
					height: 20px;
					margin-right: 15px;
					image{
						width: 20px;
						height: 22px;
						margin-top: 7px;
					}
				}
				text{
					display: block;
				}
			}
		}
		.fr{
			flex: 1;
			height: 750px;
		}
	}
	.from{
		padding: 0 8%;
		margin-top: 50px;
		.title{
			font-weight: 400;
			font-size: 48px;
			color: #333333;
		}
		.sub{
			font-size: 24px;
			color: #999999;
			margin-top: 10px;
		}
		.info{
			padding: 30px 50px;
			background-color: #FFFFFF;
			margin-top: 30px;
			.a{
				display: flex;
				align-items: center;
				.item{
					flex: 1;
					.f{
						font-weight: 400;
						font-size: 18px;
						color: #333;
						text{
							color: #E71212;
						}
					}
					.c{
						flex: 1;
						margin-right: 58px;
						margin-top: 10px;
						input{
							width: 100%;
							line-height: 70px;
							height: 70px;
							background: #FFFFFF;
							border: 1px solid #CCCCCC;
							padding: 0 10px;
							box-sizing: border-box;
							font-size: 16px;
							color: #212121;
							&.box{
								border-color: #E71212;
							}
						}
					}
				}
			}
			.btn{
				width: 200px;
				line-height: 70px;
				background: #211E70;
				border-radius: 70px;
				text-align: center;
				font-size: 18px;
				color: #FFFFFF;
				margin: 0 auto;
				margin-top: 40px;
				cursor: pointer;
			}
			.b{
				margin-top: 25px;
				overflow: hidden;
				.f{
					font-weight: 400;
					font-size: 18px;
					color: #333;
					text{
						color: #E71212;
					}
				}
				.c{
					flex: 1;
					margin-right: 58px;
					margin-top: 10px;
					label{
						font-size: 16px;
						color: #666666;
						margin-right: 20px;
						margin-top: 20px;
						display: block;
						float: left;
					}
					.area{
						width: 100%;
						min-height: 233px;
						background: #FFFFFF;
						border: 1px solid #CCCCCC;
						padding: 10px;
						font-size: 16px;
						color: #212121;
						box-sizing: border-box;
					}
				}
			}
					
		}
	}
	
	
}
/* 超小设备 (手机, 600px 以下屏幕设备) */
	@media only screen and (max-width: 599px) {
		.content{
			padding-bottom: 20px;
			.banner{
				display: none;
			}
			.banner1{
				display: block;
			}
			.map{
				padding: 0;
				margin-top: 10px;
				.fl{
					display: none;
				}
				.fr{
					height: 400px;
				}
			}
			.from {
				margin-top: 20px;
				padding: 0 10px;
				.title{
					font-size: 30px;
				}
				.sub{
					font-size: 18px;
				}
				.info{
					padding: 20px;
					background-color: #FFFFFF;
					.a{
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						.item{
							width: 100%;
							flex: none !important;
							.f{
								margin: 15px 0;
							}
							.c{
								input{
									height: 40px !important;
									line-height: 40px !important;
								}
							}
						}
					}
					
				}
			}
			
		}
	}
	
	/* 小设备 (平板电脑和大型手机，600 像素及以上) */
	@media only screen and (min-width: 600px) and (max-width: 767px) {
		.content{
			.banner{
				display: none;
			}
			.banner1{
				display: block;
			}
			.map{
				.fl{
					display: none;
				}
			}
			.from {
				margin-top: 20px;
				padding: 0 10px;
				.title{
					font-size: 30px;
				}
				.sub{
					font-size: 18px;
				}
				.info{
					padding: 20px;
					background-color: #FFFFFF;
					.a{
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						.item{
							width: 100%;
							flex: none !important;
							.f{
								margin: 15px 0;
							}
							.c{
								input{
									height: 50px !important;
									line-height: 50px !important;
								}
							}
						}
					}
					
				}
			}
		}
	}
	
	/* 中型设备（平板电脑，768 像素及以上） */
	@media only screen and (min-width: 768px) and (max-width: 991px) {
		.content{
			padding-bottom: 30px;
			.map{
				.fl{
					display: none;
				}
			}
			.from {
				margin-top: 40px;
				.title{
					font-size: 40px;
				}
				.sub{
					font-size: 20px;
				}
			}
			.info{
				padding: 20px 30px;
				background-color: #FFFFFF;
				margin-top: 20px;
				.a{
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					.item{
						width: 500px;
						flex: none !important;
						.f{
							margin: 20px 0;
						}
						.c{
							input{
								height: 60px !important;
								line-height: 60px !important;
							}
						}
					}
				}
				
			}
		}
	} 
</style>
