<template>
  <div class="account">
    <div class="account-container">
      <div class="account-wrap-login">
        <div class="login-pic">
          <h1 class="login-title">后台管理系统</h1>
          <h4 class="login-subtitle">赋能开发者，助力企业发展，全方位提供数据中台解决方案!</h4>
        </div>
        <div class="login-form">
          <div class="login-form-container">
            <div class="account-top">
              <div class="account-top-desc">{{loginFlag?'用户登录':'用户注册'}}</div>
            </div>
            <template v-if="loginFlag">
              <div class="account-tab-box">
                <div :class="activeIndex==index?'active':''" v-for="(item,index) in tabData" @click="handleClick(index)" :key="index">{{item}}</div>
              </div>
              <LoginForm v-if="activeIndex === 0" @backLogin="goLogin"/>
              <PhoneForm v-else-if="activeIndex === 1"/>
              <QrcodeForm v-else-if="activeIndex === 2"></QrcodeForm>
            </template>
            <template v-else>
              <RegisterForm @backLogin="goLogin"></RegisterForm>
          </template>
          </div>
          <div class="corner-box" @click="handleCornerClick">
            <el-icon class="el-input__icon" size="34" color="#ffffff" v-if="loginFlag">
              <UserAddOutlined />
            </el-icon>
            <el-icon class="el-input__icon" size="34" color="#ffffff" v-else>
              <ArrowUndoOutline />
            </el-icon>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref ,computed} from 'vue';
  import LoginForm from './LoginForm2.vue';
  import PhoneForm from './PhoneForm.vue';
  import QrcodeForm from './QrcodeForm.vue';
  import RegisterForm from './RegisterForm2.vue';
  import { UserAddOutlined } from '@vicons/antd';
  import { ArrowUndoOutline } from '@vicons/ionicons5';
  import { useDesignSettingStore } from '@/store/modules/designSetting';
  const designStore = useDesignSettingStore();
    //获取主题风格色
  const getAppTheme = computed(() => {
    return designStore.appTheme;
  });
  const loginFlag = ref(true)
  const activeIndex = ref(0)
  const tabData =ref(['账号登录','手机号登录','扫码登录'])
  const handleClick =(index)=>{
    activeIndex.value = index
  }
  const handleCornerClick = ()=>{
    loginFlag.value  = !loginFlag.value
  }
  const goLogin = (type)=>{
    loginFlag.value = type
  }
</script>

<style lang="scss" scoped>
  .account {
    width: 100%;
    margin: 0 auto;

    &-container {
      width: 100%;
      min-height: 100vh;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
      background-image:url('../../assets/images/login-bg.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;

    }

    &-wrap-login {
      width: 920px;
      height: 500px;
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .login-pic {
        flex: 1;
        padding: 32px 8px;
        box-sizing: border-box;
        background-color: #1681fd;
        background-image: url('../../assets/images/login-img.png');
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: contain;
        text-align: center;
        .login-title {
          color: #ffffff;
          font-size: 28px;
          margin: 0 0 6px;
          font-weight: 400;
          letter-spacing: 1.2px;
        }
        .login-subtitle {
          color: #fffc;
          font-size: 16px;
          margin: 0;
          font-weight: 400;
          letter-spacing: 4px;
          letter-spacing: 1.2px;
        }
    }

        img {
          max-width: 100%;
        }

      .login-form {
        width: 400px;
        position: relative;
        &-container {
          margin: auto;
          width: 100%;
          padding:32px 48px 0;
          box-sizing: border-box;
        }
        &-title {
          padding-bottom: 15px;
          text-align: center;
        }
        .corner-box {
          position:absolute;
          top:0;
          right:0;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          right: 0;
          top: 0;
          width: 80px;
          height: 80px;
          border-radius: 0 0 0 150%;
          background: v-bind(getAppTheme);
          cursor: pointer;
          >i {
            margin-right: -20px;
            margin-top: -10px;
          }
        }
      }

      @media (max-width: 680px) {
        .login-pic {
          padding: 20px 12px 100px;
          background-size: auto 100px;
        }

        .login-form {
          width: 100%;
          margin: auto;
        }
    }
      .account-top {
        &-desc {
          font-size: 24px;
          font-weight: bold;
          color: #000000;
          margin-bottom: 18px;
        }
      }
      .account-tab-box {
        display: flex;
        height:34px;
        margin-bottom: 18px;
        background-color: #f5f5f5;
        border-radius: 4px;
        padding:3px;
        >div {
          flex:1;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          color:rgba(0, 0, 0, .6);
          &.active {
            background-color:#ffffff;
            color:rgba(0, 0, 0, .92);
          }
          &:hover {
            color:rgba(0, 0, 0, .92);
          }
        }
      }
    }

    @media (max-width: 680px) {
      &-container {
          padding: 0;
          display: block;
          background: #fff;
        }
      &-wrap-login {
        display: block;
        height: auto;
        width: 100%;
        background: none;
        box-shadow: none;
        border-radius: 0;
      }
    }
  }
</style>
<style lang="scss">
  .account {
  .el-button--primary {
    background-color: v-bind(getAppTheme);
  }
  .el-button--text{
    padding:0;
  }
  .el-checkbox__input.is-checked+.el-checkbox__label,.el-button--text {
    color: v-bind(getAppTheme);
  }
  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: v-bind(getAppTheme);
    color: v-bind(getAppTheme);
  }
}
</style>