<template>
    
</template>

<script setup lang="ts">
import { reactive, ref, inject, onMounted, watch} from "vue";
import LineService from '@/services/LineService'
import ConfigService from '@/services/ConfigService'
import { useUserStore } from "@/store/user";
import { useSellTemplateStore } from '@/store'
import { useScreenStore } from "@/store/screen";
import { storeToRefs } from "pinia";
import { injectKeyTemplate } from '@/types/injectKey'
import { createOpEditorLink, createSaleCreateLink, managerTemplateLink } from '@/utils/common'
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import UserCard from "@/components/User/UserCard.vue";
import { Delete,View } from '@element-plus/icons-vue';
import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
import foote from '@/components/footer/index.vue';

import { noDataImg } from "@/utils/common";

const {
    userInfo
} = storeToRefs(useUserStore())
const router = useRouter();
const scrollContainer = ref<any>()
const scrollToElement = ref<any>()


const searchData = ref({} as any)
searchData.value = inject(injectKeyTemplate)
const marketStore = useScreenStore()
const { market, ConfigId} = storeToRefs(useScreenStore())
const personVisible = ref(false)

const model = ref(2)
const showCurrentTemplate = ref<any>()
const imgList = ref<any>()
const datas = reactive({
    scrollTop: 0,
    currentImg: 0,// 当前查看img
})
let TemplateType = 0
if(router.currentRoute.value.path=='/market') model.value=1
if(router.currentRoute.value.path.includes('create')) {
    model.value=2
    if(router.currentRoute.value.fullPath.indexOf('/ad')!=-1) TemplateType = 2
    else if(router.currentRoute.value.fullPath.indexOf('/trip')!=-1) TemplateType = 1
}else if(router.currentRoute.value.path.includes('op')) {
    model.value=0
} 
marketStore.setModel(model.value)

const props = defineProps({
    DetaTem:{
        type: Boolean,
        default: false,
    },
    Details:{
        type: Object,
        default: {},
    }
})
const emit = defineEmits<{
    (event: 'close'): void,
}>()

// 删除监听滚动
const CloseDetails = () => {
    emit('close')
    // document.querySelector("#scrollId .Details-left").removeEventListener("scroll", handleScroll);
}

const ToggleImg = (text: String) => {
    if(text=='left'){
        if(datas.currentImg>0) {
            datas.currentImg--
            scrollContainer.value.scrollTop = imgList.value[datas.currentImg].imgTop
        }
    }
    if(text=='right'){
        if(datas.currentImg<imgList.value.length-1) {
            datas.currentImg++
            scrollContainer.value.scrollTop = imgList.value[datas.currentImg].imgTop
        }
    }
    
}
const addTemplate = (type:number) =>{
    router.push({
        path:`/create_template/${type}`
    })
}

// 图片滚动翻页
const handleScroll = (e) =>{
    let temp = document.querySelector("#scrollId .Details-left").scrollTop;
    let PageImageList = imgList.value
    for(let i=0;i<PageImageList.length;i++){
        if(temp>=PageImageList[i].imgTop&&datas.currentImg!=i) datas.currentImg = i
    }
}
// 查看所有子模版
const getTemplate = async (item:any) => {
    if(!item) return
    if(item.PageImageList && item.PageImageList.length>0){
        datas.currentImg = 0
        datas.DetailsVisible = true
        imgList.value = []
        let arrList = function(list){
            list.forEach(x=>{
                imgList.value.push({
                    url: x,
                    imgTop: 0
                })
            })
        }
        arrList(item.PageImageList)
        showCurrentTemplate.value = item
        if(item.PageImageList.length>1){
            setTimeout(()=>{
                for(let i=0;i<imgList.value.length;i++){
                    imgList.value[i].imgTop =  (scrollToElement.value[i].offsetHeight+30)*i
                }
                document.querySelector("#scrollId .Details-left").addEventListener("scroll", handleScroll);
            },500)
        }
    }else{
        ElMessage.warning({
            showClose: true,
            message: `当前${item.TemplateType==2?'广告':'行程'}没有预览信息，请选择其他操作`,
        })
    }
}

/**
 * 页面跳转
 */
const goToTemplate = (item: any) => {
    let url = ''
    if(model.value==2) url = createSaleCreateLink(item.TempId,item.TemplateType)
    else if(model.value==0 && router.currentRoute.value.params.configId) url = createOpEditorLink(parseInt(router.currentRoute.value.params.configId.toString()),item.TempId)
    else if(model.value==1) url = managerTemplateLink(item.TempId,item.TemplateType)
    if(url!='') {
        router.push({
            path:url
        })
    }
}

watch(()=>props.Details,()=>{
    
})
</script>

<style lang="scss" scoped>
    
    
</style>