<template>
  <popup v-model:value="value" @close="$emit('destroy-popup')">
    <section class="login-container overflow row">
      <img
        src="../images/background.png"
        class="login-background"
      />
      <!--  登录内容模块  -->
      <aside class="login-content overflow relative">
        <transition-group
          name="transition"
        >
          <template
              v-for="(item,index) in useModals"
              :key="'modal-'+index"
          >
            <component
                :is="item"
                v-if="drawModal[item]"
                v-show="useModal===item"
                :ref="'$'+item"
                :key="item"
                @close="close"
            ></component>
          </template>
        </transition-group>


      </aside>
    </section>
  </popup>
</template>

<script>
import {
  Popup
} from '$components';

import props from '../props';

import mixins from '../mixins';

import login from '../components/login';

import register from '../components/register';

export default {
  name: "popup-login",

  mixins,

  props,

  components:{
    Popup,
    login,
    register
  }
}
</script>

<style scoped lang="scss" src="../style.scss"></style>