<template>
    <div ref="marketRef" class="Market-from">
        <div class="Market-fromBj"></div>
        <div class="relative" style="padding: 22px 17px; max-width:1440px; margin:0 auto;z-index: 2;">
            <div :class="[datas.scrollTop>100?'MarketHeader':'']">
                <div class="row items-center">
                    <img class="q-pr-36" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_1.png" style="height: 30px;" />
                    <div class="row grow Market-select reactive">
                        <el-input v-model="queryObj.Title" placeholder="请输入关键字" class="input-with-select q-pr-33">
                            <template #append>
                                <div class="Market-select-line absolute"></div>
                                <div class="row items-center pointer">
                                    <img src="../../assets/img/home-search.png" width="21" height="21"
                                    @click="search"/>
                                </div>
                            </template>
                        </el-input>
                    </div>
                    <div class="row items-center" style="text-align: right;">
                        <div v-if="model==1" >
                            <div class="MarketAdd pointer" @click="datas.addVisible=true">创建</div>
                        </div>
                       <UserCard></UserCard>
                    </div>
                </div>
            </div>
            <div class="marketTag-from row">
                <div class="bg-white rounded text-nowrap marketTag">
                    <div class="column text-small">
                        <div class="row flex-between items-center marketTagTitleBox">
                            <span class="marketTag-Title"><span>目的地</span> <span class="q-ml-md text-BBC7C3">可多选</span> </span>
                            <el-dropdown v-if="countriesOther.length>0" trigger="click">
                                <el-button color="#EFEFEF">
                                    <span>更多</span> <el-icon class="el-icon--right"><arrow-down /></el-icon>
                                </el-button>
                                <template #dropdown>
                                    <div class="row wrap q-pt-lg marketTagDown">
                                        <el-check-tag :checked="x.checked"
                                        @change="onCountryNameChangeHandler(x)" class="text-small"
                                        v-for="(x,i) in countriesOther" :key="i">{{x.CountryName}}</el-check-tag>
                                    </div>
                                </template>
                            </el-dropdown>
                            <el-button v-else color="#FFF" class="opacity0">
                                <span></span>
                            </el-button>
                            
                        </div>
                        <div class="row wrap q-pt-sm ">
                            <el-check-tag :checked="queryObj.CountryName == ''" @change="onCountryNameChangeHandler('')">通用</el-check-tag>
                            <el-check-tag :checked="x.checked"
                                @change="onCountryNameChangeHandler(x)" class="text-small"
                                v-for="(x,i) in countries" :key="i">{{x.CountryName}}</el-check-tag>
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded text-nowrap marketTag">
                    <div class="column text-small">
                        <div class="row flex-between items-center marketTagTitleBox">
                            <span class="marketTag-Title"><span>季节</span> <span class="q-ml-md text-BBC7C3">可多选</span> </span>
                            <el-button color="#FFF" class="opacity0"><span></span></el-button>
                        </div>
                        <div class="row wrap q-pt-sm">
                            <el-check-tag :checked="queryObj.SeasonName == ''" @change="onSeasonNameChangeHandler('')"
                                class="text-small">四季</el-check-tag>
                            <el-check-tag v-for="(x,i) in seasonArr" :checked="x.checked" @change="onSeasonNameChangeHandler(x)"
                            class="text-small" :key="i">{{x.SeasonName}}</el-check-tag>
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded text-nowrap marketTag">
                    <div class="column text-small">
                        <div class="row flex-between items-center marketTagTitleBox">
                            <span class="marketTag-Title"><span>色系</span> <span class="q-ml-md text-BBC7C3">可多选</span> </span>
                            <el-dropdown v-if="colorArrOther.length>0" trigger="click">
                                <el-button color="#EFEFEF">
                                    <span>更多</span> <el-icon class="el-icon--right"><arrow-down /></el-icon>
                                </el-button>
                                <template #dropdown>
                                    <div class="row wrap q-pt-lg marketTagDown">
                                        <template v-for="(x,i) in colorArrOther" :key="i">
                                            <el-tooltip
                                                class="box-item"
                                                effect="dark"
                                                :content="x.ColorName"
                                                placement="bottom"
                                            >
                                                <div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler(x)">
                                                    <span class="colorMark"
                                                    :style="{'background':x.ColorValue,'border-color':x.checked?'black':'#eee'}"></span>
                                                </div>
                                            </el-tooltip>
                                        </template>
                                    </div>
                                </template>
                            </el-dropdown>
                            <el-button v-else color="#FFF" class="opacity0">
                                <span></span>
                            </el-button>
                        </div>
                        <div class="row wrap q-pt-sm">
                            <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    content="不限"
                                    placement="bottom">
                                    <div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler('')">
                                        <span class="colorMark"
                                        :style="{'background': 'conic-gradient(from 90deg at 51.03303% 50.931181%, #E43939, #F79A2C, #FFF60B, #39CAE4, #7A39E4)',
                                        'border-color':queryObj.ColorName==''?'black':'#eee'}"></span>
                                    </div>
                                </el-tooltip>
                                <template v-for="(x,i) in colorArr" :key="i">
                                    <el-tooltip
                                        class="box-item"
                                        effect="dark"
                                        :content="x.ColorName"
                                        placement="bottom"
                                    >
                                        <div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler(x)">
                                            <span class="colorMark"
                                            :style="{'background':x.ColorValue,'border-color':x.checked?'black':'#eee'}"></span>
                                        </div>
                                    </el-tooltip>
                                </template>
                        </div>
                    </div>
                </div>
            </div>
            <div style="margin-top: 20px;">
                <div class="MarketType row flex-between">
                    <div class="row">
                        <div class="MarketButton cursor-pointer" 
                        :class="[queryObj.TemplateType == item.type?'active':'']" v-for="(item,index) in typeArr" :key="index"
                        @click="onTypeChangeHandler(item.type)">
                            {{item.typeName}}
                        </div>
                    </div>
                    <div class="row">
                        <div class="MarketButton cursor-pointer" 
                        :class="[queryObj.sort == item.type?'active':'']" v-for="(item,index) in sortArr" :key="index"
                        @click="onTypeChangeHandler(item.type,1)">
                            {{item.typeName}}
                        </div>
                        <el-dropdown trigger="click">
                            <div class="MarketButton active active2 cursor-pointer">
                                <span>版面</span>
                                <el-icon class="el-icon--right reactive" style="top: 2px;left: 5px;"><arrow-down /></el-icon>
                            </div>
                            <template #dropdown>
                                <div class="row wrap q-pt-lg q-ml-lg q-mb-lg marketTagDown marketTagDown">
                                    <div class="MarketButton cursor-pointer" 
                                    :class="[queryObj.TempType == x.Id?'active':'']" v-for="(x,index) in layouts" :key="index"
                                    @click="SwitchingVersion(x)">
                                        {{x.Name}}
                                    </div>
                                </div>
                            </template>
                        </el-dropdown>
                        
                    </div>
                </div>
                <!-- q-mt-lg row wrap -->
                <div v-if="dataList.length>0" class="columnCount5 rounded">
                    <template v-for="(item,index) in dataList">
                        <div class="MarketIndexListBox bg-white rounded">
                            <div class="MarketIndexList-Hover">
                                <div class="MarketIndexButtomIcon row flex-between">
                                    <div>
                                        <div class="MarketOpa2"></div>
                                        <el-icon v-if="userInfo.isTemplate==1 && model==1"
                                        size="21px" class="MarketIconAbsolute cusor-pointer" @click="deleteTemplate(item)">
                                            <Delete/>
                                        </el-icon>
                                        <el-icon v-if="model!=1" size="23px" class="MarketIconAbsolute cusor-pointer"
                                        @click="BeFondOf(item)">
                                            <IconLike v-if="!item.checked" class="IconLike"/>
                                            <IconLike v-else class="IconLike" :theme="item.checked?'filled':''" :fill="item.checked?'#FF674D':'#B9B9B9'" />
                                        </el-icon>
                                    </div>
                                    <div>
                                        <div class="MarketOpa2"></div>
                                        <el-icon size="23px" theme="filled" class="MarketIconAbsolute cusor-pointer" @click="getTemplate(item)">
                                            <View></View>
                                        </el-icon>
                                    </div>
                                </div>
                                <div class="MarketIndexButtomBox">
                                    <el-button class="MarketIndexButtom" type="primary"
                                    @click="goToTemplate(item)">
                                        {{model==1?'编辑':'使用'}}
                                    </el-button>
                                </div>
                            </div>
                            <div class="MarketIndexList-img">
                                <img :src="item.CoverImg" class="rounded" />
                            </div>
                            <!-- <div class="MarketIndexList-text row items-center">
                                <el-tag class="mx-1 q-mr-md" effect="dark" v-if="item.TemplateType==2" 
                                size="small">广告</el-tag>
                                <span>{{item.Title}}</span>
                            </div> -->
                        </div>
                        
                    </template>
                </div>
                <div v-else-if="dataList.length == 0 && !loading" class="q-mt-lg bg-white rounded" 
                style="padding: 30px 10px 30px 10px;">
                    <el-empty description="暂无数据" />
                </div>
                <el-divider class="no-bg q-mt-lg" v-if='queryObj.pageCount == queryObj.pageIndex && !loading'>
                    <span class="text-small" style="background: #f3f6fb;padding: 0 10px;color:#a3a3a3">已加载完成所有数据</span>
                </el-divider>
                <div style="height:40px;" class="q-mt-md no-bg" background="transparent" v-loading="loading"  element-loading-text="正在加载中"></div>
            </div>
        </div>
    </div>
    <foote></foote>
    <!-- 行程、广告图详情 -->
    <el-dialog v-model="datas.DetailsVisible" :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">
                            {{showCurrentTemplate.width?showCurrentTemplate.width:0}} * {{showCurrentTemplate.height?showCurrentTemplate.height:0}} px
                        </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>
    <!-- 推荐尺寸 -->
    <el-dialog v-model="datas.addVisible" :align-center="true" :show-close="true" :close-on-press-escape="false" 
    :close-on-click-modal="false" style="width: 373px;" class="small-padding">
        <template #header>
            <div class="text-title text-center fz16 PingFangSC">创建设计</div>
        </template>
        <div class="addTemplateBox fz14">
            <div class="color0 q-mb-lg">推荐尺寸</div>
            <div class="q-mt-xs">
                <div v-for="(item,index) in RecommendedSizes">
                    <div class="row addTemplateBoxRec rounded6 cursor-pointer"
                    :class="[datas.TemplateBoxRec&&datas.TemplateBoxRec.Id==item.Id?'active':'']" @click="Recommended(item)">
                        <span class="color0"
                        :class="[datas.TemplateBoxRec&&datas.TemplateBoxRec.Id==item.Id?'colorF':'color0']">{{item.Name}}</span>
                        <p class="q-pl-md"
                        :class="[datas.TemplateBoxRec&&datas.TemplateBoxRec.Id==item.Id?'colorF':'colorBA']">
                            <span class="q-ml-xs">{{item.width}} * {{item.height}} px</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="addTemplateBox fz14">
            <div class="color0">自义定尺寸</div>
            <div class="q-mt-xs q-mb-lg row">
                <template v-for="(item,index) in typeArr">
                    <div class="MarketButton cursor-pointer" 
                        v-if="item.type>0"
                        :class="[setTemplateType == item.type?'active':'']" :key="index"
                        @click="onTypeChangeHandler(item.type,2)">
                            {{item.typeName}}
                    </div>
                </template>
            </div>
            <div class="addTemplateInput q-mt-xs  row items-center">
                <el-input type="number" min="750" v-model="datas.CustomSize.width"
                placeholder="宽" class="input-with-select" @change="setDimension"></el-input>
                <span class="q-px-md">*</span>
                <el-input type="number" min="383" v-model="datas.CustomSize.height"
                placeholder="高" class="input-with-select" @change="setDimension"></el-input>
                <span class="q-ml-md">px</span>
            </div>
        </div>
        <div class="text-center">
            <el-button class="MarketIndexButtom MarketRec" type="primary" @click="ConfirmCreation">
                确认创建
            </el-button>
        </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';

