<template>
  <div class="authorization-container relative">
    <!-- 视频背景 -->
    <div class="video-bg-warp absolute">
      <video
        :src="require('./assets/login_bg.mp4')"
        poster="./assets/login_bg.jpg"
        class="login-bg-video"
        muted="muted"
        autoplay
        loop
      ></video>
    </div>
    <!-- 登录-->
    <Login
      :isShow.sync="isShowLogin"
      @linkRregister="linkRregister()"
      @goFoundPassword="goFoundPassword()"
    ></Login>
    <!-- 注册 -->
    <Register :isShow.sync="isShowRegister" @backLogin="backLogin()"></Register>
    <!-- 忘记密码 -->
    <ForgotPassword
      :isShow.sync="isShowForgotPassword"
      @backLogin="backLogin()"
    ></ForgotPassword>
  </div>
</template>

<script>
import Login from "./components/login";
import Register from "./components/register";
import ForgotPassword from "./components/forgotPassword";
export default {
  name: "dj-login",
  components: {
    Login,
    Register,
    ForgotPassword,
  },
  provide() {
    return { provideData: this.$props };
  },
  props: {
    host: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      //是否显示登录
      isShowLogin: true,
      //是否显示注册
      isShowRegister: false,
      //是否显示忘记密码
      isShowForgotPassword: false,
      myChart: null,
    };
  },
  mounted() {},
  methods: {
    //
    linkRregister() {
      this.isShowLogin = false;
      this.isShowRegister = true;
    },
    goFoundPassword() {
      this.isShowLogin = false;
      this.isShowForgotPassword = true;
    },
    backLogin() {
      this.isShowLogin = true;
      this.isShowRegister = false;
    },
  },
};
</script>

<style lang="less" scoped>
.authorization-container {
  width: 100%;
  height: 100%;
  background: #333;
  overflow: hidden;
  //视频背景
  .video-bg-warp {
    width: 100%;
    height: 100%;
    video {
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
  }
}
</style>
