<template>
  <div class="site-wrapper site-page--login">
    <div class="site-content__wrapper">
      <div class="site-content">
        <div class="brand-info">
          <h1>大妈集市商户端</h1>
          <!-- <h1 class="brand-info__text1" style="margin-left: 145px">
            登录
          </h1> -->
          <!-- <p class="brand-info__intro">追寻红色历史,传承红色精神。</p> -->
        </div>
        <div class="login-main">
          <h3 class="login-title">大妈集市商户端登录</h3>
          <div class="brand-info__text" style="margin-left: 0px">
            <el-radio-group v-model="value">
              <el-radio-button :label="true">验证码登入</el-radio-button>
              <el-radio-button :label="false">账号登录</el-radio-button>
            </el-radio-group>
          </div>
          <el-tabs
            v-if="false"
            :stretch="true"
            v-model="loginWay"
            @tab-click="loginWayClick"
          >
            <el-tab-pane label="账户登录" name="account_login">
              <el-form
                :model="dataForm"
                :rules="dataRule"
                ref="dataForm"
                @keyup.enter.native="dataFormSubmit()"
                status-icon
              >
                <el-form-item prop="userName">
                  <el-input
                    v-model="dataForm.userName"
                    placeholder="帐号"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                    v-model="dataForm.password"
                    type="password"
                    placeholder="密码"
                  ></el-input>
                </el-form-item>
                <!-- <el-form-item prop="captcha">
              <el-row :gutter="20">
                <el-col :span="14">
                  <el-input v-model="dataForm.captcha" placeholder="验证码">
                  </el-input>
                </el-col>
                <el-col :span="10" class="login-captcha">
                  <img :src="captchaPath" @click="getCaptcha()" alt="" />
                </el-col>
              </el-row>
            </el-form-item> -->
                <el-form-item>
                  <el-button
                    class="login-btn-submit"
                    type="primary"
                    @click="dataFormSubmit()"
                    >登录</el-button
                  >
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="验证码登录" name="code_login">
              <el-form
                :model="loginByYZMForm"
                :rules="loginByYZMFormRule"
                ref="loginByYZMRef"
                @keyup.enter.native="loginByYZMSubmit()"
                status-icon
              >
                <el-form-item prop="mobile">
                  <el-input
                    v-model="loginByYZMForm.mobile"
                    placeholder="手机号码"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="code">
                  <el-input
                    v-model="loginByYZMForm.code"
                    placeholder="短信验证码"
                  >
                    <template slot="append">
                      <el-button
                        v-if="mobileCodeCountDown <= 0"
                        @click="getCode"
                        >获取验证码</el-button
                      >
                      <el-button v-else>{{ mobileCodeCountDown }}s</el-button>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    class="login-btn-submit"
                    type="primary"
                    @click="loginByYZMSubmit()"
                    >登录</el-button
                  >
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
          <el-form
            v-if="value"
            :model="loginByYZMForm"
            :rules="loginByYZMFormRule"
            ref="loginByYZMRef"
            @keyup.enter.native="loginByYZMSubmit()"
            status-icon
          >
            <el-form-item prop="mobile">
              <el-input
                v-model="loginByYZMForm.mobile"
                placeholder="手机号码"
              ></el-input>
            </el-form-item>
            <el-form-item prop="code">
              <el-input v-model="loginByYZMForm.code" placeholder="短信验证码">
                <template slot="append">
                  <el-button v-if="mobileCodeCountDown <= 0" @click="getCode"
                    >获取验证码</el-button
                  >
                  <el-button v-else>{{ mobileCodeCountDown }}s</el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                class="login-btn-submit"
                type="primary"
                @click="loginByYZMSubmit()"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
          <el-form
            v-else
            :model="dataForm"
            :rules="dataRule"
            ref="dataForm"
            @keyup.enter.native="dataFormSubmit()"
            status-icon
          >
            <el-form-item prop="userName">
              <el-input
                v-model="dataForm.userName"
                placeholder="帐号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="dataForm.password"
                type="password"
                placeholder="密码"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                class="login-btn-submit"
                type="primary"
                @click="handleLogin()"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUUID } from "@/utils";
