<template>
	<view class="center">
		<heard></heard>
		<view class="test_title">节水测试</view>
		<view class="form">
			<view class="form-item">
				<view class="form-left">姓名：</view>
				<text class="tip">*</text>
				<view class="form-right"><input type="text" @input="onAction" class="list-input" v-model="name" placeholder="请填写姓名" /></view>
			</view>
			<view class="form-item">
				<view class="form-left">地址：</view>
				<text class="tip"></text>
				<view class="form-right"><input @input="onAction" class="list-input" v-model="address" type="text" placeholder="请填写详细地址" /></view>
			</view>
			<view class="form-item">
				<view class="form-left">联系电话:</view>
				<text class="tip">*</text>
				<view class="form-right"><input @input="onAction" class="list-input" v-model="telephone" type="number" placeholder="请填写联系电话" /></view>
			</view>
			<view class="form-item">
				<view class="form-left">生产线类型：</view>
				<text class="tip">*</text>
				<view class="form-right">
					<picker :value="index" :range="array" @change="bindPickerType" class="list-input1">
						<text style="color: #C7C9D1;">{{ line_type || '请选择生产类型' }}</text>
					</picker>
				</view>
			</view>
			<view class="form-item">
				<view class="form-left">生产线数量：</view>
				<text class="tip">*</text>
				<view class="form-right"><input class="list-input" type="number" @input="onAction" v-model="line_num" placeholder="请填写生产线数量" /></view>
			</view>
			<view class="form-item">
				<view class="form-left">目前用水量(吨/小时)：</view>
				<text class="tip">*</text>
				<view class="form-right"><input class="list-input" type="number" @input="onAction" v-model="water_using" placeholder="请填写目前用水量" /></view>
			</view>
			<view class="form-item">
				<view class="form-left">工作时长(小时)：</view>
				<text class="tip"></text>
				<view class="form-right"><input @input="onAction" class="list-input" v-model="day_work_times" type="number" placeholder="请填写每日工作时长,默认为12小时" /></view>
			</view>
			<view class="form-item">
				<view class="form-left">年工作日数：</view>
				<text class="tip"></text>
				<view class="form-right"><input @input="onAction" class="list-input" v-model="year_work_day" type="number" placeholder="请填写每年工作日数,默认为330天" /></view>
			</view>
			<view class="form-item">
				<view class="form-left">废水处理成本(元/吨)：</view>
				<text class="tip">*</text>
				<view class="form-right"><input @input="onAction" class="list-input" v-model="deal_cost" type="number" placeholder="请填写废水处理成本" /></view>
			</view>
		</view>
		<view class="btn" @click="next" v-if="isShow"><view class="btn-left">提交</view></view>
		<view class="result" v-if="num1">
			<view class="result-title">测试结果</view>
			<view class="border"></view>
			<view class="result-box">
				<view class="swiper-item">
					<view class="effect">
						<view class="information">
							<view class="benefits">
								<view class="unit">
									<view class="unitBox">
										<view class="unitText">{{ num1 }}</view>
										<view class="unitText">~</view>
										<view class="unitText">{{ num2 }}</view>
									</view>
								</view>
								<view class="info">改造后用水量(吨/小时)</view>
							</view>
							<view class="benefits">
								<view class="unit">
									<view class="unitBox">
										<view class="unitText">{{ num3 }}</view>
										<view class="unitText">~</view>
										<view class="unitText">{{ num4 }}</view>
									</view>
								</view>
								<view class="info">年经济效益(万元)</view>
							</view>
						</view>
						<view class="refresh" @click="refresh">重新测试</view>
					</view>
				</view>
			</view>
		</view>
		<aboutUs class="aboutUs"></aboutUs>
	</view>
