<template>
    <!-- 行程、广告图详情 -->
    <el-dialog v-model="props.DetaTem" :align-center="true" :show-close="true" :close-on-press-escape="false" 
    :close-on-click-modal="false" style="width: 1097px;height: 915px;" class="small-padding "
    @close="CloseDetails">
        <template #header>
            <div class="text-title text-center fz16 PingFangSC">{{showCurrentTemplate&&showCurrentTemplate.TemplateType!=2?'行程':'广告'}}预览</div>
        </template>
        <!-- <div v-if="showCurrentTemplate && showCurrentTemplate.PageImageList" style="max-height: 80vh; overflow-y: auto;">
            <img v-for="(x,i) in showCurrentTemplate.PageImageList" :src="x" :key="i" style="width:100%;height:auto;margin-bottom: 10px;">
        </div> -->
        <div class="Details-container row" id="scrollId" v-if="showCurrentTemplate && showCurrentTemplate.PageImageList">
            <div class="Details-left" ref="scrollContainer">
                <div class="Details-leftBox row">
                    <div class="column" style="width: 770px;">
                        <img ref="scrollToElement" v-for="(x,i) in showCurrentTemplate.PageImageList" :src="x" :key="i"
                        class="rounded">
                    </div>
                    <div style="width: 20px;height: 100%;"></div>
                </div>
            </div>
            <div class="Details-right column flex-between">
                <div>
                    <div>类型</div>
                    <div class="q-pt-lg q-pb-lg marketTagDown">
                        <el-check-tag :checked="true" class="text-small el-check-tagW76">{{showCurrentTemplate&&showCurrentTemplate.TemplateType!=2?'行程':'广告'}}</el-check-tag>
                    </div>
                    <div>目的地</div>
                    <div class="q-pt-lg q-pb-lg marketTagDown">
                        <el-check-tag :checked="true" class="text-small el-check-tagW76">{{showCurrentTemplate.CountryName?showCurrentTemplate.CountryName:'-'}}</el-check-tag>
                    </div>
                    <div>季节</div>
                    <div class="q-pt-lg q-pb-lg marketTagDown">
                        <el-check-tag :checked="true" class="text-small el-check-tagW76">{{showCurrentTemplate.SeasonName?showCurrentTemplate.SeasonName:'-'}}</el-check-tag>
                    </div>
                    <div>尺寸</div>
                    <div class="q-pt-lg">
                        <div class="addTemplateBoxRec addTemplateBoxRecw136 rounded6 color0 text-center">
                            <template v-if="!showCurrentTemplate.Width">
                                {{showCurrentTemplate.TempType==1?'横版':'竖版'}}
                            </template>
                            <template v-else>
                                {{showCurrentTemplate.Width?showCurrentTemplate.Width:0}} * {{showCurrentTemplate.Height?showCurrentTemplate.Height:0}} px
                            </template>
                        </div>
                    </div>
                </div>
                <div class="row flex-center">
                    <div class="MarketAdd MarketAddw140 pointer" @click="goToTemplate(showCurrentTemplate)">立即使用</div>
                </div>
            </div>
            <template v-if="showCurrentTemplate.PageImageList.length>1">
                <div class="MarketDetaSw MarketDetaSwL" v-if="datas.currentImg!=0">
                    <div class="cursor-pointer" @click="ToggleImg('left')"></div>
                </div>
                <div class="MarketDetaSw MarketDetaSwR" v-if="datas.currentImg<showCurrentTemplate.PageImageList.length-1">
                    <div class="cursor-pointer" @click="ToggleImg('right')"></div>
                </div>
            </template>
        </div>
    </el-dialog>
</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,()=>{
    getTemplate(props.Details)
})
</script>

<style lang="scss" scoped>
    @font-face {
        font-family: "aliMarketfont";
        font-weight: 400;
        src: url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/285OveHVCHM7.woff2") format("woff2"),
            url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/pz3etdXOpfWP.woff") format("woff");
        font-display: swap;
    }
    ::-webkit-scrollbar {
        width: 9px;
        background-color: #E9E9E9;
        border-radius: 5px;
    }
    .MarketDetaSwR div:hover{
        background: url('../../assets//img/rightActive.png') no-repeat;
        background-size: 100% 100%;
    }
    .MarketDetaSwR div{
        background: url('../../assets//img/right.png') no-repeat;
        background-size: 100% 100%;
    }
    .MarketDetaSwR{
        right: -177px;
    }
    .MarketDetaSwL div:hover{
        background: url('../../assets//img/leftActive.png') no-repeat;
        background-size: 100% 100%;
    }
    .MarketDetaSwL div{
        background: url('../../assets//img/left.png') no-repeat;
        background-size: 100% 100%;
    }
    .MarketDetaSwL{
        left: -177px;
    }
    .MarketDetaSw div{
        width: 104px;
        height: 104px;
    }
    .MarketDetaSw{
        position: absolute;
        top: 393px;
    }
    .Details-right{
        width: 256px;
        padding: 0 33px;
    }
    .Details-leftBox img{
        width:100%;
        height:auto;
        margin-bottom: 30px;
    }
    .Details-leftBox{
        width: 100%;
        height: 806px;
    }
    .Details-left{
        overflow: auto;
    }
    .Details-container{
        height: 806px;
        width: 1097px;
        padding: 0 19px 0 19px;
        position: relative;
    }
    .addTemplateBoxRec.active{
        background: #FF674D;
    }
    .addTemplateBoxRec{
        line-height: 36px;
        background: #EFEFEF;
        padding: 0 15px;
        margin-bottom: 17px;
    }
    .marketTagDown .el-check-tag{
        line-height: 22px;
        margin-left: 13px;
        margin-right: 0;
    }
    .marketTagDown {
        width: 409px;
    }
    .marketTagDown.marketTagDown{
        width: 309px;
    }
    .input-with-select{
        height: 46px;
    }
    .MarketAdd{
        width: 90px;
        height: 36px;
        background: linear-gradient(134deg, #649DED, #570AD8);
        border-radius: 8px;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 14px !important;
        color: #FFFFFF;
        line-height: 36px;
        text-align: center;
    }
    .aliMarketfont {
        font-family: aliMarketfont;
    }
    .el-check-tag.is-checked{
        background: #000;
        color: #fff;
    }
    .el-check-tag {
        width: 86px;
        height: 36px;
        margin-right: 14px;
        margin-bottom: 18px;
        line-height: 36px;
        border-radius: 6px;
        text-align: center;
        background: #FFF;
        font-weight: 400 !important;
        font-size: 14px !important;
    }
    .el-check-tag.el-check-tagW76{
        width: 76px;
        margin-left: 0;
    }
    .addTemplateBoxRec.addTemplateBoxRecw136{
        width: 136px;
    }
    .MarketAdd.MarketAddw140{
        width: 140px;
        height: 42px;
        line-height: 42px;
    }
</style>