<template>
  <div class="case-list-container">
    <div class="title">
      复飞核实
      <div class="switch-button">
        <a-switch v-model:checked="fufeiLayer.checked" @change="handlerLayerButtonClick" />
      </div>
    </div>
    <div class="case-list">
      <div class="case-item" v-for="item in list" :key="item.id" @click="toPosition(item)">
        <img src="/statistical/prove-icon.png" alt="" />
        <span>{{ item.countyname }}{{ item.streetname }}{{item.communityname}}&nbsp;&nbsp;&nbsp;拆除复耕</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted,defineEmits } from 'vue';
  import { reFlyVerifyPage } from '@/api/statistical';

const emits = defineEmits(["handlerLayerButtonClick","toPosition"]);


const checked = ref<Boolean>(true);

const fufeiLayer = ref({
    lable:"复飞核实",
    value:["fufeiLayerFill","fufeiLayerLine"],
    checked:true,
})

function handlerLayerButtonClick(item){
    fufeiLayer.value.checked = item;
    emits("handlerLayerButtonClick",fufeiLayer.value);
    
}

  const list = ref<any>([]);
  function getList() {
    reFlyVerifyPage({}).then((res) => {
      console.log(res);
      list.value = res.items;
    });
  }


  function toPosition(item){
    console.log("item123",item);
    emits("toPosition",[item.lng,item.lat])
  }

  onMounted(() => {
    getList();
  });



</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;
      }
      span {
        color: #7ebbff;
        margin-left: 10px;
      }
    }
  }
</style>
