<template>
  <div class="sign-in">
    <div class="img"></div>
    <div class="fixed">
      <div class="background-left"></div>
      <div class="sign-in-box">
        <!-- 手机+密码登录模块 -->
        <phone-login
          v-if="showPlg"
          @change-email="changeEmail"
          @SetPassword="
            showPlg = false;
            showSpd = true;
          "
        ></phone-login>
        <!-- email登录模块 -->
        <email-login
          v-if="showEmail"
          @phone-email="phoneEmail"
          @SetPassword="
            showEmail = false;
            showSpd = true;
          "
        ></email-login>
        <!-- 设置密码模块 -->
        <set-password v-if="showSpd" @showLogin="showLogin"></set-password>
      </div>
    </div>
    <div class="bottom-zone">
      <div>
        <ul class="bottom-zone-center">
          <li>
            <div class="bottom-zone-center-item">运营：33慈善平台</div>
            <div class="bottom-zone-center-item">技术支持：复杂美</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import * as storage from "@/plugins/storage";
import { GO_URLS } from "@/config/URLS";
import SetPassword from "@/components/signin/setPassword.vue";
import PhoneLogin from "@/components/signin/phoneLogin.vue";
import EmailLogin from "@/components/signin/emailLogin.vue";
export default {
  data() {
    return {
      showSpd: false, //设置密码
      showPlg: true, //手机登录
      showEmail: false, // 邮箱登录
    };
  },
  components: {
    SetPassword,
    PhoneLogin,
    EmailLogin,
  },
  computed: {
    getType: function () {
      return this.$store.state.businessType;
    },
  },
  methods: {
    showLogin() {
      this.showSpd = false;
      if (this.getType === 0 || this.getType === 1) {
        this.showPlg = true;
      } else {
        this.showEmail = true;
      }
    },
    // 切换至email登录
    changeEmail() {
      this.showEmail = true;
      this.showPlg = false;
    },
    // 切换至手机登录
    phoneEmail() {
      this.showEmail = false;
      this.showPlg = true;
    },
  },
};
</script>
<style lang="less" scoped>
.sign-in {
  position: relative;
  background: #ececec;
}
.img {
  position: absolute;
  left: 26px;
  top: 14px;
  width: 100px;
  height: 30px;
  background: url("../images/SigIn/logo.png") no-repeat center;
  background-size: 100% 100%;
}
.fixed {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 895px;
  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.07);
}
.sign-in-box {
  width: 443px;
  height: 554px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  padding: 0 26px;
  float: left;
  position: relative;
}
.background-left {
  background: url("../images/SigIn/login_bg.png") no-repeat center;
  background-size: cover;
  float: left;
  background-color: #faf8fd;
  height: 554px;
  width: 400px;
}
.bottom-zone {
  position: fixed;
  bottom: 0;
  background-color: #333;
  color: white;
  width: 100%;
  text-align: center;
}
.bottom-zone-mb {
  width: 100%;
}
.bottom-zone-center {
  list-style: none;
  max-width: 800px;
  text-align: left;
  display: inline-block;
}
.bottom-zone-center-item {
  width: 300px;
  display: inline-block;
}
.bottom-zone-mb .bottom-zone-center-item {
  width: 180px;
}
</style>