<template>
    <div ref="marketRef" class="Market-from">
        <div class="Market-fromBj"></div>
        <div style="position: relative;z-index: 2;">
            <div :class="[datas.scrollTop>200?'MarketHeader':'']">
                <!-- <adHeader v-if="!userInfo.iv&&!userInfo.it&&!userInfo.OpenScanCode" style="position: relative;z-index: 2;"
                @close="closeScanCode" @scanCode="isPublicAccount=true"></adHeader> -->
                <div class="MarketSearch row items-center">
                    <img class="q-pr-36 cusor-pointer" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pptTD.png" style="height: 28px;" @click="forwordHandler('/space')" />
                    <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>  
                    <UserCard :ScanCode="ScanCode"></UserCard>
                </div>
            </div>
            <div class="relative" style="padding: 0 17px 22px 17px; max-width:1440px; margin:0 auto;z-index: 1;">
                <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.CountryList.length==0" @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.SeasonList.length==0" @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" style="min-width: 410px;">
                                            <template v-for="(x,i) in colorArrOther" :key="i">
                                                <el-tooltip
                                                    class="box-item"
                                                    effect="dark"
                                                    :content="x.Name"
                                                    placement="bottom"
                                                >
                                                    <div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler(x)">
                                                        <span class="colorMark"
                                                        :style="{'background':x.Content,'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.ColorList.length==0?'black':'#eee'}"></span>
                                        </div>
                                    </el-tooltip>
                                    <template v-for="(x,i) in colorArr" :key="i">
                                        <el-tooltip
                                            class="box-item"
                                            effect="dark"
                                            :content="x.Name"
                                            placement="bottom"
                                        >
                                            <div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler(x)">
                                                <span class="colorMark"
                                                :style="{'background':x.Content,'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" style="max-width: 1400px;margin: auto;">
                        <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.OrderByType == item.type?'active':'']" v-for="(item,index) in sortArr" :key="index"
                            @click="onTypeChangeHandler(item.type,1)">
                                {{item.typeName}}
                            </div>
                            <el-dropdown trigger="click" v-if="parmas&&!parmas.temptype">
                                <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>
                    <!-- (dataList.length>0&&queryObj.pageIndex>1)||(dataList.length>0&&queryObj.pageIndex==1&&!loading) -->
                    <div v-if="dataList.length>0" 
                        class="listBox rounded">
                        <!-- :width="260" -->
                        <Waterfall :list="dataList" 
                        :breakpoints="{
                            1400:{rowPerView:5},
                            800:{rowPerView:5},
                            500:{rowPerView:5}
                            }" 
                        :hasAroundGutter="false" :align="'left'"
                        rowKey="TempId" :gutter="25"
                        :loadProps="loadProps"
                        
                        >
                            <template #item="{ item, url, index }">
                              <!-- <div class="card">
                                <LazyImg :url="url" />
                                <p class="text">这是具体内容</p>
                              </div> -->
                              <div class="MarketIndexListBox bg-white rounded">
                                <div class="MarketIndexList-Hover">
                                    <div v-if="item.TempId" class="MarketIndexButtomIcon row flex-between">
                                        <div>
                                        </div>
                                        <div>
                                            <div class="MarketOpa2"></div>
                                            <el-icon size="23px" theme="filled" class="MarketIconAbsolute cusor-pointer" @click="getTemplate(item,index)">
                                                <View></View>
                                            </el-icon>
                                        </div>
                                    </div>
                                    <div v-else class="Unlock-Box row items-center flex-center">
                                        <img class="cursor-pointer" src="../../assets//img/Unlock.png"
                                        style="width: 87px;height: 94px;" @click="goToTemplate(item,1)"/>
                                    </div>
                                    <div class="MarketIndexButtomBox">
                                        <el-button class="MarketIndexButtom" type="primary"
                                        @click="item.TempId?goToTemplate(item):goToTemplate(item,1)">
                                            {{item.TempId?'使用':'立即解锁'}}
                                        </el-button>
                                    </div>
                                </div>
                                <div class="MarketIndexList-img">
                                    <LazyImg :url="item.CoverImg"
                                    class="rounded" style="display: block;"/>
                                </div>
                            </div>
                            </template>
                        </Waterfall>
                        
                    </div>
                    <div v-else-if="dataList.length == 0 && !loading" class="q-mt-lg bg-white rounded" 
                    style="padding: 3.68vw 0;">
                        <el-empty description="暂无数据" :image="noDataImg(1)" />
                    </div>
                    <div v-if='queryObj.pageCount == queryObj.pageIndex && !loading' class="text-center q-pt-lg"><img :src="noDataImg(2)" width="118" /></div>
                    <div style="height:40px;" class="q-mt-md no-bg" background="transparent" v-loading="loading"  element-loading-text="正在加载中"></div>
                </div>
            </div>
            
        </div>
        
        <foote v-if="(queryObj.pageCount == queryObj.pageIndex || queryObj.pageCount==0) && !loading"></foote>
    </div>
    
    <!-- 行程、广告图详情 -->
    <temDetails :DetaTem="DetailsVisible" 
    :Details="datas.TemDetails"
    :Total="dataList.length"
    :TemCurrent="datas.currentImg"
    @close="DetailsVisible=false"
    @previous="previous"
    @next="next"/>
    <!-- vip购买提示 -->
    <vipFooter v-if="!userInfo.iv&&!userInfo.it&&!userInfo.OpenPrompt" @close="closeVip"></vipFooter>
    <!-- 到顶部 -->
    <BackTop v-if="dataList.length>10" :scrollTop="marketRef&&marketRef.scrollTop>=0?marketRef.scrollTop:0" @BackTop="goBackTop"></BackTop>
    <!-- 关注公众号 -->
    <follow v-show="isPublicAccount" :show="isPublicAccount" @close="isPublicAccount=false"
    @success="isPublicAccount=false,userInfo.OpenScanCode=true"></follow>