</template>
<script>
import { loadIndexs, cateList, aboutlist, storylist, caseslist, productlist, articlelist, addForm, companies, machine, machineId } from '@/api/index.js';
import aboutUs from '@/components/public/introduce.vue';
import { changeTaber } from '@/utils/tarberChange.js';
import heard from '@/components/public/heard.vue';
export default {
	components: {
		aboutUs,
		heard
	},
	data() {
		return {
			isShow: true,
			type: '',
			name: '',
			address: '',
			telephone: '',
			line_type: '',
			line_num: '',
			water_using: '',
			day_work_times: 12,
			year_work_day: 330,
			deal_cost: '',
			array: ['塑料镀铬线', '五金镀铬线'],
			index: '',
			num4: '',
			num3: '',
			num2: '',
			num1: ''
		};
	},
	onLoad() {
		this.loadData();
	},
	onShow() {
		this.$nextTick(function() {
			changeTaber(4);
		});
	},
	methods: {
		alertChange(tab) {
			if (tab.show) {
				this.onAction(false);
			} else {
				this.onAction();
			}
		},
		/* 设置弹窗 */
		zoomendChange(type) {
			this.zoomActive = type.target.getZoom();
		},
		// 显示数据
		showData(item) {
			this.autoPlay = false;
			console.log('点击小点点------', item.name);
			this.itemData = item;
			this.machineid = item.id;

			this.$refs.popupItem.open();
			// machine({id: this.machineid}).then(e => {
			machine({}, this.machineid)
				.then(e => {
					// this.machineData = e.data;
					console.log('======>', e);
					this.machineDataModal = e.data;
					this.machineDataModal.machine_name = item.name;
				})
				.catch(e => {
					console.log(e);
				});
		},
		toPre() {
			console.log('this.checkid', this.checkid);
			if (this.checkid > 0) {
				this.checkid--;
				console.log('this.checkid', this.checkid);
			} else {
				this.checkid = 2;
			}
		},
		toNext() {
			console.log('this.checkid', this.checkid);
			if (this.checkid < 2) {
				this.checkid++;
				console.log('this.checkid', this.checkid);
			} else {
				this.checkid = 0;
			}
		},
		// 获取设备信息
		machine() {
			machine({}, 0)
				.then(e => {
					// console.log('获取设备信息');
					this.machineData = e.data;
					// console.log(e);
				})
				.catch(e => {
					console.log(e);
				});
		},
		// 获取公司列表
		getMapList() {
			// zhong
			companies()
				.then(e => {
					this.companyList = e.data.map(e => {
						// 初始化弹窗显示隐藏
						e.show = false;
						// e.lattitude = 28.243198;
						// e.longtitude = 121.279239;
						// 设置文字样式
						e.textType = {
							width: -((e.name.length / 2) * 10),
							height: 30
						};
						e.style = {
							background: 'none',
							color: '#333333',
							fontSize: '10px',
							border: 'none'
						};
						return e;
					});
					// 设置数据加载完毕
					this.mapLoding = true;
					// uni.showModal({
					// 	title: '提示',
					// 	content: '地图加载完毕',
					// 	showCancel: false
					// });
					// console.log('公司列表', this.companyList);
				})
				.catch(e => {
					console.log(e);
				});
		},
		// 初始化地图/
		init({ BMap, map }) {
			this.map = map;
			// 初始化地图,设置中心点坐标
			var point = new BMap.Point(121.434817, 28.653649);
			map.centerAndZoom(point, this.zoomActive);
			// this.setMarker();
			// 添加鼠标滚动缩放
			// map.enableScrollWheelZoom();
		},
		//切换事件
		onAction(start = true) {
			console.log('触发点击');
			this.autoPlay = false;
			clearTimeout(this.outPlay);
			if (start) {
				this.outPlay = setTimeout(e => {
					this.autoPlay = true;
				}, this.setOutTime);
			}
		},
		// 渲染首页数据
		async loadData() {
			loadIndexs({}).then(({ data }) => {
				this.carouselList = data.loopProduct.map(item => 'http://tianli.liuniu946.com/' + item.coverimage);
				this.list3 = data;
			});
		},

		// 表单交互 提交
		next() {
			this.isShow = false
			if (this.name == '') {
				uni.showToast({
					title: '请输入您的姓名',
					icon: 'none',
					duration: 2000
				});
				this.$api.msg('');
				return;
			}
			if (this.address == '') {
				uni.showToast({
					title: '请填写详细地址',
					icon: 'none',
					duration: 2000
				});
				// this.$api.msg('请填写详细地址');
				return;
			}
			if (this.telephone == '') {
				uni.showToast({
					title: '请填写联系电话',
					icon: 'none',
					duration: 2000
				});
				// this.$api.msg('请填写联系电话');
				return;
			}
			const reg = /^(\+?0?86-?)?1[\d]\d{9}$/;
			if (!reg.test(this.telephone)) {
				uni.showToast({
					title: '请填写正确的手机格式',
					icon: 'none',
					duration: 2000
				});
				// this.$api.msg('请输入您的手机号码');
				return;
			}
			if (this.line_type == '') {
				uni.showToast({
					title: '请填写生产线类型',
					icon: 'none',
					duration: 2000
				});
				// this.$api.msg('请输入生产线类型');
				return;
			}
			if (this.line_num == '') {
				uni.showToast({
					title: '请填写生产线数量',
					icon: 'none',
					duration: 2000
				});
				// this.$api.msg('请输入生产线数量');
				return;
			}
			if (this.water_using == '') {
				uni.showToast({
					title: '请填写目前用水量',
					icon: 'none',
					duration: 2000
				});
				// this.$api.msg('请填写目前用水量');
				return;
			}

			if (this.deal_cost == '') {
				uni.showToast({
					title: '请填写废水处理成本',
					icon: 'none',
					duration: 2000
				});
				// this.$api.msg('请填写废水处理成本');
				return;
			}
			uni.showLoading({
				title: '计算中',
				mask: true
			});
			addForm({
				name: this.name,
				address: this.address,
				telephone: this.telephone,
				line_type: this.line_type,
				line_num: this.line_num,
				water_using: this.water_using,
				day_work_times: 12,
				year_work_day: 330,
				deal_cost: this.deal_cost
			})
				.then(e => {
					uni.hideLoading();
					console.log('请求成功');
					(this.isShow = false),
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 0
						});
					/** 
								交互式表单公式
									改造后用水量为：目前用水量的30%—70%
									经济效益=节约的水量X年工作时长（小时）X废水处理成本
									节约的水量=目前用水量—改造后的用水量
									经济效益也是一个范围值
							 **/
					// 改造后用水量
					// this.num1 = this.water_using * 0.3;
					// this.num2 = this.water_using * 0.7;
					this.num1 = parseFloat(this.water_using * 0.3).toFixed(2);
					this.num2 = parseFloat(this.water_using * 0.7).toFixed(2);
					console.log('this.num1', this.num1);
					// 节约的水量=目前用水量—改造后的用水量
					this.savaWater1 = this.water_using - this.num1;
					this.savaWater2 = this.water_using - this.num2;
					console.log('this.savaWater1', this.savaWater1);
					console.log('this.day_work_times', this.day_work_times);
					console.log('this.deal_cost', this.deal_cost);
					// 经济效益=节约的水量X年工作时长（小时）X废水处理成本
					this.num3 = parseFloat((this.savaWater1 * 3960 * this.deal_cost) / 10000).toFixed(2);
					this.num4 = parseFloat((this.savaWater2 * 3960 * this.deal_cost) / 10000).toFixed(2);

					// this.address = "";
					// this.telephone = "";
					// this.line_type = "";
					// this.line_num = "";
					// this.water_using = "";
					// this.day_work_times = "";
					// this.year_work_day = "";
					// this.deal_cost = "";
				})
				.catch(e => {
					uni.hideLoading();
				});
		},
		change(item) {
			// console.log('-----this.checkid', item);
			let id = item;
			this.checkid = id;
			this.onAction();
		},

		// 重新测试
		refresh() {
			this.isShow = true;
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
		},
		// 选择生产线类型
		bindPickerType: function(e) {
			console.log(this.array[e.target.value]);
			this.line_type = this.array[e.target.value];
			this.index = e.target.value + 1;
			this.onAction();
		},
		change1(item) {
			console.log(123, item);
			let id = item;
			this.checkid1 = id;
		},
		// 监听切换事件
		listChange(e) {
			// 触发改变事件
			this.onAction();
			this.checkid = e.detail.current;
			if (this.checkid == 1 && !this.showMap) {
				this.showMap = true;
			}
			// uni.pageScrollTo({
			// 	duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
			// 	scrollTop: 0 //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
			// });
		},
		listChange1(id) {
			this.current = id;
		},
		// 点击更多 导航
		toNavList() {
			this.$refs.popup.open();
		},

		goBack(type) {
			this.$refs[type][0].close();
		},

		cancel() {
			this.$refs.popup.close();
		},
		cancelAll(type) {
			this.$refs.popup.close();
			this.$refs[type][0].close();
		},
		handlePop(index, type) {
			this.type = type;
			console.log('this.type', this.type);
			this.$refs[type][0].open();
			cateList({}, this.type).then(({ data }) => {
				this.productList = data;
			});
		},

		// 获取子列表
		navInfo(id, name, item) {
			let obj = this;
			obj.category_id = id;
			obj.current = id;
			console.log('进入', obj.type);
			if (obj.type == 'about') {
				aboutlist({
					// title: obj.title,
					category_id: obj.category_id,
					page: obj.page,
					limit: obj.limit
				}).then(({ data }) => {
					obj.list1 = data.list.map(item => ({
						title: item.title,
						id: item.id
					}));
				});
			}
			if (obj.type == 'story') {
				storylist({
					// title: obj.title,
					category_id: obj.category_id,
					page: obj.page,
					limit: obj.limit
				}).then(({ data }) => {
					obj.list1 = data.list.map(item => ({
						title: item.title,
						id: item.id
					}));
				});
			}
			if (obj.type == 'cases') {
				caseslist({
					// title: obj.title,
					category_id: obj.category_id,
					page: obj.page,
					limit: obj.limit
				}).then(({ data }) => {
					obj.list1 = data.list.map(item => ({
						title: item.title,
						id: item.id
					}));
				});
			}
			if (obj.type == 'product') {
				productlist({
					// title: obj.title,
					category_id: obj.category_id,
					page: obj.page,
					limit: obj.limit
				}).then(({ data }) => {
					obj.list1 = data.list.map(item => ({
						title: item.title,
						id: item.id
					}));
				});
			}
			//
			if (obj.type == 'article') {
				articlelist({
					// title: obj.title,
					category_id: obj.category_id,
					page: obj.page,
					limit: obj.limit
				}).then(({ data }) => {
					obj.list1 = data.list.map(item => ({
						title: item.title,
						id: item.id
					}));
				});
			}
		},
		// 点击子列表
		toproList(id) {
			console.log('当前子列表id：', id);
			// let id = id,

			if (this.type == 'about') {
				uni.navigateTo({
					url: '/pages/about/about?id=' + id
				});
			}
			if (this.type == 'story') {
				uni.navigateTo({
					url: '/pages/story/story?id=' + id
				});
			}
			if (this.type == 'cases') {
				uni.navigateTo({
					url: '/pages/cases/cases?id=' + id
				});
			}
			if (this.type == 'product') {
				uni.navigateTo({
					url: '/pages/product/product?id=' + id
				});
			}
			if (this.type == 'article') {
				uni.navigateTo({
					url: '/pages/article/article?id=' + id
				});
			}
		}
	}
};
</script>