const {
    userInfo
} = storeToRefs(useUserStore())
const router = useRouter();
const lines = ref([] as Array < any > ) //线路
const countriesOther = ref(['日本', '韩国', '老挝', '法国', '意大利'] as Array < any > ) //国家
const countries = ref(['日本', '韩国', '老挝', '法国', '意大利'] as Array < any > ) //国家
const colorArrOther = ref([] as Array < any > ); //颜色
const colorArr = ref([] as Array < any > ); //颜色
const seasonArr = ref([] as Array < any > ); //季节
const typeArr = ref([] as Array < any > ); //类型
const sortArr = ref([] as Array < any > ); //排序
const dataList = ref([] as Array < any > ); //模板数据列表

const layouts = ref([
    {Name: '不限',Id:0},
    {Name: '横版',Id:1},
    {Name: '竖版',Id:2},
])
const marketRef = ref<any>()
const RecommendedSizes = ref([
    {Name: '手机海报',width:750,height:1334,Id:1,checked:false},
    {Name: '小红书配图',width:1242,height:1660,Id:2,checked:false},
    {Name: 'PPT(16:9)',width:1920,height:1080,Id:3,checked:false},
    {Name: '公众号首图',width:900,height:383,Id:4,checked:false},
])
const scrollContainer = ref<any>()
const scrollToElement = ref<any>()


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

