<template>
  <el-watermark
    v-if="water && water.status && showWater"
    class="travel-watermark"
    :content="water.wmtype==1?water.content:''"
    :z-index="9999999"
    :rotate="water.ag"
    :gap="gaps[water.de-1]"
    :offset="[0,0]"
    :image="water.wmtype==2?water.content:''"
    :font="{fontSize:water.cz,color:water.color,fontWeight:400}"
  >
  </el-watermark>
</template>

<script lang="ts" setup>
import { ApiResult } from "@/configs/axios"
import SettingService from "@/services/SettingService"
import { useUserStore } from "@/store"
import { storeToRefs } from "pinia"
import { ref, watch } from "vue"
import { useRouter } from "vue-router"

const { token,userInfo } = storeToRefs(useUserStore())
const currentId = ref('')

const water = ref<any>()
const gaps = [[100,100],[150,150],[200,200]]
const exportRule = ['/editor/']
const previewRule = ['/play/','/preview/','/team_preview/']
const ruleRouter = ref<string[]>([])
//const currentUrl = ref<string>('')
const showWater = ref(false)
const router = useRouter()

const loadWater = async () =>{
    if(!token.value || token.value=='') return
    ruleRouter.value = []
    const response = await SettingService.GetWmAsync()
    if(response.data.resultCode == ApiResult.SUCCESS){
        water.value = response.data.data
        if(water.value.ra == 0 || water.value.ra==1) ruleRouter.value.push(...previewRule)
        if(water.value.ra == 0 || water.value.ra==2) ruleRouter.value.push(...exportRule)
        waterVisibleHandler()
    }
}
const waterVisibleHandler = ()=>{
    const url = router.currentRoute.value.path
    showWater.value = ruleRouter.value.findIndex(x=>url.includes(x))!=-1
}
const freeUserWatermake = ()=>{
    ruleRouter.value=[]
    ruleRouter.value.push(...previewRule)
    ruleRouter.value.push(...exportRule)
    water.value={
        status:true,
        content:'Travel Design',
        wmtype:1,
        ag:-25,
        cz:16,
        color:'rgba(0,0,0,.1)',
        de:2
    }
    showWater.value = true
    waterVisibleHandler()
}
watch(() => router.currentRoute.value.path, (toPath) => {
    waterVisibleHandler()
},{immediate: true,deep: true})

watch(()=>userInfo.value, (newUser)=>{
  let tempId = userInfo.value && userInfo.value.id ? userInfo.value.id : ''
  if(tempId!=currentId.value){
    if(userInfo.value.iv || userInfo.value.it) loadWater()
    else freeUserWatermake()
    currentId.value = tempId
  }
})

if(userInfo.value && userInfo.value.id) currentId.value=userInfo.value.id
if(userInfo.value.iv || userInfo.value.it) loadWater()
else freeUserWatermake()
</script>

<style>
.travel-watermark{
  position: fixed !important;
  top: 0;
  left: 0;
  width:100vw;
  height: 100vh;
  z-index: 9999999;
  pointer-events: none !important;
}
</style>