<template> 
    <div class="ElementNormalData">
            <el-input
            v-model="keywords" placeholder="输入关键词检索" 
            class="input-with-select q-pb-md" clearable
            @input="SearchCloudInfo">
                <template #prefix>
                    <IconSearch class="cusor-pointer" @click.stop="searchData"></IconSearch>
                </template>
            </el-input>
            <div v-loading="loading" style="height: calc(100%-40px);min-height:400px;overflow: auto;">
                <div class="symbol-item NormalDataCenter cursor-pointer"
                :class="[current==item.Id?'active':'']"
                v-for="(item,index) in dataList" @click="setElText(item,index)">
                    <div class="title fz14 text-weight-bold text-ellipsis">
                        <el-tooltip
                            style="width: 100%;"
                            effect="dark"
                            :content="item.Name"
                            placement="top"
                        >{{item.Name}}</el-tooltip>
                    </div>
                    <div class="images">
                        <el-image :src="item.PicPath" style="width: 100%;"
                        fit="cover">
                            <template #error>
                                <div class="row items-center" style="height: 100%;">
                                    <el-image :src="errImg"></el-image>
                                </div>
                            </template>
                        </el-image>
                    </div>
                    <div class="text fz12">
                        <el-tooltip
                            style="width:200px;"
                            effect="dark"
                            :content="item.Feature"
                            placement="top"
                        >{{item.Feature}}</el-tooltip>
                    </div>
                </div>
            </div>
            
            <div v-if="(!dataList || dataList.length==0) && !loading">
                <el-empty class="q-ma-xl" description="暂无数据" />
            </div>
    </div>
    <!-- 预览图 -->
    <el-image-viewer 
      @close="() => { isViewerShow = false }" 
      v-if="isViewerShow" 
      :initial-index="currentImg"
      :url-list="srcList"></el-image-viewer>
  </template>
  
  <script lang="ts" setup>
  
  import { ref, reactive, watch } from 'vue'
  import { storeToRefs } from 'pinia'
  import { useMainStore, useSlidesStore, useScreenStore } from '@/store'
  import MatchingData from '@/services/MatchingData'
  import { getHtmlPlainText } from '@/utils/common'
  import { useUserStore } from "@/store/user";
  import HtmlUtil from '@/utils/htmlutil'

    const { handleElement, handleElementId } = storeToRefs(useMainStore())
    const errImg = ref(require('@/assets/img/noImg.png') as any)
    const isViewerShow = ref(false)
    const currentImg = ref(0)
    const current = ref(null||Number)
    const srcList = ref([])
    const params = reactive({
            kw: HtmlUtil.htmlEncodeByRegExp(handleElement.value.contentStr),
            cn: '',
        })
    const keywords = ref('')
    const slidesStore = useSlidesStore()
    const dataList = ref([])
    const dataListAll = ref([])
    const loading = ref(true)

    const { userInfo } = storeToRefs(useUserStore());

    const SearchCloudInfo = () => {
        if(keywords.value){
            dataList.value = dataListAll.value.filter(x=>{
                return x.Name.toLowerCase().includes(keywords.value.toLowerCase())
            })
        }else dataList.value = dataListAll.value
    }
    const seeImg = (index:Number) =>{
        isViewerShow.value = true
        currentImg.value = index
    }
    const setElText = (item:any,index:Number) => {
        current.value = item.Id
        const contentStr = handleElement.value.contentStr
        if(contentStr!=item.Feature&&item.Feature) {
            const content = handleElement.value.content.replace(getHtmlPlainText(handleElement.value.content),item.Feature)
            const props = { 
                content,
                contentStr:item.Feature
            }
            slidesStore.updateElement({
                id: handleElementId.value,
                props
            })
        }
        
    }
    const searchData = () => {
        if(!keywords.value) return
        params.kw = keywords.value
        loading.value = true
        getDatas()
    }
    const getDatas = async () => {
        const response = await MatchingData.ScenicSearch(params)
        if (response.data.resultCode == 1) {
            let dataLists = response.data.data.filter(x=>x.Feature!='')
            dataListAll.value = dataList.value = checkPoiCoverImg(dataLists)
        }
        loading.value = false
    }
    const checkPoiCoverImg = (array:any[])=>{
        if(array.length==0) return
        array.forEach((x,index)=>{
            x.Id = index+1
            if(x.Feature==handleElement.value.contentStr) current.value = index+1
            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
    }

    getDatas()
    
    watch(()=>handleElementId.value, () => {
        loading.value = true
        keywords.value = ''
        params.kw = HtmlUtil.htmlEncodeByRegExp(handleElement.value.contentStr)
        getDatas()
    })
  </script>
  
  <style lang="scss" scoped>
    .ElementNormalData{
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .NormalDataCenter{
        border: 2px solid #CED9FF;
        padding: 8px 14px;
        margin-bottom: 5px;
    }
    .NormalDataCenter.active{
        border-color: #0B40FE;
    }
    .title{
        font-family: PingFang SC;
    }
    .images{
        width: 194px;
        max-height: 139px;
        overflow: hidden;
        margin-top: 8px;
        margin-bottom: 11px;
    }
    .text {
        font-family: PingFang SC;
        font-weight: 300;
        color: #000;
        line-height: 18px;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical; 
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
  </style>