<!-- 登录页面 -->
<template>
  <el-container class="bgStyle">
    <el-main class="main">
      <el-row
        ><el-col :span="24">
          <h1 class="title">
            <!-- <img :src="imgSrc" /> -->
            放芯查平台
          </h1>
        </el-col>
      </el-row>
      <el-row class="content">
        <el-col :span="10" class="contentChild" :offset="7">
          <el-row>
            <el-col :span="24">
              <h2>账号登录</h2>
              <el-form
                label-position="top"
                :model="ruleForm"
                status-icon
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-form-item prop="telephone">
                  <el-input
                    prefix-icon="el-icon-phone"
                    type="text"
                    v-model.trim="ruleForm.telephone"
                    maxlength="11"
                    placeholder="请输入手机号"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                    prefix-icon="el-icon-menu"
                    type="password"
                    v-model="ruleForm.password"
                    placeholder="请输入密码"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="randYZM">
                  <el-input
                    prefix-icon="el-icon-picture"
                    v-model="ruleForm.randYZM"
                    class="randFirst"
                    placeholder="请输入验证码"
                  ></el-input>
                  <input
                    type="button"
                    v-model="ruleForm.imageCode"
                    class="rand"
                    @click="createCode"
                  />
                </el-form-item>
                <el-form-item class="noMarginBottom">
                  <el-button
                    class="btnSty"
                    type="primary"
                    @click="submitForm('ruleForm')"
                    >登录</el-button
                  >
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
// import md5 from "js-md5";
// import { JSEncrypt } from "jsencrypt";
import { loginByPwd } from '@/api/screen'
export default {
  name: "SignIn",
  data() {
    const validatePhone = (rule, value, callback) => {
      let patter = new RegExp("^1[3|4|5|7|8][0-9]\\d{8}$");
      if (!patter.test(value)) {
        return callback(new Error("请输入正确联系人手机号！"));
      } else {
        callback();
      }
    };
    const validateYZM = (rule, value, callback) => {
      if (value.toUpperCase() != this.ruleForm.imageCode.toUpperCase()) {
        return callback(new Error("请输入正确验证码！"));
      } else {
        callback();
      }
    };
    return {
      imgSrc: require("../../assets/images/logo_fxc.png"), // logo
      ruleForm: {
        telephone: '13153864796', // 手机号
        password: '123456', // 密码
        randYZM: "", // 验证码
        imageCode: "", // 图片验证码
      },
      secretKey: "6w3lacP9gmjbMgor",
      rules: {
        telephone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: validatePhone, trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        randYZM: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { validator: validateYZM, trigger: "blur" },
        ],
      },
      id: 1,
    };
  },
  methods: {
    submitForm(formName) {
      var _this = this;
      _this.$refs[formName].validate((valid) => {
        if (valid) {
          var newsForm = {
            username: _this.ruleForm.telephone,
            password: _this.ruleForm.password,
          };
          loginByPwd(newsForm).then((res)=>{
              localStorage.setItem("token", res.token);
              _this.$router.push({
                path: "/",
              });
            });
        } else {
          return false;
        }
      });
    },
    createCode() {
      let code = "";
      let codeLength = 4;
      let random = new Array(
        // 0,
        // 1,
        // 2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        // "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        // "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y"
        // "Z"
      ); //随机数
      for (let i = 0; i < codeLength; i++) {
        let index = Math.floor(Math.random() * random.length);
        if(index == random.length)index = 0
        code += random[index];
      }
      this.ruleForm.imageCode = code;
    },
  },
  mounted() {
    // 获取图片验证码
    this.createCode();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.contentChild .el-row{ position: static; width: 100%; max-width: 800px;}
.contentChild .el-input__inner{ background: transparent; border: 1px solid #3591FF; color: #ffffff;}
.bgStyle{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: url(../../assets/images/opt_bg.png); background-size: 100% 100%; }
.title{ position: absolute; top: 0; left: 0; width: 100%; height: 11vh; line-height: 11vh; color: #53A0FF; font-size:2vw; text-align: center;font-weight: bold;
background-image:-webkit-linear-gradient(bottom,#53A0FF,#ffffff);-webkit-background-clip:text;background-clip: text;-webkit-text-fill-color:transparent;
/*-webkit-text-stroke:1px #ffffff; font-style: italic;*/letter-spacing:1vw;}
.contentChild {
  background: #0B133B;
  border-radius: 10px;
  border: 1px solid #3591FF;
  box-shadow: 0px 0px 38px 2px rgba(48, 137, 243, 0.7) inset;
  width: 50vw; height:60vh;
  position: fixed; top:50%; left: 50%; margin: -25vh -25vw;
  padding: 10px; box-sizing: border-box; 
  display: flex; justify-content: center; align-items: center;

}
.contentChild h2{
   background: url(../../assets/images/cardTit.png); background-size: 100% 100%;
   width: 18vw; height: 50px; font-size: 20px; color: #ffffff; line-height: 50px; text-align: center;
   position: absolute; left: 50%; top: -25px; margin: 0 -9vw;
}
.btnSty {
  width: 100%;
}
.noMarginBottom {
  margin-bottom: 0;
}
.textLeft {
  text-align: left;
}
.randFirst {
  float: left;
  width: 70%;
}
.rand {
  float: left;
  width: 30%;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  line-height: 40px;
  height: 40px;
  background: #ffffff;
  letter-spacing: 4px;
}
</style>