const SalesEditorStore = useSellTemplateStore()
const { SalesEditor, SalesBack } = storeToRefs(useSellTemplateStore())
const personVisible = ref(false)

const model = ref(2)
const showCurrentTemplate = ref<any>()
const imgList = ref<any>()
const deleteLoading = ref<any>(null)
const datas = reactive({
    TemplateBoxRec: null,// 推荐尺寸
    DetailsVisible: false,
    addVisible: false,
    loading: false,
    ColorValue: '',
    scrollTop: 0,
    moreList:[
        {icon: require("@/assets/img/homeMore0.png"),Name:'添加到桌面'},
        {icon: require("@/assets/img/homeMore1.png"),Name:'关注公众号'},
        {icon: require("@/assets/img/homeMore2.png"),Name:'我的订单'},
        {icon: require("@/assets/img/homeMore3.png"),Name:'意见反馈'},
    ],
    CustomSize:{ // 自定义尺寸
        width: null,
        height: null,
    },
    SwitchingDiagram: [
        require("@/assets/img/left.png"),
        require("@/assets/img/leftActive.png"),
        require("@/assets/img/right.png"),
        require("@/assets/img/rightActive.png"),
    ],
    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 queryObj = reactive({
    pageIndex: 1,
    pageSize: 20,
    LineId: 0, //线路Id
    Title: '', //模板名称
    CountryName: '', //国家名称
    SeasonName: '', //季节名称
    ColorName: '', //颜色名称
    CountryNames: [], //国家名称
    SeasonNames: [], //季节名称
    ColorNames:  [], //颜色名称
    pageCount: 0, //总页数
    TempType: 0,
    TemplateType: TemplateType,//0 不限 1模版 2广告
    type: 0,
    sort: 0,//排序方式
})
const setTemplateType = ref(1)

// 删除监听滚动
const CloseDetails = () => {
    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 SwitchingVersion = (row: Object) =>{
    queryObj.TempType = row.Id
    search()
}
const setDimension = () => {
    datas.TemplateBoxRec = null
}
const Recommended = (row:Object) => {
    datas.TemplateBoxRec = row
    datas.CustomSize.width = null
    datas.CustomSize.height = null
}
const ConfirmCreation = () => {
    if(!datas.TemplateBoxRec&&(!datas.CustomSize.width&&!datas.CustomSize.height)) {
        return ElMessage.warning({
            showClose: true,
            message: `请选择推荐尺寸或自定义尺寸`,
        })
    }
    if(!datas.TemplateBoxRec&&(!datas.CustomSize.width||!datas.CustomSize.height)){
        if(!datas.width){
            return ElMessage.warning({
                showClose: true,
                message: `请输入自定义宽`,
            })
        }
        if(!datas.height){
            return ElMessage.warning({
                showClose: true,
                message: `请输入自定义高`,
            })
        }
    }
    datas.addVisible = false
    if(datas.TemplateBoxRec&&datas.TemplateBoxRec.Id){
        VIEWPORT_SIZE.value = datas.TemplateBoxRec.width
        VIEWPORT_VER_SIZE.value = datas.TemplateBoxRec.height
        if(datas.TemplateBoxRec.Id==3) {
            datas.TemplateBoxRec = null
            addTemplate(1)
        }else {
            datas.TemplateBoxRec = null
            addTemplate(2)
        }
    }else{
        VIEWPORT_SIZE.value = datas.CustomSize.width
        VIEWPORT_VER_SIZE.value = datas.CustomSize.height
        datas.CustomSize.width = null
        datas.CustomSize.height = null
        addTemplate(2)
    }
}
// 喜欢、不喜欢接口调用
const BeFondOf = (row: Object) => {
    row.checked = !row.checked
}
const addTemplate = (type:number) =>{
    // searchData.value.TemplateType = type
    // marketStore.setMarket(!market)
    // searchData.value.TempId = 0
    router.push({
        path:`/create_template/${type}`
    })
}

const CloseTemplate = () => {
    if(SalesBack.value==1){
        marketStore.setMarket(false)
        SalesEditorStore.setSalesEditor(SalesEditor.value)
    }else SalesEditorStore.setSalesEditor(0)
}
// 删除模版
const deleteTemplate = (item:any) => {
    ElMessageBox.confirm(
        `此操作将删除该${item.TemplateType==2?'广告':'行程'}，是否确定?`,
        '提示',
        {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        }
    ).then(async () => {
        try {
            let queryMsg = {
                TempId: item.TempId
            }
            deleteLoading.value = ElLoading.service({
                lock:true,
                text:'正在处理'
            })
            let dataRes = await ConfigService.SetDeleteTripTemplate(queryMsg)
            if (dataRes.data.resultCode == 1) {
                queryObj.pageIndex = 1
                ElMessage({
                    showClose: true,
                    message: `删除${item.TemplateType==2?'广告':'行程'}成功`,
                    type: 'success',
                })
                await queryTemplateBySearchHandler()
            }else {
                ElMessage({
                    showClose: true,
                    message: `删除${item.TemplateType==2?'广告':'行程'}失败`,
                    type: 'warning',
                }) 
            }
            deleteLoading.value.close()
            deleteLoading.value = null
        } catch (error) {}
    }).catch(() => {})
    
}
// 图片滚动翻页
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.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
        })
    }
}

