<template>
  <div class="homeRecommend_max openSignUp">
    <header class="homeRecommend_heade">
      <div class="homeRecommend_right_content">
        <div class="homeRecommend_user_content">
          <!-- <img
						class="homeRecommend_logo"
						@click="turnToNewPage('https://www.aidlab.hk/en/')"
						src="@/assets/images/loginPage/aida_logo.png"
					/> -->
          <!-- <img
						class="homeRecommend_logo"
						@click="turnToNewPage('https://www.aidlab.hk/en/')"
						src="@/assets/images/loginPage/aida_Logo_login.png"
					/> -->
          <div class="mobile_logo_group" v-if="isMoblie" @click="turnToNewPage('/')">
            <img
              class="homeRecommend_logo aid"
              src="@/assets/images/loginPage/aida_logo.png"
            />
            <img
              class="homeRecommend_logo code"
              src="@/assets/images/loginPage/aida_Logo_login.png"
            />
          </div>
          <img
            v-else
            class="homeRecommend_logo"
            @click="turnToNewPage('/')"
            src="@/assets/images/homePage/aidaIcon.png"
          />
          <!-- <div
						class="login_footer_item_text"
						@click="turnToWindow(
							'https://code-create.com.hk/aida-terms-and-conditions/'
						)"
					>
						Terms&Conditions
					</div>
					<div
						class="login_footer_item_text"
						@click="turnToWindow(
							'https://code-create.com.hk/aida-subscription-agreement/'
						)"
					>
						Privacy Policy
					</div> -->
        </div>
      </div>
      <!-- <div class="homeRecommend_right">
				<div class="gallery_btn" v-if="userDetail.systemList.indexOf(1) > -1 && !isMoblie" @click="goHome">Home</div>
				<div class="gallery_btn white" v-if="userDetail.systemUser != -1" @click="logout">log off</div>
			</div> -->
      <div class="homeRecommend_right">
        <!-- <div class="homeRecommend_right" v-if="userDetail.systemUser == -1"> -->
        <div class="cutLangue">
          <div @click="() => (isSelectSuccessively = !isSelectSuccessively)">
            <i class="fi fi-rr-globe"></i>
            <!-- <a-switch :checked="isSelectSuccessively" @click="()=>isSelectSuccessively = !isSelectSuccessively" checked-children="EN" un-checked-children="CN"/> -->
            {{ isSelectSuccessively ? 'CN' : 'EN' }}
          </div>
        </div>
        <div class="gallery_btn" @click="setLogin">
          {{ isSelectSuccessively ? '登录' : 'Login' }}
        </div>
      </div>
    </header>
    <div class="content">
      <signUp ref="signUp" :isSelectSuccessively="isSelectSuccessively"></signUp>
    </div>
  </div>
</template>
<script>
import {
  defineComponent,
  toRefs,
  reactive,
  ref,
  nextTick,
  computed,
  onMounted,
  onBeforeUnmount,
  watch
} from 'vue'
import { setCookie, getCookie, WriteCookie, clonAllCookie } from '@/tool/cookie'
import { Https } from '@/tool/https'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import signUp from '@/component/mainPage/signUp/index.vue'
export default defineComponent({
  components: {
    signUp
  },
  setup() {
    const store = useStore()
    const router = useRouter()
    let data = reactive({
      homeRecommendMax: null,
      signUp: null,
      isSelectSuccessively: false
    })
    let isMoblie = ref(false)
    let userDetail = computed(() => {
      return store.state.UserHabit.userDetail
    })
    let setLogin = () => {
      router.push('/login')
    }
    let logout = () => {
      let userInfo = store.state.UserHabit.userDetail
      let data = {
        userId: userInfo?.userId
      }
      store.commit('createDetail')
      store.commit('createProbject')
      if (!data.userId) return
      Https.axiosPost(Https.httpUrls.accountLogout, data).then(rv => {
        clonAllCookie()
      })
    }
    let goHome = () => {
      router.push('/home')
    }
    let time
    let updataIsMoblie = () => {
      clearTimeout(time)
      time = setTimeout(() => {
        if (window.innerWidth < 768) {
          isMoblie.value = true
        } else {
          isMoblie.value = false
        }
      }, 500)
    }

    watch(
      () => data.isSelectSuccessively,
      val => {
        let str = ''
        if (val) {
          str = 'CHINESE_SIMPLIFIED'
        } else {
          str = 'ENGLISH'
        }
        localStorage.setItem('loginLanguage', str)
      }
    )

    onMounted(() => {
      updataIsMoblie()
      const savedLang = localStorage.getItem('loginLanguage')
      if (savedLang) {
        data.isSelectSuccessively = savedLang === 'CHINESE_SIMPLIFIED'
      }
      window.addEventListener('resize', updataIsMoblie)
    })
    onBeforeUnmount(() => {
      window.removeEventListener('resize', updataIsMoblie)
    })
    return {
      ...toRefs(data),
      userDetail,
      setLogin,
      logout,
      goHome,
      isMoblie
    }
  },
  data() {
    return {}
  },
  watch: {
    // credits.value(newVal,oldVal){
    // 	console.log(String(newVal).length);
    // }
  },
  mounted() {},
  methods: {
    turnToNewPage(url) {
      window.open(url)
    },
    turnToWindow(url) {
      window.open(url)
    }
  }
})
</script>

