<script setup>
import { ref, reactive, onMounted,watch,nextTick } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import NoAuth from './components/NoAuth.vue'
//强制横屏
const forceLandscape = (id = '.iframe-class') => {
  const handler = () => {
    let width = document.documentElement.clientWidth;
    let height = document.documentElement.clientHeight;
    let targetDom = document.querySelector(id);
    if (!targetDom) return;
    
    if (width > height) {
      targetDom.style.position = 'absolute';
      targetDom.style.width = `${width}px`;
      targetDom.style.height = `${height}px`;
      targetDom.style.left = `${0}px`;
      targetDom.style.top = `${0}px`;
      targetDom.style.transform = 'none';
      targetDom.style.transformOrigin = '50% 50%';
    } else {
      targetDom.style.position = 'absolute';
      targetDom.style.width = `${height}px`;
      targetDom.style.height = `${width}px`;
      targetDom.style.left = `${0 - (height - width) / 2}px`;
      targetDom.style.top = `${(height - width) / 2}px`;
      targetDom.style.transform = 'rotate(90deg)';
      targetDom.style.transformOrigin = '50% 50%';
    }
  };

  const handleResize = () => {
    setTimeout(() => {
      handler();
    }, 300);
  };

  window.addEventListener('resize', handleResize);

  handler();
};
const router = useRouter()
function changeRoute(msg){
    let data
    try{
        data = typeof msg.data === 'string'?JSON.parse(msg.data):msg.data||{}
    }catch(e){
        data = {}
    }
    const {path,query} = data

    if(!path||!query) return //vue-devtools也会发message

    if(path.includes('noauth')){
        noAuth.value = query.noAuth
        hasAuth.value = false
        return
    }
    router.push({
        path,
        query
    })

}
let hasAuth = ref(true)
let noAuth = ref({
    "name": "俞梦涯", //销售名称
    "mobile": "15988911628", //销售电话
    "type": "contact", //类型：
    "hz_phone": "", //弘则公司电话
    "customer_info": {
    "company_name": "江苏智谋科技有限公司", //客户公司名称
    "name": "孙浩", //用户姓名
    "mobile": "18883968626", //用户手机号
    "status": "冻结", //客户状态
    "is_suspend": 0, //是否暂停：0-否；1-是
    "has_apply": false //是否有申请过
    }
})
watch(hasAuth,(newVal,oldVal)=>{
    if(newVal){
        nextTick(()=>{
            window.dispatchEvent(new Event('resize'))
        })
        
    }
})

const iframeURLBase = ref(process.env.NODE_ENV === 'development'?'/xcx_h5':'')
const route = useRoute()
onMounted(()=>{
    localStorage.setItem('hzyb-token',route.query.token)
    forceLandscape()
    window.addEventListener('message',changeRoute)
})
</script>

<template>
    <!-- 直接将旋转作用在Index.vue上会导致日历插件dateClick不触发,vant组件滑动手势x,y轴相反 -->
    <!-- 包一层,iframe为可替换元素,内部元素不受父级样式影响,但overflow-x,overflow-y判断会对调 -->
    <iframe :src="iframeURLBase+'/hzyb/forex/index'" class="iframe-class" v-if="hasAuth"></iframe>
    <NoAuth v-else :data="noAuth"></NoAuth>
</template>

<style scoped lang="scss">
.iframe-class{
    border:0;
}
</style>
