<template>
  <div class="container">
    <div class="login-box">
      <div class="left">
        <div class="left-up-icon"></div>
      </div>
      <div class="right">
        <div class="title">
          <div class="title-left"></div>
          <div class="title-mid">丨</div>
          <div class="title-right">智慧运力运维平台</div>
        </div>
        <div class="form-container">
          <el-form :model="ruleForm" :rules="rules" ref="form">
            <el-form-item prop="phone">
              <el-input placeholder="请输入手机号" v-model="ruleForm.phone">
                <template v-slot:prepend>
                  <el-button icon="el-icon-mobile-phone"></el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                placeholder="请输入密码"
                v-model="ruleForm.password"
              >
                <template v-slot:prepend>
                  <el-button icon="el-icon-lock"></el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                style="
                  width: 384px;
                  height: 48px;
                  border-radius: 2px;
                  margin-top: 40px;
                "
                type="primary"
                @click="login('ruleForm')"
              >
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <div @click="goBeian" class="copyright">
      Copyright © 2022 汇很多（江苏）科技有限公司 苏ICP备2022023253号-1 号
    </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs } from "vue";
import { ElNotification } from "element-plus";
import store from "../../store";
import router from "../../router";

import md5 from "md5";
import api from "../../apis/fetch";

export default {
  setup() {
    const form = ref(null);
    const ruleForm = reactive({
      ruleForm: {
        phone: "",
        password: "",
      },
    });

    const rules = reactive({
      rules: {
        // phone: [
        //   { required: true, message: "请输入手机号", trigger: "blur" },
        //   { min: 11, max: 11, message: "请正确输入手机号", trigger: "blur" },
        // ],
        // password: [
        //   { required: true, message: "请输入密码", trigger: "blur" },
        //   { min: 6, max: 20, message: "请正确输入手机号", trigger: "blur" },
        // ],
      },
    });
    function check() {
      // form.value.validate((valid) => {});
    }
    async function login() {
      // let res = await cloudConfig.doc("18ed09686196068205eeb77612d641c6").get();
      // let { version } = res.data[0];
      // localStorage.setItem("version", version);
      form.value.validate(async (valid) => {
        if (valid) {
          let { phone, password } = ruleForm.ruleForm;
          let res = await api.staffLogin({
            phone,
            password: md5(password).toUpperCase(),
          });
          if (res.data.status == 0) {
            ElNotification.success({
              title: "成功",
              duration: 2000,
              message: res.data.msg,
              type: "success",
            });
            let { id, staffName, staffPhone, status } = res.data.result;
            localStorage.setItem("id", id);
            localStorage.setItem("staffName", staffName);
            localStorage.setItem("staffPhone", staffPhone);
            localStorage.setItem("status", status);
            localStorage.setItem("userType", 2);
            store.commit("changeLogin", true);
            router.replace({ path: "/voyage/voyageList" });
          } else {
            ElNotification.error({
              title: "错误",
              duration: 3000,
              message: res.data.msg,
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }

    function goBeian() {
      window.open("https://beian.miit.gov.cn/");
    }

    return {
      form,
      ...toRefs(ruleForm),
      ...toRefs(rules),
      login,
      goBeian,
    };
  },
};
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
  background-image: url(../../assets/login-back.png);
  background-size: cover;
}

.login-box {
  position: relative;
  display: flex;
  top: calc(50% - 255px);
  left: calc(50% - 478px);
  width: 966px;
  height: 508px;
  border-radius: 10px;
  overflow: hidden;
}

.left {
  height: 100%;
  width: 450px;
  background-image: url(../../assets/login-modal.png);
}

.left-up-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 24px;
  background-image: url(../../assets/logo.png);
  background-size: contain;
}

.right {
  height: 100%;
  width: 516px;
  background: #fff;
}

.title {
  width: 384px;
  height: 38px;
  display: flex;
  margin: 0 auto;
  margin-top: 100px;
}

.title-left {
  height: 38px;
  width: 105px;
  background: url(https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/miniapp-static/%E6%B1%87%E5%BE%88%E5%A4%9Alogo-%E5%B7%A6%E5%8F%B3.png?sign=22b9335300bbef8d04da1b9b75589f7e&t=1634706935);
  background-size: contain;
  background-repeat: no-repeat;
}

.title-mid {
  font-size: 25px;
  color: #e4e4e4;
  margin: 0 12px;
}

.title-right {
  font-size: 28px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #434343;
  line-height: 38px;
}

.form-container {
  margin: 0 auto;
  margin-top: 60px;
  width: 384px;
}

.copyright {
  position: absolute;
  width: 100vw;
  bottom: 70px;
  text-align: center;
  font-family: PingFang SC;
  font-weight: 400;
  color: #aaa;
  opacity: 0.8;
  cursor: pointer;
}
</style>