const search = () => {
    queryObj.pageIndex = 1
    queryTemplateBySearchHandler()
}
/***
 * 获取模板市场分页列表
 */
const queryTemplateBySearchHandler = async () => {
    const parmas = router.currentRoute.value.params
    if(parmas.temptype) queryObj.TempType = parseInt(parmas.temptype.toString())
    loading.value = true
    try {
        if(queryObj.pageIndex == 1) dataList.value =[]
        let pageRes = await ConfigService.GetTemplagePageAsync(queryObj);
        if (pageRes.data.resultCode == 1) {
            let arrList = function(list){
                list.forEach(x=>{
                    x.checked = false
                })
            }
            arrList(pageRes.data.data.pageData)
            dataList.value = dataList.value.concat(pageRes.data.data.pageData);
            queryObj.pageCount = pageRes.data.data.pageCount;
        }
        loading.value = false
    } catch (error) {
        loading.value = false
    }
}

//线路切换
const onLineChangeHandler = (lineId: number) => {
    queryObj.LineId = lineId;
    search()
}
//国家切换
const onCountryNameChangeHandler = (row: Object) => {
    if(row=='') {
        queryObj.CountryName = ''
        queryObj.CountryNames = []
        countriesOther.value.forEach(x=>{
            x.checked = false
        })
        countries.value.forEach(x=>{
            x.checked = false
        })
    }else{
        queryObj.CountryName = row.CountryName;
        if(!row.checked) {
            row.checked = true
            queryObj.CountryNames.push(row.CountryName)
        }else{
            row.checked = false
            let list = queryObj.CountryNames.filter(x=>{
                if(x!=row.CountryName) return x
            })
            queryObj.CountryNames = list
            if(queryObj.CountryNames.length==0) queryObj.CountryName = ''
        }
    }
    search()
}