<style lang="less" scoped>
.homeRecommend_max {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;

  &.openSignUp {
    .homeRecommend_heade {
      position: relative;
      background: #fff !important;
      .login_footer_item_text {
        display: block;
      }
    }

    .homeRecommend_content_adminTop {
      display: none;
    }
  }
}
.homeRecommend_heade {
  display: flex;
  justify-content: space-between;
  // padding: 0 30px;
  padding: 2rem 4rem;
  width: 100%;
  // height: 7rem;
  flex-shrink: 0;
  // background: rgba(255, 255, 255, 0.2);
  // border-bottom: 0.1rem solid rgba(3, 3, 3, 0.1);
  position: absolute;
  align-items: center;
  z-index: 2;
  border-bottom: 1px solid #ddd;
  @media (max-width: 768px) {
    z-index: 1000;
    padding: 1.4rem 2.1rem;
  }
  .homeRecommend_right {
    width: 33%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .gallery_btn {
      // color: #000;
      // background: #fff;
      // border: 2px solid #000;
      // margin-left: 2rem;
      width: 13rem;
      text-align: center;
      @media (max-width: 768px) {
        width: 5.2rem;
        padding: 0;
        display: none;
      }
      &.gallery_btn:nth-child(1) {
        margin-right: 3rem;
        @media (max-width: 768px) {
          margin-right: 1.8rem;
        }
      }
    }
    > .cutLangue {
      display: flex;
      align-items: center;
      margin-right: 4rem;
      @media (max-width: 768px) {
        margin-right: 2.8rem;
      }
      > i {
        font-size: 5rem;
      }
      > div {
        cursor: pointer;
        display: flex;
        align-items: center;
        @media (max-width: 768px) {
          font-size: 1.5rem;
        }
        > i {
          font-size: 3.5rem;
          display: flex;
          margin-right: 1rem;
          @media (max-width: 768px) {
            margin-right: 0.7rem;
            font-size: 2rem;
          }
        }
      }
      > button {
        height: 4rem;
        min-width: 8rem;
      }
      > .text {
        margin-right: 1rem;
      }
    }
  }
  .homeRecommend_logo {
    height: 8rem;
    margin-top: 0;
    margin-right: 2rem;
    @media (max-width: 768px) {
      // height: 1.76rem;
      height: 4.5rem;
      margin-right: 0.9rem;
    }
  }
  .login_footer_item_text {
    // margin-left: 5rem;
    margin-right: 2rem;
    font-size: 1.6rem;
    text-decoration: underline;
    display: none;
    cursor: pointer;
  }
  .homeRecommend_right_content {
    top: 0;
    left: 0;
    display: flex;
    width: 40%;
    height: 100%;
    align-items: center;
    overflow: hidden;
    .homeRecommend_user_content {
      display: flex;
      align-items: center;
      position: relative;
      height: 3.7rem;
      .mobile_logo_group {
        display: flex;
        align-items: center;
        cursor: pointer;
        column-gap: 0.9rem;
        .homeRecommend_logo {
          &.aid {
            width: 8rem;
            height: 1.75rem;
          }
          &.code {
            width: 5rem;
            height: 1.98rem;
          }
        }
      }
      &.marLeft2 {
        margin-left: 2rem;
      }
      .username {
        font-size: 1.8rem;
        color: #1a1a1a;
        margin: 0 0.8rem;
        font-weight: 900;
        span {
          margin: 0.7rem;
        }
      }
      .icon-xiala {
        font-size: 1.4rem;
        cursor: pointer;
        transition: 0.3s all;
      }
      .icon_rotate {
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        animation-direction: 0.5s;
      }
    }
  }
}
.content {
  flex: 1;
  overflow-y: auto;
}
</style>
