<template>
	<div class="jieshui_box">
		<div class="swiper-item">
			<div class="form">
				<div class="form-item">
					<div class="form-left"><span>*</span>姓名：</div>
					<div class="form-right"><el-input class="list-input" v-model="name" type="text" placeholder="请填写姓名"></el-input></div>
				</div>
				<div class="form-item">
					<div class="form-left">地址</div>
					<div class="form-right"><el-input class="list-input" v-model="address" type="text" placeholder="请填写详细地址"></el-input></div>
				</div>
				<div class="form-item">
					<div class="form-left"><span>*</span>联系电话:</div>
					<div class="form-right"><el-input class="list-input" v-model="telephone" type="text" placeholder="请填写联系电话"></el-input></div>
				</div>
				<div class="form-item">
					<div class="form-left"><span>*</span>生产线类型:</div>
					<div class="form-right">
						<el-select class="list-input" v-model="line_type" placeholder="请选择生产类型">
							<el-option v-for="item in options" :key="item.value" :label="item.value" :value="item.value"></el-option>
						</el-select>
					</div>
				</div>
				<div class="form-item">
					<div class="form-left"><span>*</span>生产线数量:</div>
					<div class="form-right"><el-input class="list-input" v-model="line_num" type="number" placeholder="请填写生产线数量"></el-input></div>
				</div>
				<div class="form-item">
					<div class="form-left"><span>*</span>目前用水量(吨/小时):</div>
					<div class="form-right"><el-input class="list-input" v-model="water_using" type="number" placeholder="请填写目前用水量"></el-input></div>
				</div>
				<div class="form-item">
					<div class="form-left">日工作时长(小时):</div>
					<div class="form-right"><el-input class="list-input" v-model="day_work_times" type="number" placeholder="默认为12小时"></el-input></div>
				</div>
				<div class="form-item">
					<div class="form-left">年工作日数(天):</div>
					<div class="form-right"><el-input class="list-input" v-model="year_work_day" type="number" placeholder="默认为330日"></el-input></div>
				</div>
				<div class="form-item">
					<div class="form-left"><span>*</span>废水处理成本(元/吨):</div>
					<div class="form-right"><el-input class="list-input" v-model="deal_cost" type="number" placeholder="请填写废水处理成本"></el-input></div>
				</div>
			</div>
			<div class="btn"><div class="btn-left" @click="next">提交</div></div>
		</div>

		<div class="swiper-item" v-if="isshow">
			<div class="effect">
				<div class="title">改造后的数据</div>
				<div class="information">
					<div class="benefits">
						<div class="unit">
							<!-- {{ num1 }} -->
							<div class="unit1">{{ num1 }}</div>
							<div class="unit2">~</div>
							<div class="unit3">{{ num2 }}</div>
						</div>
						<div class="info">改造后用水量(吨/小时)</div>
					</div>
					<div class="benefits">
						<div class="unit">
							<!-- {{ num1 }} -->
							<div class="unit1">{{ num3 }}</div>
							<div class="unit2">~</div>
							<div class="unit3">{{ num4 }}</div>
						</div>
						<div class="info">年经济效益(万元)</div>
					</div>
				</div>
				<div class="btn"><div class="btn-left" @click="refresh">重新测试</div></div>
			</div>
		</div>
	</div>
</template>

