<template>
	<el-container id="login">
		<!-- 顶部 -->
		<el-header style="height: 114px;">
			<!-- 左边logo -->
			<div class="header-left">
				安徽省农产品质量安全监测系统
			</div>
		</el-header>
		<el-form class="form" ref="loginForm" :model="loginForm" label-position="top" :rules="rulesLoginForm" label-width="70px" @keyup.enter="submitForm">
			<!-- 	<el-radio v-model="loginForm.user_flag" label="1">监管机构</el-radio>
			<el-radio v-model="loginForm.user_flag" label="2">检测机构</el-radio> -->
			<el-form-item  prop="login_name">
				<el-input prefix-icon="el-icon-user-solid" class="login_input"  placeholder="用户名称" v-model="loginForm.login_name" clearable />
			</el-form-item>
			<el-form-item  prop="pwd">
				<el-input prefix-icon="el-icon-c-scale-to-original" placeholder="密码" v-model="loginForm.pwd" show-password clearable />
			</el-form-item>
			<input type="button" name="" value="登录" class="btn" @click="submitForm">
			<!-- <el-button ref="loginButton" type="success" @click="submitForm"> -->
				<!-- 登录 -->
			<!-- </el-button> -->
		</el-form>
		<div class="footer">
			<p>主办单位：安徽省农业农村厅</p>
			<!--  <p>承办单位：安徽省北斗精准农业信息工程实验室</p> -->
			<p>技术支持：安徽省北斗精准农业信息工程实验室 农产品安全安徽省重点实验室</p>
		</div>
	</el-container>


</template>
 
<script>
	export default {
		name: 'Login',
		data() {
			return {
				met:null,
				loginForm: {
					login_name: '',
					pwd: ''
				},
				msg: null,
				rend:null,
				containers:null,
				// 长度校验
				rulesLoginForm: {}
			}
		},
		// 方法绑定
		methods: {
			// 检测是否初始化系统
			// async isSysteInit () {
			//   const formData = JSON.stringify({ useraction: 'isSystemInit' })
			//   const result = await this.$http.post('/user/', formData)
			//   // 判断业务逻辑
			//   if (result.data.ret === 1) {
			//     this.$router.push('init')
			//   }
			// },
			// 表单提交方法
			submitForm() {
				// 设置按钮状态
				const message = this.$message
				const route = this.$router
				this.$refs.loginForm.validate(async valid => {
					window.localStorage.setItem('token', '')

					var loginButton = this.$refs.loginButton
					// 判断是否合法
					if (valid) {
						// loginButton.loading = true
						const result = await this.$http.post('login', this.loginForm)
						if (result.data.code == 0) {
							// loginButton.loading = false
							// 登录成功保存用户账号
							// 存储token
							// 存身份信息
							// window.sessionStorage.setItem('token', result.data.data.token)
							 window.localStorage.setItem('token', result.data.data.token)
							// window.sessionStorage.setItem('groupname', result.data.data.groupname)
							// window.sessionStorage.setItem('name', result.data.data.name)
							// window.sessionStorage.setItem('qydm', result.data.data.qydm)
							// window.sessionStorage.setItem('rybh', result.data.data.rybh)
							// window.sessionStorage.setItem('rymc', result.data.data.rymc)
							this.containers.style.cssText=("z-index:-1;height:0px;")
							// this.met.visible=false;
							// this.rend.setSize(0,0)
							let di = document.getElementById('3d')
							di.remove(di.selectedIndex)
							if(result.data.data.groupname=="检测机构"){
								route.push('/jc')
							}else{
								route.push('/admin')
							}
							
						} else if (result.data.code != 0) {
							// loginButton.loading = false
							this.containers.style.cssText=("z-index:-1")
							this.msg = result.data.msg
							message({
								message: this.msg,
								type: 'error',
								showClose: true,
								center: true
							})
						}
					}
				})
			},

			beforeDestroy() {
				if (this.timer) {
					clearInterval(this.timer) // 在Vue实例销毁前，清除定时器
				}
			},
			init() {
      container = document.createElement("div");
      document.body.appendChild(container);
	  this.containers=container
      camera = new THREE.THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        1,
        10000
      );
      container.style.cssText = "position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:1";
	  container.id="3d";
      camera.position.z = 1000;

      scene =new THREE.THREE.Scene();

      particles = new Array();

      var PI2 = Math.PI * 2;
	  
      var material =new THREE.THREE.ParticleCanvasMaterial({
        color: 0xe1e1e1,
        program: function(context) {
          context.beginPath();
          context.arc(0, 0, 0.6, 0, PI2, true);
          context.fill();
        }
      });
		this.met=material;
      var i = 0;

      for (var ix = 0; ix < AMOUNTX; ix++) {
        for (var iy = 0; iy < AMOUNTY; iy++) {
          particle = particles[i++] = new THREE.THREE.Particle(material);
          particle.position.x = ix * SEPARATION - AMOUNTX * SEPARATION / 2;
          particle.position.z = iy * SEPARATION - AMOUNTY * SEPARATION / 2;
          scene.add(particle);
        }
      }

      renderer =new THREE.THREE.CanvasRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
	  this.rend=renderer;
      container.appendChild(renderer.domElement);

      document.addEventListener("mousemove", this.onDocumentMouseMove, false);
      document.addEventListener("touchstart", this.onDocumentTouchStart, false);
      document.addEventListener("touchmove",this. onDocumentTouchMove, false);

      //

      window.addEventListener("resize", this.onWindowResize, false);
    },
    onWindowResize() {
      windowHalfX = window.innerWidth / 2;
      windowHalfY = window.innerHeight / 2;

      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();

      renderer.setSize(window.innerWidth, window.innerHeight);
    },
    onDocumentMouseMove(event) {
      mouseX = event.clientX - windowHalfX;
      mouseY = event.clientY - windowHalfY;
    },
    onDocumentTouchStart(event) {
      if (event.touches.length === 1) {
        event.preventDefault();

        mouseX = event.touches[0].pageX - windowHalfX;
        mouseY = event.touches[0].pageY - windowHalfY;
      }
    },
    onDocumentTouchMove(event) {
      if (event.touches.length === 1) {
        event.preventDefault();

        mouseX = event.touches[0].pageX - windowHalfX;
        mouseY = event.touches[0].pageY - windowHalfY;
      }
    },
    animate() {
      requestAnimationFrame(this.animate);

      this.render();
    },
    render() {
      camera.position.x += (mouseX - camera.position.x) * 0.05;
	    camera.position.y = 364;
      camera.position.y += (-mouseY - camera.position.y) * 0.05;
      camera.lookAt(scene.position);

      var i = 0;

      for (var ix = 0; ix < AMOUNTX; ix++) {
        for (var iy = 0; iy < AMOUNTY; iy++) {
          particle = particles[i++];
          particle.position.y =
            Math.sin((ix + count) * 0.3) * 50 +
            Math.sin((iy + count) * 0.5) * 50;
          particle.scale.x = particle.scale.y =
            (Math.sin((ix + count) * 0.3) + 1) * 2 +
            (Math.sin((iy + count) * 0.5) + 1) * 2;
        }
      }

      renderer.render(scene, camera);

      count += 0.1;
    }
		},
		mounted() {
    // this.getImgCode();
    this.init()
    this.animate()
  },

		created() {
			this.timer = setInterval(this.getTime, 1000)
		}
	}
	
