<template>
  <div class="case-list-container" v-show="tifList.length > 0">
      <div class="title">
        查询结果
      </div>
      <div class="case-list">
        <div class="case-item" v-for="item in tifList" :key="index" >
          <img src="/statistical/prove-icon.png" alt="" />
          <a-checkbox v-model:checked="item.checked" @change="layerChange(item)" >
              <span>{{item.tifName}}</span>
          </a-checkbox>
        </div>
        <a-empty v-if="tifList.length <= 0" />
      </div>
  </div>
</template>
<script lang="ts" setup>
  import {
    defineEmits,
    ref,
    defineExpose,
  } from 'vue'

  import {getIntersectTif } from '@/api/tiankongdi';
  import { useMessage } from '@/hooks/web/useMessage';
  const { createConfirm, createMessage } = useMessage();

  const tifList = ref([])
  
  const emits = defineEmits(['changeTifLayer'])

  const handlerQueryIntersectTif = (wkt:string)=>{

  let query = {
    TargetShape:wkt,
    page:1,
    limit:10,
    key:null
  }

  getIntersectTif(query).then(res=>{
    if(res.items.length>0){
        res.items?.forEach((item,index)=>{
            res.items[index].checked = false;
        })
        tifList.value = res.items;
    }else{
        createMessage.error("当前范围内暂无查询数据！");
    }
    
  })
}


const layerChange = (item)=>{
    emits("changeTifLayer",item);
}

// 抛出函数
defineExpose({
    handlerQueryIntersectTif
});
</script>
<style type="less" scoped>

.case-list-container {
    width: 418px;
    height: 440px;
    background: #041b36;
    position: relative;
    margin-bottom: 20px;
    &::before {
      content: '';
      height: 70%;
      width: 50px;
      position: absolute;
      bottom: 10px;
      left: 10px;
      background: url('/videosupervision/main-left.png');
      background-size: 100% 100%;
    }
    &::after {
      content: '';
      height: 70%;
      width: 50px;
      position: absolute;
      bottom: 10px;
      right: 10px;
      background: url('/videosupervision/main-right.png');
      background-size: 100% 100%;
    }
    .title {
      width: 100%;
      height: 40px;
      background-image: url('/videosupervision/title.png');
      background-size: 100% 100%;
      line-height: 40px;
      text-indent: 18px;
      font-size: 18px;
      font-weight: bold;
      color: #fff;
    }
    .switch-button {
      float: right;
      margin-right: 20px;
    }
  }
  .case-list {
    padding: 10px 24px;
    height: 376px;
    overflow: auto;
    .case-item {
      cursor:pointer;
      border-bottom: 1px dashed #1d60b4;
      padding: 10px 0;
      img {
        width: 15px;
        margin-right:12px;
      }
      span {
        color: #7ebbff;
        margin-left: 10px;
      }
    }
  }
::v-deep .ant-empty{
    margin-top:110px;
}
::v-deep .ant-empty-description{
    color:#fff;
}
</style>
