<template>
  <div class="w-1920D1920M100 h-100vh b-bk_50 p-a t-0 z-5 " v-if="show">
    <div class="w-50px h-50px">
      <!-- TODO: ADD close button here...-->
      <!-- <ic-icon name="btn-close" fill="white"></ic-icon> -->
    </div>
    <div class="xw-900px w-100 h-554px p-a cen bor-10px o-h d-fx p-r b-we" v-on-clickaway="exit">
      <!-- Left -->
      <div class="xw-540px w-100 h-100 b-we p-a d-fx fxd-c ai-c z-1 tn-1000ms" :class="this.swap === true ? 'l-360px' : 'l-0'">
        <sign-in-c :siteData="siteData" :clickaway="sweetAlert_showing" v-if="!swap"></sign-in-c>
        <sign-up-c :siteData="siteData" v-if="swap"></sign-up-c>
      </div>

      <!-- Right -->
      <div class="xw-360px w-100 h-100 z-2 p-a tn-1000ms" :class="this.swap === true ? 'r-540px' : 'r-0'">
        <img class="b-img w-100 h-100 p-a z-_1" :src="`${publicPath}images/SignC/background_images/${this.siteData}_bg-image.png`" alt="">
        <in-question-c :siteData="siteData" v-if="!swap"></in-question-c>
        <up-question-c :siteData="siteData" v-if="swap"></up-question-c>
      </div>
    </div>
  </div>
</template>

<script>
import {mapStateVModel} from 'map-state-vmodel'
import { mixin as clickaway } from 'vue-clickaway';

import signInC from './sign/in/signInC.vue'
import InQuestionC from './sign/in/InQuestionC.vue'

import signUpC from './sign/up/signUpC.vue'
import UpQuestionC from './sign/up/UpQuestionC.vue'

export default {
  name: 'sign',
  mixins: [ clickaway ],
  props: {
    site: {
      type: String,
      required: true
    }
  },
  data(){
    return{
      
      siteData: this.site,
      swap: false,
      publicPath: process.env.BASE_URL,
    };
  },
  
  components: {
    'sign-in-c': signInC,
    'in-question-c': InQuestionC,
    'sign-up-c': signUpC,
    'up-question-c': UpQuestionC
  },
  computed: {
    ...mapStateVModel('sign', ['show', 'sweetAlert_showing'])
  },
  watch: {},
  methods: {
    submit () {
      alert('good')
    },
    exit() {
      // this.show = !this.show
      if(this.sweetAlert_showing === true) {
        this.show = true
      } else {
        this.show = false
      }
      this.sweetAlert_showing = false
    },
  },
  beforeCreate(){},
  mounted(){}
}
</script>