</script>

<style lang="less" scoped>
.el-container{
	overflow: hidden;
}
	.el-header {
		height: 114px;
		color: black;
		font-size: 1;
		line-height: 10px;
	}

	.header-left {
		// float: left;
		margin-top: 160px;
		color: #ffffff;
		font-size: 70px;
		text-align: center;
	}

	.img {
		height: 300px;
		width: 1700px;
		/* margin: 0 auto; */
		margin-left: 100px;
	}
	.form{
		z-index: 100000;
	}

	.header-right {
		float: right;
	}
	.btn:hover {
    background: -webkit-linear-gradient(left,#5bd4fd,#2f98fb);
}
.btn {
    background: #43cc99;
    color: #fff;
    transition: all .5s;
    cursor: pointer;
	width: 300px;
	height: 56px;
	border: none;
	border-radius: 50px;
}

	.header_time {
		text-align: center;
		line-height: 44px;
		height: 44px;
		background-color: #468b37;
		color: white;
		font-size: 16px;
		width: 290px;
		border-bottom-left-radius: 15px;
		border-bottom-right-radius: 15px;
	}

	.el-form {
		// padding: 40px 20px 20px 0px;
		// background-color: rgba(234, 234, 234, 0.7);
		margin: 0 auto;
		width: 400px;
		height: 250px;
		margin-top: 200px;
		color: #333;
		text-align: center;
		// line-height: 180px;
		// border-radius: 10px;
		// box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

		>div {
			margin: 28px 0;
		}
	}
	.login_input{
		border-radius: 100px;
	}

	#login {
		height: 100%;
		// background: url(../assets/img/bg01.jpg) bottom center no-repeat;
		background-size: 100% 100%;
		background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
	}

	.footer {
		// background-color: rgb(40,119,22);
		// background-color: rgba(40, 119, 22, 0.6);
		// display: flex;
		// flex-direction: row;
		position: absolute;
		bottom: 0px;
		color: #ffffff;
		width: 100%;
		text-align: center;
		font-size: 14px;
		height: 70px;
		// padding-top: 5px;
		// opacity: 0.6;
		font-weight: 550;
		// font: 24px bold #0055ff;
	}
</style>