//季节切换
const onSeasonNameChangeHandler = (row: Object) => {
    if(row=='') {
        queryObj.SeasonName = ''
        queryObj.SeasonNames = []
        seasonArr.value.forEach(x=>{
            x.checked = false
        })
    }else{
        queryObj.SeasonName = row.SeasonName;
        if(!row.checked) {
            row.checked = true
            queryObj.SeasonNames.push(row.SeasonName)
            // if(queryObj.SeasonNames.length==4) {
            //     queryObj.SeasonName = ''
            //     seasonArr.value.forEach(x=>{
            //         x.checked = false
            //     })
            // }
        }else{
            row.checked = false
            let list = queryObj.SeasonNames.filter(x=>{
                if(x!=row.SeasonName) return x
            })
            queryObj.SeasonNames = list
            if(queryObj.SeasonNames.length==0) queryObj.SeasonName = ''
        }
    }
    search()
}

//类型切换
const onTypeChangeHandler = (Type: string,num: Number) => {
    if(num==1){
        queryObj.sort = Type;
    }else if(num==2){
        setTemplateType.value = Type
    } else{
        searchData.value.MarketTemplateType = Type
        queryObj.TemplateType = Type;
    }
    
    if(num!=2) search()
}

//颜色切换
const onColorNameChangeHandler = (row: Object) => {
    if(row=='') {
        queryObj.ColorName = ''
        queryObj.ColorNames = []
        colorArr.value.forEach(x=>{
            x.checked = false
        })
    }else{
        queryObj.ColorName = row.ColorName;
        if(!row.checked) {
            row.checked = true
            queryObj.ColorNames.push(row.ColorName)
        }else{
            row.checked = false
            let list = queryObj.ColorNames.filter(x=>{
                if(x!=row.ColorName) return x
            })
            queryObj.ColorNames = list
            if(queryObj.ColorNames.length==0) queryObj.ColorName = ''
        }
    }
    search()
}

