<template>
  <div class="LayerComponent lightOrDark1">
    <div class="title">图层</div>
    <div class="insert-layer lightOrDark2">
      <a-button class="add-layer-button blue" type="primary" @click="changeClick">
        <PlusOutlined />叠加图层
      </a-button>
      <a-button type="text" class="clear-layer-button" @click="handlerClearLayerList">
        <DeleteOutlined />清空
      </a-button>
    </div>
    <div class="show-current-layer lightOrDark2">
      <div class="current-layer-div">
        <div class="current-layer-title">当前图层</div>
        <div class="create-new-layer-button" @click="openInsertShpModal">创建新图层</div>
      </div>
    </div>
    <div class="show-layers">
      <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" class="blue" @click="changeClick">叠加服务</a-button>
      </a-empty>

      <a-card
        hoverable
        style="width: 326px; margin-bottom: 15px"
        v-for="(item, index) in props.layerList"
        :key="index"
      >
        <a-row>
          <a-col :span="2">
            <a-checkbox
              v-model:checked="item.checked"
              style="margin-top: 25px"
              @change="handlerLayerShowChange(item)"
            />
          </a-col>
          <a-col :span="10">
            <a-image src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />
          </a-col>
          <a-col :span="12">
            <div style="margin-left: 10px">
              <div style="height: 50px"><span>名称：</span></div>
              <div>
                <a-button
                  v-if="index != 0"
                  type="success"
                  size="small"
                  style="margin-right: 8px"
                  @click="setLayerTableShow(item)"
                >
                  查看数据
                </a-button>
                <a-button
                  type="primary"
                  class="blue"
                  size="small"
                  @click="setLayerDrawerShow(item)"
                >
                  操作
                </a-button>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-card>
    </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';

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

  const isSelected = ref();
  const emits = defineEmits([
    // 叠加服务
    'serveModalCancle',
    // 创建新图层
    'changeOpenInsertShpModal',
    // 清空按钮
    'clearLayerList',
    // 单选框改变
    'handlerLayerShowChange',
    // 查看数据
    'setLayerTableShow',
    // 操作
    'setLayerDrawerShow',
  ]);
  // 叠加服务
  const changeClick = () => {
    emits('serveModalCancle', true);
  };
  // 创建新图层
  const openInsertShpModal = () => {
    emits('changeOpenInsertShpModal', true);
  };
  const selectLayer = (id: number) => {
    isSelected.value = id;
  };
  // 清空按钮
  const handlerClearLayerList = () => {
    emits('clearLayerList');
  };

  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);
  };

  // 查看数据
  function setLayerTableShow(item) {
    emits('setLayerTableShow', true, item);
  }
  // 操作
  function setLayerDrawerShow(item) {
    emits('setLayerDrawerShow', true, item);
  }
</script>

<style lang="scss" scoped>
  html[data-theme='light'] {
    .lightOrDark1 {
      background-color: #e0e5ed;
    }
    .lightOrDark2 {
      background-color: #ffffff;
    }
  }
  [data-theme='dark'] {
    .lightOrDark1 {
      background-color: #000000;
    }
    .lightOrDark2 {
      background-color: #141414;
    }
  }
  .LayerComponent {
    position: absolute;
    top: 0;
    left: 0;
    width: 356px;
    height: 100%;
    .title {
      height: 61px;
      font-size: 26px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .insert-layer {
      height: 61px;

      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 {
      border-radius: 5px;
      margin-left: 15px;
      margin-right: 15px;
      .current-layer-div {
        height: 37px;
        display: flex;
        user-select: none;
        .current-layer-title {
          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;
    }
    .select-list-item {
      border: 1px solid;
    }
  }

  .item-title {
    line-height: 24px;
    color: #777;
  }

  ::v-deep .ant-card .ant-card-body {
    padding: 12px !important;
    border-radius: 0px !important;
  }
</style>