</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, useSlidesStore } from '@/store'
import { useScreenStore } from "@/store/screen";
import { storeToRefs } from "pinia";
import { injectKeyTemplate } from '@/types/injectKey'
import { createOpEditorLink, createSaleCreateLink, managerTemplateLink, createSaleEditorLink } 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 temDetails from "@/components/home/temDetails.vue";
import vipFooter from "@/components/home/vipFooter.vue";
import adHeader from '@/components/home/adHeader.vue';
import BackTop from "@/components/home/BackTop.vue";
import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/dist/style.css'

import { noDataImg } from "@/utils/common";
import logo from '@/assets/img/traveldesign.png'
import error from '@/assets/img/noImg.png'

const slidesStore = useSlidesStore()

const {
    userInfo
} = storeToRefs(useUserStore())
const router = useRouter();
const parmas = ref({} as any)
const currentRoute = router.currentRoute.value
parmas.value = currentRoute.params


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 loading = ref(false as any)
const searchData = ref({} as any)
searchData.value = inject(injectKeyTemplate)
const marketStore = useScreenStore()
const { TempType } = storeToRefs(marketStore)

const { SalesEditor, SalesBack } = storeToRefs(useSellTemplateStore())

const model = ref(2)
const deleteLoading = ref<any>(null)
const datas = reactive({
    loading: false,
    ColorValue: '',
    scrollTop: 0,
    currentImg: 0,// 当前查看img
    TemDetails: {}
})
const DetailsVisible = ref(false)
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(searchData.value.TemplateType) TemplateType = searchData.value.TemplateType
    if(router.currentRoute.value.params.current>=0) searchData.value.currentMenu = router.currentRoute.value.params.current
}else if(router.currentRoute.value.path.includes('op')) {
    model.value=0
} 
marketStore.setModel(model.value)
const queryObj = reactive({
    pageIndex: 1,
    pageSize: 100,
    LineId: 0, //线路Id
    Title: '', //模板名称
    TagJsonStr: '',
    CountryList: [], //国家名称
    SeasonList: [], //季节名称
    ColorList:  [], //颜色名称
    pageCount: 0, //总页数
    TempType: 0,
    TemplateType: TemplateType,//0 不限 1模版 2广告
    type: 0,
    OrderByType: 1,//排序方式
})
const queryColor = ref({
    DictKey: 'Trip_Template_Color',
    Code: '',
})

const loadProps = reactive({
    logo,
    error
})

const isPublicAccount = ref(false)

const goBackTop = () => {
    marketRef.value.scrollTop = 0
}


// 关闭扫码提示
const closeScanCode = () =>{
    userInfo.value.OpenScanCode = true
}
// 关闭vip购买提示
const closeVip = () =>{
    userInfo.value.OpenPrompt = true
    // let Dates = new Date()
    // let y = Dates.getFullYear()
    // let m = Dates.getMonth()+1
    // let d = Dates.getDay()
    // userInfo.value.NewBuyvipTipsDate = y + '-' + (m>9?m:'0'+m) + '-' + (d>9?d:'0'+d)
    // console.log(userInfo.value.NewBuyvipTipsDate,'-----------')
}