<script>
import { formBaoCun } from '../api/index';
export default {
	name: 'test',
	data() {
		return {
			recommend1: [
				{
					id: 0,
					title: '01.填写信息'
				},
				{
					id: 1,
					title: '02.预测效果'
				}
			],
			name: '',
			address: '',
			telephone: '',
			line_type: '',
			line_num: '',
			water_using: '',
			day_work_times: 12,
			year_work_day: 330,
			deal_cost: '',
			options: [
				{
					value: '塑料镀铬线'
				},
				{
					value: '五金镀铬线'
				}
			],
			isshow: false,
			num1: '',
			num2: '',
			num3: '',
			num4: '',
			savaWater1: '',
			savaWater2: ''
		};
	},
	mounted() {},
	created() {},
	methods: {
		// 提交测试
		next() {
			let obj = this;
			if (!obj.name) {
				obj.$alert('请输入姓名', '提示', {
					confirmButtonText: '确定'
				});
				return;
			}
			if (!obj.telephone) {
				obj.$alert('请填写联系电话', '提示', {
					confirmButtonText: '确定'
				});
				return;
			}
			const reg = /^(\+?0?86-?)?1[\d]\d{9}$/;
			if (!reg.test(obj.telephone)) {
				obj.$alert('请填写正确的手机格式', '提示', {
					confirmButtonText: '确定'
				});
				return;
			}
			if (!obj.line_type) {
				obj.$alert('请填写生产线类型', '提示', {
					confirmButtonText: '确定'
				});
				return;
			}
			if (!obj.line_num) {
				obj.$alert('请填写生产线数量', '提示', {
					confirmButtonText: '确定'
				});
				return;
			}
			if (!obj.water_using) {
				obj.$alert('请填写目前用水量', '提示', {
					confirmButtonText: '确定'
				});
				return;
			}

			if (!obj.deal_cost) {
				obj.$alert('请填写废水处理成本', '提示', {
					confirmButtonText: '确定'
				});
				return;
			}
			
			formBaoCun({
				name: obj.name,
				address: obj.address,
				telephone: obj.telephone,
				line_type: obj.line_type,
				line_num: obj.line_num,
				water_using: obj.water_using,
				day_work_times: obj.day_work_times,
				year_work_day: obj.year_work_day,
				deal_cost: obj.deal_cost
			}).then(e => {
				
				obj.isshow = true;
				obj.num1 = '';
				obj.num2 = '';
				obj.num3 = '';
				obj.num4 = '';
				obj.savaWater1 = '';
				obj.savaWater2 = '';
				/** 
						交互式表单公式
							改造后用水量为：目前用水量的30%—70%
							经济效益=节约的水量X年工作时长（小时）X废水处理成本
							节约的水量=目前用水量—改造后的用水量
							经济效益也是一个范围值
					 **/
				// 改造后用水量
				// this.num1 = this.water_using * 0.3;
				// this.num2 = this.water_using * 0.7;
				obj.num1 = parseFloat(obj.water_using * 0.3).toFixed(2);
				obj.num2 = parseFloat(obj.water_using * 0.7).toFixed(2);
				
				// 节约的水量=目前用水量—改造后的用水量
				obj.savaWater1 = obj.water_using - obj.num1;
				obj.savaWater2 = obj.water_using - obj.num2;
				
				// 经济效益=节约的水量X年工作时长（小时）X废水处理成本
				obj.num3 = parseFloat((obj.savaWater1 * 3960 * obj.deal_cost) / 10000).toFixed(2);
				obj.num4 = parseFloat((obj.savaWater2 * 3960 * obj.deal_cost) / 10000).toFixed(2);
			});
		},
		refresh() {
			this.isshow = false;
		}
	}
};
</script>

<style lang="scss">
.jieshui_box {
	max-width: 1180px;
	min-width: 1060px;
	margin: 0 auto ;
	.recommend1 {
		width: 100%;
		display: flex;
		justify-content: center;
		.recommend_list {
			height: 62px;
			position: relative;
			&:first-of-type {
				margin-right: 50px;
			}
			.re-nva {
				width: 100%;
				height: 62px;
				.re_img {
					width: 264px;
					height: 62px;
				}
			}

			.nav-item {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 62px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 16px;
			}
		}
	}

	.form {
		width: 100%;
		padding: 24px;
		// margin-top: 54rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.form-item {
			width: 45%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 22px;
			.form-left {
				color: #212121;
				font-size: 22px;
				width: 230px;
				flex-shrink: 0;
				span {
					color: #EF2F27;
				}
			}

			.form-right {
				margin-left: 12px;
				width: 100%;
				// background-color: #f2f2f2;
				// border: 1px solid #bdbdbd;
				border-radius: 8px;

				.list-input {
					color: #333;
					font-size: 18px;
					width: 100%;
					// padding: 12px;
					// background-color: #f2f2f2;
					// border: 1px solid #bdbdbd;
				}
				.list-input1 {
					color: #757575;
					font-size: 18px;
				}
			}
		}
	}
	.btn {
		margin-top: 34px;
		width: 100%;
		height: 70px;
		display: flex;
		justify-content: center;
		color: #ffffff;
		font-size: 26px;

		.btn-left {
			width: 295px;
			height: 60px;
			background: #1976d2;
			border-radius: 4px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24px;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			cursor: pointer;
		}
	}

	.effect {
		padding-top: 15px;
		background-color: #0165b5;
		margin-top: 15px;
		padding-bottom: 15px;
		margin-bottom: 15px;
		color: #ffffff;
		.title {
			text-align: center;
			font-size: 32px;
		}
		.information {
			width: 100%;
			// height: 200rpx;
			display: flex;
			justify-content: space-between;

			.benefits {
				padding: 24px 0;
				width: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				.unit {
					width: 200px;
					height: 200px;
					background-color: #3874cb;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 64px;
					display: flex;
					flex-direction: column;
					.unit1 {
						width: 100%;
						font-size: 34px;
						display: flex;
						padding-left: 34px;
						justify-content: flex-start;
						// background-color: pink;
					}
					.unit2 {
						font-size: 34px;
						margin: 0 12px;
					}
					.unit3 {
						width: 100%;
						font-size: 34px;
						display: flex;
						justify-content: flex-end;
						padding-right: 34px;
					}
				}

				.info {
					font-size: 24px;
					margin-top: 32px;
				}
			}
		}
	}
}
</style>
