<template>
  <div class="flex-col page">
    <div class="box_1">
      <div class="flex main-container">
        <div class="left-container pos-r">
          <img class="logoimg" src="/images/loginlogo.png" />
          <div class="flex left-title ai-c column">
            <div>
              <p>欢迎登陆</p>
              <p class="mt-1">农发合作社管理平台</p>
            </div>
            <div class="lines"></div>
            <div class="fz-12 fc-w fn-my">请 使 用 您 的 个 人 账 号 登 录</div>
          </div>
          <div class="flex pos-a left-bottom ai-c jc-c">
            <span class="pellucidity">Copyright</span>
            <span class="pellucidity">©2023 山东慧创信息科技有限公司</span>
          </div>
        </div>
        <div class="flex login-form ai-c jc-c column">
          <p
            style="
              text-align: center;
              font-size: 36px;
              color: #000;
              font-weight: bold;
              line-height: 50px;
              margin-bottom: 50px;
              margin-right: 55px;
            "
          >
            登陆您的系统账户
          </p>
          <el-form
            :model="loginForm"
            :rules="rules"
            ref="loginForm"
            label-width="200px"
            class="demo-ruleForm"
            label-position="top"
          >
            <el-form-item label="" prop="email">
              <el-input v-model="loginForm.email" placeholder="请输入账号" style="height: 50px;">
                <template #prefix>
                  <img
                    class="thumbnail_3"
                    referrerpolicy="no-referrer"
                    src="/images/pas.png"
                  />
                </template>
              </el-input>
            </el-form-item>

            <el-form-item label="" prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="请输入密码（6-20个字符）"
                show-password
                style="height: 50px;"
              >
                <template #prefix>
                  <img
                    class="thumbnail_3"
                    referrerpolicy="no-referrer"
                    src="/images/use.png"
                  />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="" prop="agreement">
              <el-checkbox v-model="rememberPassword"> 记住账户 </el-checkbox>
            </el-form-item>
            <el-form-item>
              <el-button class="submitBtn" @click="submitForm('loginForm')"
                >登 录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "../../api/login";
import { getMethodCommon } from "../../api/common";
import md5 from 'js-md5';
export default {
  data() {
    return {
      loginForm: {
        email: "",
        password: "",
      },
      rules: {
        email: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
        rememberPassword: false,
      },
    };
  },
  created() {
    this.loginForm.email = localStorage.getItem("account");
    this.loginForm.password = localStorage.getItem("password");
  },
  methods: {
    submitForm(formName) {
      let passkey = md5(this.loginForm.password);
      login(this.loginForm.email, passkey)
        .then((res) => {
          // if (res.data.result.role == 3) {
          //   this.$message.error("此账号无权限！");
          //   return;
          // }
          if (
            res.data.code == 200 &&
            res.data.result.token != "" &&
            res.data.result.token != null
          ) {
            localStorage.setItem("Token", res.data.result.token);
            localStorage.setItem("userid", res.data.result.userid);
            localStorage.setItem("userName", res.data.result.name);
            localStorage.setItem("userType", res.data.result.userType);
            localStorage.setItem("account", this.loginForm.email);
            localStorage.setItem("password", this.loginForm.password);
            localStorage.setItem("role", res.data.result.role);
            localStorage.setItem("enterpriseId", res.data.result.enterpriseId);

            getMethodCommon("/Check/GetModulesTree").then(res =>{
              res.data.result.forEach(item =>{
                let param = {
                  code: item.item.code,
                }
                getMethodCommon("/FormModule/GetEntityByCode",param).then(val =>{
                  let rel = val.data.result
                  if(item.item.name == "新闻动态管理"){
                    window.newsId = rel.formScheme.id
                    window.newsMid = rel.entity.id
                  }
                  if(item.item.name == "商品管理"){
                    window.goodsId = rel.formScheme.id
                    window.goodsMid = rel.entity.id
                  }
                  if(item.item.name == "供需管理"){
                    window.supplyId = rel.formScheme.id
                    window.supplyMid = rel.entity.id
                  }
                  if(item.item.name == "产品销量"){
                    window.goodsNumId = rel.formScheme.id
                    window.goodsNumMid = rel.entity.id
                  }
                  if(item.item.name == "合作社管理"){
                    window.cooperId = rel.formScheme.id
                    window.cooperMid = rel.entity.id
                  }
                  
                })              
              })
            })
          
            this.$message.success("登录成功！");
            this.$router.push({
                path: "/",
                query: {
                  navIndex: 0,
                },
              });
            
          } else {
            this.$message.error("账号或密码错误！");
          }
        })
        .catch((error) => {
          this.$message.error("账号或密码错误！");
        });
    },
  },
};
</script>

<style scoped>
.page {
  background-color: rgba(247, 249, 252, 1);
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.box_1 {
  width: 100%;
  height: 900px;
  /* background-size: 1423px 900px; */
  /* margin: 0 auto; */
  background-image: url("/images/background.png");
  background-repeat: no-repeat;
}
.thumbnail_3 {
  width: 12px;
  height: 12px;
}

.fn-my {
  color: rgb(233, 231, 231);
}

.pellucidity {
  color: rgba(255, 255, 255, 0.4);
  margin-left: 5px;
}

.thumbnail_1 {
  width: 15px;
  height: 15px;
  margin: 3px 0 0 5px;
}

.submitBtn {
  width: 100%;
  height: 50px;
  font-size: 16px;
  background-color: #103cc3;
  color: #fff;
  border-radius: 6px;
}

.main-container {
  width: 50vw;
  height: 70vh;
  background: #fff;
  /* margin: 98px 0 0 222px; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 9px 18px 0px #dbe7ee;
  border-radius: 7px;
}

.left-container {
  width: 40%;
  height: 100%;
  background: url(/images/loginbg.png) no-repeat center center;
  background-size: 100% 100%;
}

.logoimg {
  position: absolute;
  top: 50px;
  left: 20px;
}

.left-title {
  margin-top: 130px;
}

.left-title p {
  font-size: 30px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;
  line-height: 39px;
  letter-spacing: 2px;
}

.lines {
  width: 31px;
  height: 2px;
  background: #ffffff;
  margin: 15px 0;
}

.left-bottom {
  width: 100%;
  bottom: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #d9d9d9;
  line-height: 20px;
}

.login-form {
  width: 60%;
  height: 100%;
}

.demo-ruleForm {
  width: 350px;
}

::v-deep .el-input__inner {
  border: 0px;
  box-shadow: none;
  line-height: 35px;
  height: 35px;
}

::v-deep .el-form-item__content {
  text-align: left;
}
</style>