export default {
  data() {
    return {
      value: true,
      loginWay: "code_login",
      loginType: "教育局",
      mobileCodeCountDown: 0,
      mobileCodeCountDownTimer: null,
      dataForm: {
        userName: "",
        password: "",
        uuid: "",
        captcha: "",
      },
      loginByYZMForm: {
        mobile: "",
        code: "",
      },
      dataRule: {
        userName: [
          { required: true, message: "帐号不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
        captcha: [
          { required: true, message: "验证码不能为空", trigger: "blur" },
        ],
      },
      loginByYZMFormRule: {
        mobile: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
        ],
        code: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
      },
      captchaPath: "",
    };
  },
  created() {
    this.getCaptcha();
  },
  methods: {
    loginWayClick(tab, event) {},
    // 提交表单
    dataFormSubmit() {
      const _loginTypeMapper = {
        管理员: "ROLE_ADMIN",
        教育局: "ROLE_EDU",
        学校: "ROLE_SCHOOL",
        教师: "ROLE_TEACHER",
      };
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          if (this.loginType == "管理员") {
            this.$api
              .login(
                this.dataForm.userName,
                this.dataForm.password,
                this.dataForm.uuid,
                this.dataForm.captcha
              )
              .then(({ data }) => {
                console.log("data", data);
                this.$cookie.set("token", data.data.token);
                this.$router.replace({ name: "home" });
              })
              .finally(() => {
                // this.getCaptcha();
              });
          } else {
            this.$api.mer_admin
              .loginByAccount({
                role: _loginTypeMapper[this.loginType],
                username: this.dataForm.userName,
                password: this.dataForm.password,
                // 0 app 1 web
                channel: 1,
                // mobile: "",
                // code: "",
              })
              .then(({ data }) => {
                console.log("data", data);
                this.$cookie.set("token", data.data.token);
                this.$router.replace({ name: "home" });
              })
              .finally(() => {
                // this.getCaptcha();
              });
          }
        }
      });
    },
    //验证码登录
    loginByYZMSubmit() {
      const _loginTypeMapper = {
        管理员: "ROLE_ADMIN",
        教育局: "ROLE_EDU",
        学校: "ROLE_SCHOOL",
        教师: "ROLE_TEACHER",
      };
      this.$refs["loginByYZMRef"].validate((valid) => {
        console.log("验证码登录");
        this.$api.mer_admin
          .loginByMobile({
            // role: _loginTypeMapper[this.loginType],
            mobile: this.loginByYZMForm.mobile,
            code: this.loginByYZMForm.code,
            // 0 app 1 web
            channel: 1,
          })
          .then(({ data }) => {
            console.log("data", data);
            this.$cookie.set("token", data.data.token);
            this.$router.replace({ name: "home" });
          })
          .catch((err) => {
            console.log(err);
          });
      });
    },
    handleLogin() {
      const _loginTypeMapper = {
        管理员: "ROLE_ADMIN",
        教育局: "ROLE_EDU",
        学校: "ROLE_SCHOOL",
        教师: "ROLE_TEACHER",
      };
      this.$refs["dataForm"].validate((valid) => {
        console.log("账号密码登录");
        this.$api.mer_admin
          .loginByAccount({
            // role: _loginTypeMapper[this.loginType],
            mobile: this.dataForm.userName,
            password: this.dataForm.password,
            // 0 app 1 web
            channel: 1,
          })
          .then(({ data }) => {
            console.log("data", data);
            this.$cookie.set("token", data.data.token);
            sessionStorage.setItem(
              "password",
              JSON.stringify(this.dataForm.password)
            );
            this.$router.replace({ name: "home" });
          })
          .catch((err) => {
            console.log(err);
          });
      });
    },
    //获取短信验证码
    getCode() {
      //正则表达式校验手机号是否合法
      const reg = /^1[3456789]\d{9}$/;
      if (!reg.test(this.loginByYZMForm.mobile)) {
        this.$message.error("请输入正确的手机号码");
        return;
      }
      this.$api.mer_admin.getYZM(this.loginByYZMForm.mobile).then((res) => {
        this.mobileCodeCountDown = 60;
        this.mobileCodeCountDownTimer = setInterval(() => {
          this.mobileCodeCountDown--;
          if (this.mobileCodeCountDown <= 0) {
            clearInterval(this.mobileCodeCountDownTimer);
          }
        }, 1000);
      });
    },
    // 获取验证码
    getCaptcha() {
      this.dataForm.uuid = getUUID();
      this.captchaPath = this.$http.adornUrl(
        `auth/captcha?uuid=${this.dataForm.uuid}`
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.login-main ::v-deep {
  .el-input__inner {
    height: 46px;
    border-radius: 10px;
    border-color: #f0f0f0;
  }

  .el-radio-group {
    display: flex;
    justify-content: space-between;
  }

  .el-radio-button__inner {
    border: 1px solid #f0f0f0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  .login-btn-submit {
    height: 46px;
    border-radius: 10px;
  }

  .el-input-group__append {
    border-radius: 10px !important;
    border: none;
  }
}

.site-wrapper.site-page--login {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(38, 50, 56, 0.6);
  overflow: hidden;

  &:before {
    position: fixed;
    top: 0;
    left: 0;
    // z-index: -1;
    filter: brightness(0.56) saturate(0.75) contrast(0.8);
    width: 100%;
    height: 100%;
    content: "";
    background-image: url(~@/assets/img/login_bg.jpg);
    background-size: cover;
  }

  .site-content__wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: transparent;
  }

  .site-content {
    min-height: 100%;
    padding: 30px 500px 30px 30px;
  }

  .brand-info {
    margin: 220px 100px 0 90px;
    color: #fff;
  }

  .brand-info__text {
    margin: 0 0 22px 0;
    font-size: 48px;
    font-weight: 400;
    text-transform: uppercase;
  }

  .brand-info__text1 {
    margin: 0 0 22px 0;
    font-size: 36px;
    font-weight: 400;
    text-transform: uppercase;
  }

  .brand-info__intro {
    margin: 10px 0;
    font-size: 16px;
    line-height: 1.58;
    opacity: 0.6;
  }

  .login-main {
    position: absolute;
    top: 0;
    right: 0;
    padding: 120px 60px 120px 60px;
    width: 38.2%;
    min-height: 100%;
    background-color: #fff;
  }

  .login-title {
    font-size: 32px;
    font-weight: 300;
    // margin:0%;
    // text-align: center;
  }

  .login-captcha {
    overflow: hidden;

    > img {
      width: 100%;
      cursor: pointer;
    }
  }

  .login-btn-submit {
    width: 100%;
    // margin-top: 38px;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    // transform: translateY(100px);
  }

  100% {
    opacity: 1;
    // transform: translateY(0px);
  }
}

.site-wrapper {
  // animation: fadeIn 1s;
  animation: fadeIn 0.618s ease-out;
}
</style>