<style lang="scss">
.center {
	height: auto;
	background: #ffffff;
	min-height: 100%;
}

.img {
	margin: 17rpx 0 17rpx 41rpx;
	width: 208rpx;
	height: 52rpx;

	image {
		width: 100%;
		height: 100%;
	}
}

.test_title {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 60rpx;
	font-size: 22rpx;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	color: #ffffff;
	background-color: #0165b5;
}

.test_table {
	font-size: 22rpx;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	color: #000000;
	display: flex;
	justify-content: space-between;
	padding: 10rpx 30rpx;

	input {
		width: 340rpx;
		height: 40rpx;
		background: #ffffff;
		border: 1px solid #b9b7b7;
		border-radius: 2rpx;
		font-size: 16rpx;
		padding-left: 16rpx;
	}
}

.form {
	background: #ffffff;
	width: 100%;
	padding: 14rpx;
	// margin-top: 54rpx;

	.form-item {
		width: 98%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10rpx;

		.form-left {
			color: #212121;
			font-size: 22rpx;
			width: 250rpx;
			flex-shrink: 0;
		}

		.tip {
			margin-left: 0rpx;
			color: #ff0000;
			width: 34rpx;
			height: 34rpx;
		}

		.form-right {
			margin-left: 2rpx;
			line-height: 48rpx;
			height: 48rpx;
			padding-left: 12rpx;
			width: 100%;
			background-color: #ffffff;
			border: 2rpx solid #bdbdbd;
			border-radius: 6rpx;
			.list-input {
				font-size: 18rpx;
				height: 100%;
				.input-placeholder {
					color: #c7c9d1;
					font-size: 18rpx;
				}
			}

			.list-input1 {
				color: #757575;
				font-size: 18rpx;
			}
		}
	}
}

