<template>
  <div class="LayerComponent">
    <div class="title">图层</div>
    <div class="insert-layer">
      <a-button
        class="add-layer-button"
        type="primary"
        :icon="h(PlusOutlined)"
        @click="openInsertShpModal"
        >创建图层</a-button
      >
      <a-button type="text" class="clear-layer-button" @click="handlerClearLayerList"><DeleteOutlined></DeleteOutlined>清空</a-button>
    </div>
    <div class="show-current-layer">
      <div class="current-layer-div">
        <div class="current-layer-title">当前图层</div>
        <div class="create-new-layer-button" @click="changeClick">叠加图层</div>
      </div>
    </div>
    <div class="show-layers">

      <!-- empty -->
      <a-empty
        v-if="props.layerList.length==0"
        image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
        :image-style="{
          height: '60px',
        }"
        style="margin-top:120px;"
      >
        <template #description>
          <span>
            暂无数据，需要将服务添加到工作区
          </span>
        </template>
        <a-button type="primary" @click="changeClick">叠加服务</a-button>
      </a-empty>

      <!-- layer list -->
      <a-card hoverable style="width: 326px;margin-bottom:15px;" v-for="(item,index) in props.layerList" :key="index">
        <!-- <template #cover>
          <img
            alt="example"
            src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
          />
        </template> -->
        <template #actions>
          <setting-outlined key="setting" />
          <TableOutlined @click="getTableList(item)" />
          <DeleteOutlined  @click="removeLayer(item)" />
        </template>
        <a-card-meta :title="item.name" :description="item.description">
          <template #avatar>
            <a-checkbox v-model:checked="item.checked" @change="handlerLayerShowChange(item)" />
            <!-- <a-avatar src="https://joeschmoe.io/api/v1/random" /> -->
          </template>
        </a-card-meta>
      </a-card>

      <div
        v-if="false"
        :class="`show-layer-item ${isSelected === item.id ? '' : ''}`"
        v-for="item in dataList"
        :key="item.id"
        @click="selectLayer(item.id)"
      >
        <a-checkbox v-model:checked="item.checked" />
        
        <div class="layer-item-text">
          <div class="item-title">名称： {{ item.name }}</div>
          <div class="item-title">描述： {{ item.description }}</div>
          <div class="item-title">时间： {{ item.createTime }}</div>
          <div class="item-control">
            <a-button
              type="primary"
              size="small"
              style="background-color: #09b66d; margin-right: 7px"
              >查看数据</a-button
            >
            <a-button size="small" style="margin-left:7px;" type="error">移除</a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { PlusOutlined,SettingOutlined,EditOutlined,EllipsisOutlined,DeleteOutlined,TableOutlined} from '@ant-design/icons-vue';
  import { h, defineEmits, ref,defineProps } from 'vue';
  import { errorImage } from '../util.ts';

  const props = defineProps(
    {
      layerList:{
        type:Array,
        default:[],
      }
    })
  const dataList = ref([]);
  dataList.value = props.layerList;


  const isSelected = ref();
  const emits = defineEmits(['changeOpenModal', 'changeOpenInsertShpModal','clearLayerList','handlerLayerShowChange','handlerGetTableList']);
  const changeClick = () => {
    emits('changeOpenModal', true);
  };
  const openInsertShpModal = () => {
    emits('changeOpenInsertShpModal', true);
  };
  const selectLayer = (id: number) => {
    isSelected.value = id;
  };

  const handlerClearLayerList = ()=>{
    emits("clearLayerList")
  }

  const getTableList = (layer)=> {
    emits("handlerGetTableList");
  }

  const removeLayer = (layer)=>{
    layer.checked = false;
    emits("handlerLayerShowChange",layer)
    props.layerList?.forEach((item,index)=>{
      if(item.id==layer.id){
        props.layerList.splice(index,1);
      }
    })
  }

  const handlerLayerShowChange = (layer)=>{
    emits("handlerLayerShowChange",layer)
  }
</script>

<style lang="scss" scoped>
  .LayerComponent {
    position: absolute;
    top: 0;
    left: 0;
    width: 356px;
    height: 100%;
    background-color: #e0e5ed;
    .title {
      height: 61px;
      font-size: 26px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .insert-layer {
      height: 61px;
      background-color: #fff;
      padding-left: 16px;
      padding-right: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      .add-layer-button {
        background-color: #0081ff;
      }
      .clear-layer-button {
        user-select: none;
        cursor: pointer;
      }
    }
    .show-current-layer {
      padding-left: 15px;
      padding-right: 15px;
      .current-layer-div {
        height: 37px;
        display: flex;
        user-select: none;
        .current-layer-title {
          background-color: #fff;
          flex: 1;
          display: flex;
          align-items: center;
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
        }
        .current-layer-title::before {
          content: '';
          display: block;
          width: 7px;
          height: 7px;
          background-color: #09b66d;
          border-radius: 50%;
          margin: 6px;
        }
        .create-new-layer-button {
          width: 106px;
          background-color: #0081ff;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;
          cursor: pointer;
        }
      }
    }
    .show-layers {
      height: calc(100% - 179px);
      padding-top: 14px;
      padding-left: 15px;
      padding-right: 15px;
      overflow: auto;

      .show-layer-item {
        background-color: #fff;
        height: 133px;
        border-radius: 5px;
        padding: 23px 10px;
        display: flex;
        margin-bottom: 14px;
        .layer-item-text {
          margin-left: 20px;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
      }
    }
    .select-list-item {
      border: 1px solid;
    }
  }

  .item-title{
    line-height:24px;
    color:#777;
  }
</style>