/**
 * 获取线路列表
 */
const getLinesHandler = async () => {
    try {
        let response = await LineService.GetLineListAsync()
        if (response.data.resultCode == 1) {
            lines.value = response.data.data;
        }
    } catch (error) {
        
    }
}

/**
 * 获取模板市场查询条件
 */
const getTemplateQuery = async () => {
    try {
        let res = await ConfigService.GetTemplateQueryAsync();
        if (res.data.resultCode == 1) {
            var tempData = res.data.data;
            let arrList = function(list) {
                list.forEach(x => {
                    x.checked = false
                });
            }
            //国家
            if (tempData && tempData.CountryList) {
                arrList(tempData.CountryList)
                countriesOther.value = tempData.CountryList.filter((x,index)=>{ 
                    if(model.value==1){ return index>=12 }
                    else return index>=13
                })
                countries.value = tempData.CountryList.filter((x,index)=>{ 
                    if(model.value==1) {return index<12}
                    else return index<13
                })
            }
            //颜色
            if (tempData && tempData.ColorList) {
                let ColorList = [
                {ColorName:'红',ColorValue:'#E43939',Id:1},
                {ColorName:'橙',ColorValue:'#F79A2C',Id:2},
                {ColorName:'黄',ColorValue:'#FFF60B',Id:3},
                {ColorName:'绿',ColorValue:'#3DD948',Id:4},
                {ColorName:'青',ColorValue:'#39CAE4',Id:5},
                {ColorName:'蓝',ColorValue:'#2C31F1',Id:6},
                {ColorName:'紫',ColorValue:'#7A39E4',Id:7},
                {ColorName:'玫红',ColorValue:'#E65FC1',Id:8},
                {ColorName:'棕色',ColorValue:'#D0B478',Id:9},
                {ColorName:'白',ColorValue:'#FFFFFF',Id:10},
                {ColorName:'黑',ColorValue:'#000000',Id:11},
                {ColorName:'灰',ColorValue:'#BABABA',Id:12},
                ]
                for(let i=0;i<ColorList.length;i++){
                    colorArr.value.push({
                        ColorName: ColorList[i].ColorName,
                        ColorValue: ColorList[i].ColorValue,
                        checked: false,
                    })
                }
                // arrList(tempData.ColorList)
                // colorArrOther.value = tempData.ColorList.filter((x,index)=>{ 
                //     if(model.value==1){ return index>=15 }
                //     else return index>=14
                // })
                // colorArr.value = tempData.ColorList.filter((x,index)=>{ 
                //     if(model.value==1){ return index<14 }
                //     else return index<14
                // })
            }
            //季节
            if (tempData && tempData.SeasonList) {
                arrList(tempData.SeasonList)
                seasonArr.value = tempData.SeasonList;
            }
            //类型
            for(let i=0;i<3;i++){
                let text = '所有模版'
                if(i==1) text = '行程'
                if(i==2) text = '广告'
                typeArr.value.push({
                    type:i,
                    typeName:text
                })
            }
            for(let i=0;i<2;i++){
                let text = '综合排序'
                if(i==1) text = '最新模板'
                sortArr.value.push({
                    type:i,
                    typeName:text
                })
            }
        }
    } catch (error) {
        
    }
}
const scrollingHandler = () =>{
    if(marketRef.value && !loading.value){
        let maxHeight = marketRef.value.scrollHeight - marketRef.value.offsetHeight
        let scrollTop = marketRef.value.scrollTop
        if(maxHeight - scrollTop==0 && queryObj.pageCount > queryObj.pageIndex) {
            queryObj.pageIndex++
            queryTemplateBySearchHandler()
        }
        datas.scrollTop =  scrollTop
    }
    
}

