<template>
    <div>
        <div class="row items-center reactive">
            <img src="../../../assets/img/resource.png" style="width: 30px; height: 30px" />
            <div class="sub-title1 q-ml-md">搜索</div>
            <div class="tools-bar col q-ml-lg">
                <input type="text" style="margin-left: -1px;outline: none;" @keyup.enter="handleSearch" v-model="searchParmeters.keywords"
                    maxlength="12" placeholder="关键字城市/酒店/景点/餐厅..." class="col full-width full-height no-border q-px-md" />
            </div>
            <el-button round type="primary" size="small" @click="handleClose"
            style="position: absolute;right: -17px;top: -18px;background: --el-color-primary;height: 36px;">
                <IconClose size="14px"></IconClose>
            </el-button>
        </div>
        <div class="q-mt-md" style="user-drag: none;">
            <div class="row items-center tools-bar">
                <el-dropdown v-if="false" style="margin-left: -1px;" trigger="click">
                    <el-button type="default" class="ppt-button text-white"
                        style="background: #000;border-radius: 0;padding: 8px;width:81px;">
                        <div class="row items-center">
                            <span class="col" style="margin-top: 2px; text-align: left;">{{ currentPlatform }}</span>
                            <IconDown class="q-ml-sm" :size="16" />
                        </div>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item v-for="(x, i) in platforms" @click="handleChangeTypeOrPlatform(x.id, 0)"
                                :key="i">{{ x.name }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <el-dropdown style="margin-left: -1px;" trigger="click">
                    <el-button type="default" class="ppt-button text-white selectWidth"
                        style="background: #000;border-radius: 0;padding: 8px;">
                        <div class="row items-center">
                            <span class="col" style="margin-top: 2px; text-align: left;">{{ currentMatchType }}</span>
                            <IconDown class="q-ml-sm" :size="16" />
                        </div>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item v-for="(x, i) in allTypes" @click="handleChangeTypeOrPlatform(x.id, 1)"
                            :style="{'font-weight':x.id===searchParmeters.type?'600':'',
                                'color':x.id===searchParmeters.type?'#564bec':'',}"
                                :key="i">{{ x.name }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <el-select class="selectWidth" style="margin-left: -1px;"
                :style="{'max-width':searchParmeters.type==2?'':''}"
                :class="[searchParmeters.type==2?'':'']"
                @change="handleChangeTypeOrPlatform(searchParmeters.Province,2)"
                    v-model="searchParmeters.Province"
                    filterable
                    placeholder="地区"
                    clearable>
                    <el-option
                    v-for="item in CityList"
                    :key="item.ID"
                    :label="item.Name"
                    :value="item.ID"
                    />
                </el-select> 
                <el-select class="selectWidth" style="margin-left: -1px;"
                @change="handleChangeTypeOrPlatform(searchParmeters.Province,5)"
                    v-model="searchParmeters.UseType"
                    multiple
                    filterable
                    placeholder="适用类型"
                    clearable>
                    <el-option
                    v-for="item in ApplicableTypeList"
                    :key="item.ID"
                    :label="item.Name"
                    :value="item.ID"
                    />
                </el-select>
                <template v-if="searchParmeters.type==2">
                    <el-dropdown style="margin-left: -1px;" trigger="click">
                        <el-button type="default" class="ppt-button text-white selectWidth"
                            style="background: #000;border-radius: 0;padding: 8px;">
                            <div class="row items-center">
                                <span class="col" style="margin-top: 2px; text-align: left;">{{ currentDiningType }}</span>
                                <IconDown class="q-ml-sm" :size="16" />
                            </div>
                        </el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item v-for="(x, i) in DiningTypeList" @click="handleChangeTypeOrPlatform(x.ID, 3)"
                                    :key="i"
                                    :style="{'font-weight':x.ID===searchParmeters.DiningType?'600':'',
                                    'color':x.ID===searchParmeters.DiningType?'#564bec':'',}">{{ x.Name }}</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <el-dropdown style="margin-left: -1px;" trigger="click">
                        <el-button type="default" class="ppt-button text-white selectWidth"
                            style="background: #000;border-radius: 0;padding: 8px;">
                            <div class="row items-center">
                                <span class="col" style="margin-top: 2px; text-align: left;">{{ currentDiningPriceType }}</span>
                                <IconDown class="q-ml-sm" :size="16" />
                            </div>
                        </el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item v-for="(x, i) in DiningPriceTypeList" @click="handleChangeTypeOrPlatform(x.ID, 4)"
                                :style="{'font-weight':x.ID===searchParmeters.DiningPriceType?'600':'',
                                    'color':x.ID===searchParmeters.DiningPriceType?'#564bec':'',}"
                                    :key="i">{{ x.Name }}</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </template>
                <!-- <input v-else type="text" style="margin-left: -1px;outline: none;" @keyup.enter="handleSearch" v-model="searchParmeters.keywords"
                    maxlength="12" placeholder="关键字城市/酒店/景点/餐厅..." class="col full-width full-height no-border q-px-md" /> -->
            </div>
            <el-row :gutter="12" class="q-mt-lg" v-if="!loading">
                <el-col :span="12" v-for="(x, i) in data" :key="i">
                    <div class="item-poi" @click="setSelectedPoiItem(x)" :style="{ 'background-image': `url('${x.PicPath.split('?')[0]}')` }">
                        <div class="container column">
                            <div class="row items-center">
                                <!-- <el-tag v-if="x.UseTypeList&&x.UseTypeList.length==0" type="success" size="mini" class="text-bold UseTypeTitle">{{ getTypeName(x.Platform, 0)
                                    }}</el-tag> -->
                                <el-tag type="success" 
                                    size="mini" class="text-bold UseTypeTitle">{{ getTypeName(x.Type, 1)
                                    }}</el-tag>
                                <template v-if="x.UseTypeList&&x.UseTypeList.length>0">
                                    <el-tag type="info" size="mini" class="text-bold UseTypeTitle" v-for="(item,index) in x.UseTypeList">
                                       <template v-if="item.indexOf('团')!=-1">{{ item.replace('团', "")}}</template> 
                                       <template v-else>{{ item.replace('常用', "")}}</template> </el-tag>
                                </template>
                            </div>
                            <div class="col"></div>
                            <el-text class="text-white full-width"
                                style="text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); font-size: 12px;" line-clamp="1">
                                {{ x.Name }}
                            </el-text>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <div style="height: 323px;" v-loading="loading" v-if="loading"></div>
            <div class="row">
                <div class="col"></div>
                <el-pagination layout="prev, pager, next" class="no-bg " hide-on-single-page
                    :page-size="searchParmeters.pageSize" @current-change="handleSearch"
                    v-model:current-page="searchParmeters.pageIndex" :total="total" small />
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from "vue"
import { ApiResult } from "@/configs/axios";
import SpiderService from "@/services/SpiderService";
import { useUserStore } from "@/store";

