<template>
    <div class="layer-list-container" >
        <div class="title">
          图层
        </div>
        <p class="cate-name">数据图层</p>
        <div class="case-list">
            <div class="case-item" v-for="item in dataLayerList" :key="index" >
                <img src="/statistical/prove-icon.png" alt="" />
                <a-checkbox v-model:checked="item.checked" @change="layerChange(item)" >
                    <span style="color:#fff;">{{item.name}}</span>
                </a-checkbox>
            </div>
        </div>
        
        <p class="cate-name">历史影像</p>
        <div class="case-list">
            <div class="case-item" v-for="item in historyLayerList" :key="index" >
                <img src="/statistical/prove-icon.png" alt="" />
                <a-checkbox v-model:checked="item.checked" @change="layerChange(item)" >
                    <span style="color:#fff;">{{item.name}}</span>
                </a-checkbox>
            </div>
            <a-empty v-if="historyLayerList.length <= 0" />
        </div>

        <p class="cate-name">专题图层</p>

        <div class="case-list">
          <div class="case-item" v-for="item in speciaLayerList" :key="index" >
            <img src="/statistical/prove-icon.png" alt="" />
            <a-checkbox v-model:checked="item.checked" @change="layerChange(item)" >
                <span style="color:#fff;">{{item.name}}</span>
            </a-checkbox>
          </div>
          <a-empty v-if="speciaLayerList.length <= 0" />
        </div>

            
        <p class="cate-name">地图底图</p>
        <div class="case-list">

            <a-radio-group v-model:value="baseLayer">
                <div class="case-item" v-for="item in baseLayerList" :key="index" >
                    <img src="/statistical/prove-icon.png" alt="" />
                    <a-radio  :value="item.value">
                        <span style="color:#fff;">{{item.name}}</span>
                    </a-radio>
                </div>
            </a-radio-group>
            
        </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 dataLayerList = ref([
        {
            name:"数据图层",
            checked:true,
        },
        {
            name:"视频监控",
            checked:false,
            value:"JianKong"
        }
    ])

    const historyLayerList = ref([
        {
            name:"费县影像图层",
            checked:false,
        }
    ])
    const speciaLayerList = ref([
        {
            name:"地类图层",
            checked:false,
        },
        {
            name:"三调图层",
            checked:false,
        }
    ])

    const baseLayerList = ref([
        {
            name:"导航地图",
            checked:false,
            value:"daohang",
        },{
            name:"卫星地图",
            checked:false,
            value:"weixing",
        },{
            name:"白板地图",
            checked:false,
            value:"baiban",
        },
    ])

    const baseLayer = ref("weixing")
    
    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;
          })
          layerList.value = res.items;
      }else{
          createMessage.error("当前范围内暂无查询数据！");
      }
    })
  }
  
  
  const layerChange = (item)=>{
      emits("changeTifLayer",item);
  }
  
  // 抛出函数
  defineExpose({
    //   handlerQueryIntersectTif
  });

</script>
  <style type="less" scoped>
  
  .layer-list-container {
      width: 208px;
      min-height: 340px;
      background: #041b36;
      position: relative;
      margin-bottom: 20px;
      &::before {
        content: '';
        height: 70%;
        width: 20px;
        position: absolute;
        bottom: 5px;
        left: 5px;
        background: url('/videosupervision/main-left.png');
        background-size: 100% 100%;
      }
      &::after {
        content: '';
        height: 70%;
        width: 20px;
        position: absolute;
        bottom: 5px;
        right: 5px;
        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;
      overflow: auto;
      .case-item {
        cursor:pointer;
        border-bottom: 1px dashed #1d60b4;
        color:#fff;
        padding: 5px 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;
  }

  .cate-name{
    color:#fff;
    padding:12px;
    font-size:14px;
    margin-bottom:0px;
  }
  </style>
  