<template>
    <div style="background: #f3f6fb;height:100vh;">
        <div style="padding: 30px; max-width:1440px; margin:0 auto;">
            <el-row justify="space-between">
                <el-col :span="6">
                    <h1 class="alifont" style="font-size:20px;">智慧设计平台</h1>
                </el-col>
                <el-col :span="6">
                    <el-input v-model="queryObj.Title" placeholder="输入模板关键字快速查找" class="input-with-select">
                        <template #append>
                            <el-button type="primary" @click="queryTemplateBySearchHandler">搜索</el-button>
                        </template>
                    </el-input>
                </el-col>
                <el-col :span="6" style="text-align: right;">
                    <el-button v-if="userInfo.IsEditTripTemplate==1&&model" v-tooltip="'添加模版'" type="danger" 
                    size="small" icon="Plus"
                    @click="addTemplate()" style="color: #ffff;"></el-button>
                </el-col>
            </el-row>
            <div class="q-mt-lg bg-white rounded text-nowrap" style="padding: 20px 20px 0 20px;">
                <div class="row text-small items-center" style="flex-wrap: wrap;">
                    <span style="margin-right: 50px;">适用线路：</span>
                    <el-check-tag :checked="queryObj.LineId == 0" @change="onLineChangeHandler(0)"
                        class="text-small q-mr-md">全部</el-check-tag>
                    <el-check-tag :checked="queryObj.LineId == x.LineID" @change="onLineChangeHandler(x.LineID)"
                        class="text-small q-mr-md" v-for="x in lines" :key="x.LineID">{{x.LineName}}</el-check-tag>
                </div>
                <el-divider style="margin:12px 0;border-top-color:#f3f6fb;"></el-divider>
                <div class="row wrap q-pb-md">
                    <div class="q-pb-md">
                        <div class="row text-small items-center">
                            <span style="margin-right: 50px;">适用国家：</span>
                            <el-check-tag :checked="queryObj.CountryName == ''" @change="onCountryNameChangeHandler('')"
                                class="text-small q-mr-md">通用</el-check-tag>
                            <el-check-tag :checked="queryObj.CountryName == x.CountryName"
                                @change="onCountryNameChangeHandler(x.CountryName)" class="text-small q-mr-md"
                                v-for="(x,i) in countries" :key="i">{{x.CountryName}}</el-check-tag>
                        </div>
                    </div>
                    <div class="q-pb-md">
                        <div class="MarketVerticalLine">&nbsp;</div>
                    </div>
                    <div class="q-pb-md">
                        <div class="row text-small items-center">
                            <span style="margin-right: 50px;">季节：</span>
                            <el-check-tag :checked="queryObj.SeasonName == ''" @change="onSeasonNameChangeHandler('')"
                                class="text-small q-mr-md">通用</el-check-tag>
                            <el-check-tag :checked="queryObj.SeasonName == x.SeasonName" @change="onSeasonNameChangeHandler(x.SeasonName)"
                                class="text-small q-mr-md" v-for="(x,i) in seasonArr" :key="i">{{x.SeasonName}}</el-check-tag>
                        </div>
                    </div>
                    <div class="q-pb-md">
                        <div class="MarketVerticalLine">&nbsp;</div>
                    </div>
                    <div class="q-pb-md">
                        <div class="row text-small items-center">
                            <span style="margin-right: 50px;">颜色：</span>
                            <el-check-tag :checked="queryObj.ColorName == ''" @change="onColorNameChangeHandler('')"
                                class="text-small q-mr-md">通用</el-check-tag>
                            <el-check-tag :checked="queryObj.ColorName == x.ColorName" @change="onColorNameChangeHandler(x.ColorName)"
                                class="text-small q-mr-md" v-for="(x,i) in colorArr" :key="i">{{x.ColorName}}</el-check-tag>
                        </div>
                    </div>
                </div>
            </div>
            <div style="height: 750px;overflow: auto;" v-loading="loading">
                <div v-if="dataList.length>0" class="q-mt-lg row wrap bg-white rounded" style="padding: 30px 10px 0 10px;">
                    <template v-for="(item,index) in dataList">
                        <div class="MarketIndexListBox">
                            <div class="MarketIndexList bg-white rounded" @click="goToTemplate(item)">
                                <div class="MarketIndexList-img">
                                    <img :src="item.CoverImg" style="width:100%;height:100%" />
                                </div>
                                <div class="MarketIndexList-text">{{item.Title}}</div>
                            </div>
                        </div>
                    </template>
                </div>
                <div v-else class="q-mt-lg bg-white rounded" style="padding: 30px 10px 30px 10px;text-align: center;color: #909399;">暂无数据</div>
                <div v-if="dataList.length>0" class="q-mt-lg row" style="justify-content: center;">
                    <!-- hide-on-single-page -->
                    <el-pagination
                    background
                    v-model:current-page="currentPage"
                    v-model:page-size="queryObj.pageSize"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    small
                    layout="sizes, prev, pager, next"
                    :total="queryObj.totalCount"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"/>
                </div>
            </div>
        </div>
    </div>

</template>