const emit = defineEmits<{
  (event: 'close'): void,
  (event: 'change',payload: any): void
}>()
const userStore = useUserStore()
const {userInfo} = userStore
const loading = ref(false)
const data = ref<any[]>()
const total = ref(0)
const searchParmeters = reactive({
    keywords: '',
    platform: 2,
    type: 0,
    pageIndex: 1,
    pageSize: 6,
    Province: 0,
    DiningType: 0,
    DiningPriceType: 0,
    UseType: []

})
const platforms = ref<{ id: number, name: string }[]>([
    { id: 2, name: "ERP" },
    { id: 1, name: "第三方" }
])
const allTypes = ref<{ id: number, name: string }[]>([
    { id: 0, name: "不限类型" },
    { id: 1, name: "酒店" },
    { id: 2, name: "餐厅" },
    { id: 3, name: "景点" }
])
const CityList = ref([])
const DiningTypeList = ref([])
const DiningPriceTypeList = ref([])
const ApplicableTypeList = ref([])
if(!userInfo.isp){
    platforms.value.splice(0,1)
    searchParmeters.platform=1
}
const currentPlatform = computed(() => {
    return getTypeName(searchParmeters.platform, 0)
})
const currentMatchType = computed(() => {
    return getTypeName(searchParmeters.type, 1)
})
const currentProvince = computed(() => {
    return getTypeName(searchParmeters.Province, 2)
})
const currentDiningType = computed(() => {
    return getTypeName(searchParmeters.DiningType, 3)
})
const currentDiningPriceType = computed(() => {
    return getTypeName(searchParmeters.DiningPriceType, 4)
})