getLinesHandler();
getTemplateQuery();
queryTemplateBySearchHandler();

onMounted(()=>{
    marketRef.value.addEventListener("scroll", scrollingHandler);
})
</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;
    }
    .addTemplateInput {
        ::v-deep(.el-input__wrapper){
            background-color: #EFEFEF;
            box-shadow: 0 0 0
        }
    }
    .MarketRec{
        margin-top: 23px;
        margin-bottom: 24px;
    }
    .addTemplateBoxRec.active{
        background: #FF674D;
    }
    .addTemplateBoxRec{
        line-height: 36px;
        background: #EFEFEF;
        padding: 0 15px;
        margin-bottom: 17px;
    }
    .addTemplateBox{
        padding: 0 41px;
    }
    .el-button:not(.is-link),.el-menu-item,
    .el-button:not(.is-link):hover,.el-menu-item:hover{
        border: 0;
    }
    .marketTagDown .el-check-tag{
        line-height: 22px;
        margin-left: 13px;
        margin-right: 0;
    }
    .marketTagDown {
        width: 409px;
    }
    .marketTagDown.marketTagDown{
        width: 309px;
    }
    .MarketButton.active.active2{
        margin-right: 0;
    }
    .MarketButton.active.active2::after{
        background: none;
    }
    .MarketButton{
        width: 90px;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        text-align: center;
        color: #9EA2B3;
        position: relative;
        margin-right: 13px;
    }
    .MarketButton.active{
        background: #F4F7FE;
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
        color: #1C1C1C;
    }
    .MarketButton.active::after{
        content: "";
        position: absolute;
        left: 35.5px;
        bottom: 0;
        width: 19px;
        height: 4px;
        background: linear-gradient(134deg, #649DED, #570AD8);
    }
    .MarketType{
        margin-top: 29px;
        margin-bottom: 33px;
        /* background: #fff; */
    }
    .marketTag-color{
        margin-bottom: 13px;
        margin-left: 15px;
        margin-right: 31px;
        text-align: center;
    }
    .marketTagTitleBox{
        padding-right: 30px;
    }
    .marketTag-Title span:first-child{
        font-weight: bold;
        color: #1C1C1C;
    }
    .marketTag-Title{
        font-family: PingFang SC;
        font-size: 14px;
    }
    .marketTag-from{
        margin-top: 38px;
    }
    
    .MarketHeader>div{
        padding: 10px 22px; 
        max-width:1440px; 
        margin:0 auto;
    }
    .MarketHeader{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 2;
        background: #E3ECFF;
        animation:myHeader 1s;
	    -webkit-animation:myHeader 1s;
    }
        @keyframes myHeader
        {
            from {top: -100px;}
            to {top: 0px;}
        }

        @-webkit-keyframes myHeader 
        {
            from {top: -100px;}
            to {top: 0px;}
        }
    
   
    
    
    
    .Market-select-line{
        width: 1px;
        height: 14px;
        background: #F4F4F4;
        right: 61px;
    }
    .Market-select ::v-deep(.el-input__wrapper){
        box-shadow: 0 0 0;
        border-radius: 8px 0 0 8px;
        padding: 1px 23px;
    }
    ::v-deep(.el-input__wrapper):hover{
        box-shadow: 0 0 0;
    }
    ::v-deep(.el-input__wrapper.is-focus){
        box-shadow: 0 0 0;
    }
    ::v-deep(.el-input-group__append){
        box-shadow: 0 0 0;
        background: #fff;
    }
    .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;
    }
    .Market-fromBj{
        height: 486px;
        background: url('../../assets//img/homeBJ.png') no-repeat;
        background-size: auto 100%;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 1;
    }
    .Market-from{
        background: linear-gradient(0deg, #FFF, #E3ECFF);
        height: 90vh;
        overflow: auto;
    }
    .marketTag .el-check-tag.is-checked,.marketTag .el-check-tag{
        padding: 0;
    }
    .marketTag{
        padding: 20px 0px 0 30px;
        width: 460px;
        overflow: hidden;
        /* height: 245px; */
    }
    .marketTag+.marketTag{
        margin-left: 32px;
    }
    .colorMark:hover .ColorNameBox {
        display: block;
    }
    .ColorNameBox{
        width: 0;
        display: none;
        left: 0;
        top: -30px;
    }
    .ColorName{
        background: black;
        color: #fff;
        padding: 2px 10px;
        border-radius: 3px;
        margin-left: -10px;
    }
    .ColorNameBJ{
        width: 0px;
        height: 0px;
        border: 5px solid transparent;
        border-top-color: black;
        display: block;
        margin-left: 2px;
    }
    .colorMark{
        width: 28px;
        height: 28px;
        position: relative;
        display: inline-block;
        border-radius: 50%;
        margin: 4px;
        background: #fff;
        border: 4px solid #eee;
    }
    .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;
    }
    .MarketIndexListBox{
        /* width:calc(20% - 10px); */
        /* margin: 10px 10px 0 0;  */
        /* padding:5px; */
        position: relative;
        overflow: hidden;
        box-shadow: 0px 0px 20px 0px rgba(76,87,125,0.2)!important;
        grid-row-start: auto;margin-bottom: 20px;break-inside: avoid;
        max-height: 362px;
        min-height: 173px;
    }
    .MarketIndexList{
        width: 100%;
        position: relative;
        overflow: hidden;
    }
    .MarketIndexList-Hover{
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(23,23,23,0.5);
        opacity: 0;
        transition: opacity 0.5s ease;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: $themeHoverColor;
    }
    .MarketIndexListBox:hover .MarketIndexList-Hover{
        opacity: 1;
    }
    .MarketIndexList-Hover div span{
        /* display: inline-block; */
        /* background: #fff; */
        /* border-radius: 4px; */
        /* padding: 0 10px 3px 10px; */
    }
    .MarketIndexListBox:hover{
        top: -5px;
        
    }
    
    .MarketIndexList-img{
        width: 100%;
        /* height: 0;
        position: relative;
        padding-bottom: 56.25%;
        overflow: hidden; */
        border-radius: 6px;
    }
    .MarketIndexList-img img{
        /* position: absolute;
        top: 0;
        left: 0;
        height: 100%; */
        width: 100%;
        /* height: auto;
        position: absolute; */
        object-fit: cover;
    }
    .MarketIndexList-text{
        font-size: 14px;
        padding: 10px;
        padding-bottom: 5px;
    }
    .MarketIndexList-text span{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .MarketVerticalLine{
        width: 1px;
        height: 80%;
        background: #dcdfe6;
        margin-right: 30px;
        margin-top: 5px;
    }
    .MarketIndexButtom{
        color: #ffff;
        width: 86px;
        height: 36px;
        letter-spacing: 1px;
        font-size: 14px !important;
        border-radius: 6px;
    }
    .MarketIconAbsolute{
        width: 36px;
        height: 36px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        text-align: center;
        line-height: 36px;
        color: #B9B9B9;
        z-index: 2;
    }
    .MarketIndexButtomIcon>div:hover .el-icon, .MarketIndexButtomIcon>div:hover .IconLike{
        color: #fff;
    }
    .MarketIndexButtomIcon>div:hover .MarketOpa2{
        opacity: 0.22;
    }
    .MarketIndexButtomIcon>div{
        position: relative;
        width: 36px;
        height: 36px;
    }
    .MarketOpa2{
        width: 36px;
        height: 36px;
        background: #FFFFFF;
        border-radius: 6px;
        opacity: 0;
    }
    .MarketIndexButtomIcon{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding: 14px 16px;
    }
    .MarketIndexButtomBox{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 15px;
        text-align: center;
    }
    .layout-item{
        width: 180px;
    }
    .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>