.btn {
	margin-top: 34rpx;
	width: 100%;
	height: 70rpx;
	display: flex;
	justify-content: center;
	color: #ffffff;
	font-size: 26rpx;
	margin-bottom: 30rpx;
	.btn-left {
		width: 88%;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		// margin-left: 44rpx;
		background-color: #3874cb;
		border-radius: 8rpx;
	}
}

.result {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.result-title {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 180rpx;
		height: 35rpx;
		font-size: 26rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #000000;
		position: relative;
		top: 15rpx;
		z-index: 99;
		background-color: #ffffff;
	}

	.border {
		width: 100%;
		height: 1rpx;
		border: 1rpx solid #eee9e9;
	}

	.result-box {
		width: 100%;
		background: #0165b5;
		margin-top: 24rpx;
		.effect {
			.title {
				margin-top: 10rpx;
				font-size: 32rpx;
				color: #ffffff;
				text-align: center;
			}

			.information {
				width: 100%;
				// height: 200rpx;
				display: flex;
				justify-content: space-between;

				.benefits {
					padding: 24rpx 0;
					width: 50%;
					display: flex;
					flex-direction: column;
					align-items: center;
					.unit {
						width: 200rpx;
						height: 200rpx;
						background-color: #3874cb;
						border-radius: 50%;
						color: #ffffff;
						font-size: 64rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						.unitText {
							text-align: center;
							font-size: 34rpx;
						}
					}

					.info {
						color: #ffffff;
						font-size: 24rpx;
						margin-top: 32rpx;
					}
				}
			}

			.refresh {
				width: 270rpx;
				height: 60rpx;
				background-color: #3874cb;
				margin: 44rpx auto;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #ffffff;
				font-size: 24rpx;
			}
		}
	}
}

.tanchang {
	height: 132rpx;
}
</style>