const getTypeName = (t: number, st: 0 | 1) => {
    if (st == 1) {
        const p = allTypes.value.find(x => x.id == t)
        return (p?.name ?? "").replace('不限', "")
    }else if (st == 2) {
        const p = CityList.value.find(x => x.ID == t)
        return (p?.Name ?? "").replace('不限', "")
    }else if (st == 3) {
        const p = DiningTypeList.value.find(x => x.ID == t)
        return (p?.Name ?? "").replace('不限', "")
    }else if (st == 4) {
        const p = DiningPriceTypeList.value.find(x => x.ID == t)
        return (p?.Name ?? "").replace('不限', "")
    } else {
        const p = platforms.value.find(x => x.id == t)
        return (p?.name ?? "").replace('不限', "")
    }
}
// const getNation = () =>{
//     const response = await SpiderService.GetChildList({Id:0})
//     if (response.data.resultCode == ApiResult.SUCCESS) {
//         data.value = response.data.data.pageData
//         total.value = response.data.data.count
//         searchParmeters.pageIndex = response.data.data.pageIndex
//     }
// }
const getProvince = async () =>{
    const response = await SpiderService.GetChildList({Id:651})
    if (response.data.resultCode == ApiResult.SUCCESS) {
        CityList.value = response.data.data
        let obj = {
            ID: 0,
            Name: '不限地区'
        }
        CityList.value.unshift(obj)
    }
}
const getDiningsType = async () =>{
    const response = await SpiderService.GetDiningType({})
    if (response.data.resultCode == ApiResult.SUCCESS) {
        DiningTypeList.value = response.data.data
        let obj = {
            ID: 0,
            Name: '不限餐'
        }
        DiningTypeList.value.unshift(obj)
    }
}
const getDiningPricesType = async () =>{
    const response = await SpiderService.GetDiningPriceType({})
    if (response.data.resultCode == ApiResult.SUCCESS) {
        DiningPriceTypeList.value = response.data.data
        let obj = {
            ID: 0,
            Name: '不限餐标'
        }
        DiningPriceTypeList.value.unshift(obj)
    }
}

const getDiningUseType = async () => {
    const response = await SpiderService.GetDiningUseType({})
    if (response.data.resultCode == ApiResult.SUCCESS) {
        ApplicableTypeList.value = response.data.data
        let obj = {
            ID: 0,
            Name: '不限'
        }
        ApplicableTypeList.value.unshift(obj)
    }
}
const handleChangeTypeOrPlatform = (id: number, t: 0 | 1 | 2 | 3 | 4 | 5) => {
    if (t == 0) searchParmeters.platform = id
    else if(t == 2){
        searchParmeters.Province = id
    }else if(t == 3){
        searchParmeters.DiningType = id
    }else if(t == 4){
        searchParmeters.DiningPriceType = id
    }else if(t == 5){
        
    }else searchParmeters.type = id
    searchParmeters.pageIndex = 1
    handleSearch()
}


const handleSearch = async () => {
    console.log('handleSearch',searchParmeters.keywords)
    if (loading.value) return
    
    loading.value = true
    total.value = 0
    data.value = []
    const response = await SpiderService.GetDmcSourcePage(searchParmeters)
    if (response.data.resultCode == ApiResult.SUCCESS) {
        data.value = response.data.data.pageData
        total.value = response.data.data.count
        searchParmeters.pageIndex = response.data.data.pageIndex
    }

    loading.value = false
}
const handleClose = () => emit('close')
const setSelectedPoiItem = (data:any)=> emit('change', data)

handleSearch()
getProvince()
getDiningsType()
getDiningPricesType()
getDiningUseType()
</script>

<style scoped>
    .tools-bar ::v-deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper){
        box-shadow: 0 0 0 0px var(--el-input-border-color,var(--el-border-color)) inset;
        border-left: 1px solid #fff;
    }
    .tools-bar ::v-deep(.el-select .el-input.isfocus .el-input__wrapper){
        box-shadow: 0 0 0 0px var(--el-input-border-color,var(--el-border-color)) inset;
        border-left: 1px solid #fff;
    }
    .tools-bar ::v-deep(.el-select .el-input__wrapper){
        box-shadow: 0 0 0 0px var(--el-input-border-color,var(--el-border-color)) inset;
        background: black;
        border-radius: 0;
        border-left: 1px solid #fff;
    }
    .tools-bar ::v-deep(.el-input__inner){
        color: #fff;
    }
    .tools-bar ::v-deep(.el-button){
        border-right: 0;
        
    }
    .tools-bar ::v-deep(.el-button:hover){
        border-color: #fff;
    }
    .tools-bar ::v-deep(.el-button span){
        color: #fff;
    }
    .tools-bar ::v-deep(.el-button span.col){
        max-width: 50px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
.search-card-box .tools-bar {
    border-radius: 8px;
    height: 32px;
    overflow: hidden;
    border: 1px solid #000;
}

.search-card-box .item-poi {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    background-size: cover;
    background-position: center;
    background-color: #000;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    cursor: pointer;
}

.search-card-box .item-poi:hover {
    box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.2) !important;
}

.search-card-box .item-poi .container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 8px;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
}
.selectWidth{
    min-width: 70px;
}
.UseTypeTitle{
    font-size: 10px;
    padding: 0 3px;
    height: 16px;
    margin-left: 3px;
}
.UseTypeTitle:first-child{
    margin-left: 0;
}
</style>