<template>
    <div v-if="!currentPoi">
        <div class="row items-center">
            <div class="text-small" style="color:#BABABA;">已接入：路书云，马蜂窝</div>
            <div class="col q-ml-lg spiderRes">
                <el-input v-model="keyValue" placeholder="输入国家/城市/名称快速查找" clearable @keyup.enter="changeKeyValueHandler">
                    <template #append>
                        <el-button type="primary" style="color: white;" @click="changeKeyValueHandler">搜索</el-button>
                    </template>
                </el-input>
            </div>
        </div>
        <div class="q-mt-lg row wrap" style="margin-left: -10px;" v-if="loading || (data && data.length>0)" v-loading="loading">
            <div class="spider-item" v-for="x in data" @click="currentPoi=x">
                <img :src="x.PicPath" v-if="x.PicPath"/>
                <div class="subtitle" :title="x.Name">{{ x.Name }}</div>
                <div class="imgcount row items-center">
                    <el-icon class="q-mr-md"><Picture /></el-icon> 
                    <span class="alifont">{{ x.ImgArray?x.ImgArray.length:0 }}</span>
                </div>
            </div>
        </div>
        <el-empty class="q-ma-lg" description="暂无数据" v-if="!loading&& (!data || data.length==0)" />
        <div class="q-mt-md" style="display: flex;justify-content: center;" v-if="data && data.length>0">
            <el-pagination
                v-model:current-page="queryParameters.pageIndex"
                :page-size="queryParameters.pageSize"
                small-padding
                layout="prev, pager, next"
                :total="total"
                @size-change="SearchHandler"
                @current-change="SearchHandler"
            />
        </div>
    </div>
    <div v-else>
        <div class="row item-center">
            <el-button type="primary" @click="currentPoi=null" link><el-icon><ArrowLeft /></el-icon> 返回</el-button>
            <div class="q-ml-lg text-small">【{{ currentPoi.Name }}】相关图片</div>
        </div>
        <div class="q-mt-lg row wrap" style="margin-left: -10px;height: 440px;overflow-y: auto;">
            <div class="spider-item" v-for="x in currentPoi.ImgArray">
                <img :src="x" />
                <div class="img-box">
                    <el-image
                        style="width: 100%; height: 100%"
                        :src="x"
                        :zoom-rate="1.2"
                        :max-scale="7"
                        :min-scale="0.2"
                        :preview-src-list="[x]"
                        fit="cover"
                    />
                </div>
                <div class="imgcount" style="padding:0px;">
                    <el-checkbox label="" :checked="chooseUrl==x" @click.stop="changeChooseUrlHandler(x)"></el-checkbox>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ApiResult } from '@/configs/axios';
import SpiderService from '@/services/SpiderService';
import { ElLoading } from 'element-plus';
import { ref,defineEmits } from 'vue';
import { Picture,ArrowLeft } from '@element-plus/icons-vue';

const emit = defineEmits<{
  (event: 'change',payload:string): void
}>()

const keyValue = ref('')
const loading = ref(false)
const data = ref<any[]>()
const currentPoi = ref<any>()
const chooseUrl = ref('')
const queryParameters = ref<{
    pageIndex:number,
    pageSize:number,
    Name?:string
}>({
    pageIndex:1,
    pageSize:16,
    Name:''
})
const total = ref(0)

const SearchHandler = async ()=>{
    loading.value=true
    queryParameters.value.Name=keyValue.value

    data.value=[]
    let response = await SpiderService.GetThirdPartyResourceAsync(queryParameters.value)
    if(response.data.resultCode == ApiResult.SUCCESS){
        data.value = checkPoiCoverImg(response.data.data.pageData)
        total.value = response.data.data.count
    }

    loading.value=false
}

const checkPoiCoverImg = (array:any[])=>{
    array.forEach(x=>{
        if((!x.PicPath||x.PicPath=='') && x.ImgArray && x.ImgArray.length>0){
            x.PicPath=x.ImgArray[0]
        }else if(x.PicPath && x.PicPath!=''){
            if(x.PicPath.indexOf('?')!=-1) x.PicPath=x.PicPath.split('?')[0]
            x.ImgArray = x.ImgArray ?? []
            x.ImgArray.splice(0,0,x.PicPath)
        }
    })
    return array
}

const changeKeyValueHandler = ()=>{
    if(queryParameters.value.Name!=keyValue.value){
        queryParameters.value.pageIndex=1
        total.value=0
        SearchHandler()
    }
}

const changeChooseUrlHandler = (url:string)=>{
    chooseUrl.value = chooseUrl.value==url?'':url
    emit('change',chooseUrl.value)
}

SearchHandler()
</script>
<style scoped>
    .spiderRes::v-deep(.el-button){
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    .spider-item{
        width:calc(25% - 10px) !important;
        height: 0;
        overflow: hidden;
        border-radius: 5px;
        position: relative;
        padding-bottom: 15.25%;
        margin-left: 10px;
        margin-bottom: 10px;
        cursor: pointer;
    }
    .spider-item img{
        width: 100%;
        height: 100%;
        position: absolute;
        object-fit: cover;
    }
    .spider-item .img-box{
        width: 100%;
        height: 100%;
        position: absolute;
    }
    .spider-item .subtitle {
        font-size: 13px;
        color: #fff;
        text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
        word-break: break-all;
        z-index: 2;

        background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
        padding: 10px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .spider-item .imgcount {
        font-size: 12px;
        color: #fff;
        text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
        word-break: break-all;
        z-index: 2;

        background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0));
        padding: 10px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        text-align: right;
    }
</style>