<script setup>
import { ref,watch } from 'vue'
import { useRouter } from 'vue-router'
import { Fold, Expand } from '@element-plus/icons-vue'
import { getBannerList } from '@/api/auth'

const wwidth=ref(window.innerWidth)
const router = useRouter()
let adSrc = ref('')
let isShowAd = ref(false)
function getBanner(){
    getBannerList().then(res=>{
        if(res.code!==200||!res.data){
            isShowAd.value = false
            adSrc.value = ''
            return 
        }
        isShowAd.value = res.data?.length>0
        adSrc.value = res.data[0]?.image_url_web||''
    })
}
getBanner()
watch(()=>router.currentRoute.value.path,
    (path)=>{
        //登录页不显示
        if(path==='/login'){
            isShowAd.value = false
            return 
        }
        adSrc.value.length&&(isShowAd.value = true)
    }
)
</script>

<template>
  <div class="main-wrap">
    <router-view />
    <el-backtop :right="wwidth<700?20:100" :bottom="100" />
    <div class="ad-wrap" v-if="router.currentRoute.value.path!=='/login'&&adSrc.length&&isShowAd">
        <!-- <img src="@/assets/404.png"> -->
        <el-image
            style="width: 100%;overflow: visible;"
            :src="adSrc"
            :preview-src-list="[adSrc]"
            fit="cover"
            :preview-teleported="true"
            />
        <span class="ad-btn" @click="isShowAd = false"
            style="position: absolute;top:0;right:0;"
        ><el-icon><Expand /></el-icon></span>
    </div>
    <div class="ad-btn" @click="isShowAd = true"
        v-if="router.currentRoute.value.path!=='/login'&&adSrc.length&&!isShowAd" 
        style="position: fixed;bottom:20px;right:20px;">
        <el-icon><Fold /></el-icon>
    </div>
  </div>
  
</template>

<style scoped lang="scss">
.main-wrap{
  max-width: 1200px;
  margin: 0 auto;
  position:relative;
  .ad-wrap{
    cursor: pointer;
    position: fixed;
    bottom:0;
    right:0;
    width: 280px;
    max-height:498px;
    /* border:1px solid black; */
    /* background-color: red; */
    z-index: 100;
    @media (max-width: 768px){
        width:35%;
    }
    img{
        width:100%;
    }
  }
  .ad-btn{
    cursor: pointer;
    box-sizing: border-box;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.4);
    padding:12px;
    font-size: 16px;
    width:40px;
    height:40px;
  }
}
</style>