<script setup lang="ts">
    import { reactive, ref, inject} from "vue";
    import LineService from '@/services/LineService'
    import ConfigService from '@/services/ConfigService'
    import { userStore } from "@/store/user";
    import { useScreenStore } from "@/store/screen";
    import { storeToRefs } from "pinia";
    import { injectKeyTemplate } from '@/types/injectKey'

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

    const currentPage = ref(1 as Number);
    const queryObj = reactive({
        pageIndex: 1,
        pageSize: 20,
        LineId: 0, //线路Id
        Title: '', //模板名称
        CountryName: '', //国家名称
        SeasonName: '', //季节名称
        ColorName: '', //颜色名称
        totalCount: 0, //总调试
        pageCount: 0, //总页数
    })

    const loading = ref(false as any)
    const searchData = ref({} as any)
    searchData.value = inject(injectKeyTemplate)
    const marketStore = useScreenStore()
    const isModelStore = useScreenStore()
    const { screening, market, model, isModel, ConfigId} = storeToRefs(useScreenStore())
    
    const addTemplate = () => {
        marketStore.setMarket(!market)
    }

    /**
     * 根据团期配置编号获取行程详情
     */
     const GetTripConfig = async () =>{
        try {
            if(!ConfigId||isModel) return
            let queryMsg = {
                ConfigId: ConfigId
            }
            let datasRes = await ConfigService.triptemplateGetTripConfig(queryMsg);
            if (datasRes.data.resultCode == 1) {
                if(datasRes.data.data&&datasRes.data.data.length>0&&datasRes.data.data[0].TempId){
                    searchData.value.TempId = datasRes.data.data[0].TempId
                    isModelStore.setIsModel(true)
                    marketStore.setMarket(!market)
                }
            }
        } catch (error) {
            console.log("triptemplate_GetTripConfig", error);
        }
     }
     GetTripConfig()

    /**
     * 页面跳转
     */
    const goToTemplate = (item: any) => {
        if(!ConfigId.value&&!model.value) return
        searchData.value.TempId = item.TempId
        marketStore.setMarket(!market)
        // console.log("item", item.TempId);
    }

    /***
     * 获取模板市场分页列表
     */
    const queryTemplateBySearchHandler = async () => {
        loading.value = true
        try {
            let pageRes = await ConfigService.GetTemplagePageAsync(queryObj);
            if (pageRes.data.resultCode == 1) {
                dataList.value = pageRes.data.data.pageData;
                queryObj.totalCount = pageRes.data.data.count;
                queryObj.pageCount = pageRes.data.data.pageCount;
            }
            loading.value = false
        } catch (error) {
            loading.value = false
        }
    }
    const handleSizeChange = (val: number) => {
        queryObj.pageSize = val
        queryTemplateBySearchHandler()
    }
    const handleCurrentChange = (val: number) => {
        queryObj.pageIndex = val
        queryTemplateBySearchHandler()
    }

    //线路切换
    const onLineChangeHandler = (lineId: number) => {
        queryObj.LineId = lineId;
        queryTemplateBySearchHandler();
    }
    //国家切换
    const onCountryNameChangeHandler = (CountryName: string) => {
        queryObj.CountryName = CountryName;
        queryTemplateBySearchHandler();
    }

    //季节切换
    const onSeasonNameChangeHandler = (SeasonName: string) => {
        queryObj.SeasonName = SeasonName;
        queryTemplateBySearchHandler();
    }

    //颜色切换
    const onColorNameChangeHandler = (ColorName: string) => {
        queryObj.ColorName = ColorName;
        queryTemplateBySearchHandler();
    }

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

    /**
     * 获取模板市场查询条件
     */
    const getTemplateQuery = async () => {
        try {
            let res = await ConfigService.GetTemplateQueryAsync();
            if (res.data.resultCode == 1) {
                var tempData = res.data.data;
                //国家
                if (tempData && tempData.CountryList) {
                    countries.value = tempData.CountryList;
                }
                //颜色
                if (tempData && tempData.ColorList) {
                    colorArr.value = tempData.ColorList;
                }
                //季节
                if (tempData && tempData.SeasonList) {
                    seasonArr.value = tempData.SeasonList;
                }
            }
        } catch (error) {
            console.log("getTemplateQuery", error);
        }
    }
    getLinesHandler();
    getTemplateQuery();
    queryTemplateBySearchHandler();
</script>

<style scoped>
    @import url('../../assets/styles/common.css');

    @font-face {
        font-family: "alifont";
        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;
    }

    .alifont {
        font-family: alifont;
    }

    .el-check-tag {
        background: #FFF;
        font-weight: 500 !important;
        font-size: 12px !important;
    }
    .MarketIndexListBox{
        width: 20%;
        margin-bottom: 20px;
        padding: 0 10px;
        cursor: pointer;
    }
    .MarketIndexList{
        width: 100%;
    }
    .MarketIndexListBox:hover{
        position: relative;
        top: -5px;
    }
    .MarketIndexListBox:hover .MarketIndexList{
        box-shadow: 0 5px 6px -3px #0003, 0 9px 12px 1px #00000024, 0 3px 16px 2px #0000001f;
    }
    .MarketIndexList-img{
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 100%;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        overflow: hidden;
    }
    .MarketIndexList-img img{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .MarketIndexList-text{
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 15px 20px 10px 20px;
    }
    .MarketVerticalLine{
        width: 1px;
        height: 80%;
        background: #dcdfe6;
        margin-right: 30px;
        margin-top: 5px;
    }
</style>