<template>
<a-spin :spinning="spinning">
  <div :style="{ background: isPhone ? 'none' : 'url(' + bgimg + ')', height:'100vh', }">
    <img :src="img1" v-if="!isPhone" style="position:absolute;top:0;left:0;" />
    <img :src="img2" v-if="!isPhone" style="position:absolute;bottom:0;right:0;" />
    <div :id=" isPhone ? '' : 'login-contain'">
      <!-- <el-row style="height:35px;" v-if="!isPhone">
        <el-alert :closable="false" title="水质检测平台" type="error" effect="dark"></el-alert>
      </el-row> -->
      <a-row style="height:480px;background:#0E6F75;">
        <a-col
          :span="15"
          :style="{backgroundImage:'url(' + logobg + ')', height:'480px', overflow:'hidden', textAlign:'center'}"
          id="login-left"
          v-if="!isPhone"
         >
          <img :src="logo" />
          <p>
            <span style="color:white;font-size: 26px;font-weight: bold;text-shadow: 0 0 10px black;">餐饮具消毒监测平台</span>
          </p>
          <div style="color:white;font-size: 13px;font-weight: bold;text-shadow: 0 0 7px black;">
          <p>
            当前版本: 1.1.0
          </p>
          <p>
            后台版本: 1.1.0
          </p>
          <p>
            版本记录：
          </p>
          <p>
            2020-11-30: 
                1.0.0版本上线，初步实现后台管理与信息查询功能，实现权限管理
          </p>
          <p>
             2020-12-06：
                1.0.1版本，修复后台管理中人员等_id为undefined等bug
          </p>
          <p>
             2020-12-7：
                1.0.2版本，修复字体背景遮挡问题
          </p>
           <p>
             2021-1-4：
                1.1.0版本，添加分时数据查询功能，提供表格与图表两种方式，对数据时间范围进行限制
                后台进行调整，对分时数据时间范围进行限制
          </p>
          </div>
        </a-col>
        <a-col :span=" isPhone ? 24 : 9" style="height:480px;overflow:hidden;">
          <a-form ref="form" :model="form" label-width="0" style="margin:50px;text-align:center;">
            <a-form-item style="text-align:center;">
              <img :src="avter" />
            </a-form-item>
            <a-form-item>
              <a-input prefix-icon="el-icon-user-solid" v-model="form.utel" placeholder="请输入用户名"></a-input>
            </a-form-item>
            <a-form-item>
              <a-input
                prefix-icon="el-icon-lock"
                type="password"
                v-model="form.upass"
                autocomplete="off"
                placeholder="请输入密码"
              ></a-input>
            </a-form-item>
            <a-form-item>
              <a-row>
                <a-col :span="12">
                  <a-input
                    prefix-icon="el-icon-lock"
                    v-model="form.checkcode"
                    placeholder="请输入验证码"
                  />
                </a-col>
                <a-col :span="12">
                  <input
                    type="button"
                    id="code"
                    @click="createCode"
                    class="verification1"
                    v-model="checkCode"
                  />
                </a-col>
              </a-row>
            </a-form-item>
            <a-form-item>
              <a-row :gutter="10">
                <a-col :span="24">
                  <a-button style="width:100%;" type="danger" @click="login()">登录</a-button>
                </a-col>
                <!-- <a-col :span="24">
                  <a-button style="width:100%;" @click="reset()">重置</a-button>
                </a-col>-->
              </a-row>

              <!-- <a-button @click="reset()">重置</a-button> -->
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </div>
  </div>
</a-spin>
</template>

<script>

import { getData, login, logout, URL_MAP } from "@/utils/http";

export default {
  data() {
    return {
      msg: "",
      form: {
        utel: "",
        upass: "",
        checkcode: ""
      },
      loading: null,
      img1: "",
      img2: "",
      logo: "",
      bgimg: "",
      avter: "",
      logobg: "",
      checkCode: "",
      random: [],
      spinning: false,
    };
  },
  computed: {
    isPhone() {
      return this.$store.getters.phone
    }
  },
  methods: {
    async login() {
      try {
        this.spinning = true;
        // dev 
        // if (
        //   this.form.checkcode.toUpperCase() !== this.checkCode.toUpperCase()
        // ) {
        //   this.$message.error("验证码错误！");
        //   this.createCode();
        //   this.loading.close();
        //   return;
        // }
        let data = await login("canyin", "water123456", 'tt', 'tt');
        this.$store.commit("login", data);
        /**
         * 初始化设备数据、传感器数据
         */
        let results = [ 
          getData(URL_MAP.DEVICE_LIST),
          getData(URL_MAP.SENSOR_LIST),
          getData(URL_MAP.PROJECT_LIST),
          getData(URL_MAP.RULES_LIST),
        ]
        data = await Promise.all(results)
        this.$store.commit('deviceList', data[0].data)
        this.$store.commit('sensorList', data[1].data)
        this.$store.commit('projectList', data[2].data)
        this.$store.commit('ruleList', data[3].data)
        let path = decodeURIComponent(this.$route.query.redirect || "/");
        this.$router.push({ path: path });
      } catch (e) {
        this.$message.error("账号或密码错误！");
        this.createCode();
      } finally {
        this.spinning = false
      }
    },
    reset() {
      this.form.utel = "";
      this.form.upass = "";
      this.form.checkcode = "";
    },
    createCode() {
      let code = "";
      var codeLength = 4; //验证码的长度

      for (var i = 0; i < codeLength; i++) {
        //循环操作
        var index = Math.floor(Math.random() * this.random.length); //取得随机数的索引（0~35）
        code += this.random[index]; //根据索引取得随机数加到code上
      }
      this.checkCode = code; //把code值赋给验证码
    }
  },
  created() {
    for (var i = 0; i < 10; i++) {
      this.random.push(i);
    }
    for (var i = 65; i < 91; i++) {
      this.random.push(String.fromCharCode(i));
    }
    for (var i = 97; i < 123; i++) {
      this.random.push(String.fromCharCode(i));
    }
  },
  async mounted() {
    
    this.$store.commit('phone', document.body.clientWidth < 760)
    this.img1 = require("../assets/login-img.png");
    this.img2 = require("../assets/login-img3.png");
    this.logo = require("../assets/login-logo.png");
    this.bgimg = require("../assets/back.jpg");
    this.avter = require("../assets/login-portrait.png");
    this.logobg = require("../assets/back.jpg");
    // this.createCode();
    this.login();
  }
};
</script>

<style>
#login-contain {
  width: 852px;
  height: 480px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  box-shadow: 0px 0px 32px #0c2d36;
}
#code {
  font-size: 18px;
  letter-spacing: 3px;
  color: #031424;
  background: #f2f2f5;
}
</style>