<template>
    <div>
        <div class="row items-center">
            <img src="../../../assets/img/resource.png" style="width: 30px; height: 30px" />
            <div class="sub-title1 col q-ml-md">搜索</div>
            <el-button link round size="small" @click="handleClose">
                <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 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"
                        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;">{{ 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)"
                                :key="i">{{ x.name }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <input type="text" style="margin-left: -1px;outline: none;" @keyup.enter="handleSearch" v-model="searchParmeters.keywords"
                    maxlength="12" placeholder="关键字城市/酒店/景点/餐厅..." class="col 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 type="success" size="small" class="text-bold">{{ getTypeName(x.Platform, 0)
                                    }}</el-tag>
                                <el-tag type="info" size="small" class="text-bold q-ml-md">{{ getTypeName(x.Type, 1)
                                    }}</el-tag>
                            </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
})
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: "景点" }
])
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 getTypeName = (t: number, st: 0 | 1) => {
    if (st == 1) {
        const p = allTypes.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 handleChangeTypeOrPlatform = (id: number, t: 0 | 1) => {
    if (t == 0) searchParmeters.platform = id
    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.GetSourcesAsync(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()
</script>

<style>
.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));
}
</style>