// 版型 横版 竖版
const SwitchingVersion = (row: Object) =>{
    queryObj.TempType = row.Id
    search()
}
// 喜欢、不喜欢接口调用
const BeFondOf = (row: Object) => {
    row.checked = !row.checked
}
const forwordHandler = (path:string)=>router.push({path})
// 删除模版
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 previous = () =>{
    if(datas.currentImg>0){
        datas.currentImg--
        let item = dataList.value[datas.currentImg]
        getTemplate(item,datas.currentImg)
    }
}
const next = () =>{
    if(datas.currentImg<dataList.value.length-1){
        datas.currentImg++
        let item = dataList.value[datas.currentImg]
        getTemplate(item,datas.currentImg)
    }
}
// 查看所有子模版
const getTemplate = (item:any,index:Number) => {
    DetailsVisible.value = true
    datas.TemDetails = item
    datas.currentImg = index
}

/**
 * 页面跳转
 */
const goToTemplate = (item: any,type:any) => {
    if(type) return router.push({
        path:`/p/show`
    })
    searchData.value.TempId = item.TempId
    if((searchData.value.TempId2&&searchData.value.TempId2!=item.TempId)||!searchData.value.TempId2) {
        slidesStore.ClearSlides()
    }
    let url = ''
    if(model.value==2&&!searchData.value.TempId2) url = createSaleCreateLink(item.TempId,item.TemplateType)
    else if(model.value==2&&searchData.value.TempId2) {
        let Editor = searchData.value.SalesEditor
        url = createSaleEditorLink(Editor.id,item.TempId,Editor.type,Editor.pid,Editor.e,Editor.c)
    }
    else if(model.value==0 && router.currentRoute.value.params.configId) url = createOpEditorLink(parseInt(router.currentRoute.value.params.configId.toString()),item.TempType,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 () => {
    if(parmas.value.temptype) queryObj.TempType = parseInt(parmas.value.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;
        }
        setTimeout(()=>{
            loading.value = false
        },500)
    } catch (error) {
        loading.value = false
    }
}

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

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

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

//颜色切换
const onColorNameChangeHandler = (row: Object) => {
    if(row=='') {
        queryObj.ColorList = []
        colorArrOther.value.forEach(x=>{
            x.checked = false
        })
        colorArr.value.forEach(x=>{
            x.checked = false
        })
    }else{
        if(!row.checked) {
            row.checked = true
            queryObj.ColorList.push(row.Name)
        }else{
            row.checked = false
            let list = queryObj.ColorList.filter(x=>{
                if(x!=row.Name) return x
            })
            queryObj.ColorList = list
        }
    }
    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) {
                // 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
    }
    
}

const getColor = async () => {
    let response = await LineService.GetParentColor(queryColor.value)
    if (response.data.resultCode == 1) {
        let tempData = response.data.data
        colorArrOther.value = tempData.filter((x,index)=>{ 
            return index>=14
        })
        colorArr.value = tempData.filter((x,index)=>{ 
            return index<14
        })
    }
}

getColor()
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;
    }
    .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;
    }
    .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 .MarketSearch{
        /* padding: 10px 22px; 
        max-width:1440px; 
        margin:0 auto; */
    }
    .MarketHeader{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 3;
        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;}
    }
    .MarketSearch{
        padding: 0 17px;
        max-width:1440px; 
        margin: 22px auto;
        position: relative; 
        z-index: 2;
    }
    .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: 100vh;
        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;
    }
    .ColorName{
        background: black;
        color: #fff;
        padding: 2px 10px;
        border-radius: 3px;
        margin-left: -10px;
    }
    .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{
        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; */
    }
    .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{
        
    }
    .MarketIndexListBox:hover{
        top: -5px;
        
    }
    
    .MarketIndexList-img{
        width: 100%;
        border-radius: 6px;
    }
    .MarketIndexList-img img{
        width: 100%;
        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;
    }
    .listBox{
        max-width: 1400px;
        margin: 33px auto 0;
    }
    .listBox .waterfall-list{
        overflow: initial;
        background: none;
    }
    ::v-deep(.lazy__img[lazy=error]){
        padding: 0;
        width: 199px !important;
    }
    .Unlock-Box{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 42px;
        
    }
</style>