<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
      >
      <span class="clear-layer-button">清空</span>
    </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">
      <div
        :class="`show-layer-item ${isSelected === item.id ? 'select-list-item' : ''}`"
        v-for="item in dataList"
        :key="item.id"
        @click="selectLayer(item.id)"
      >
        <a-checkbox v-model:checked="item.checked" />
        <a-image
          :width="119"
          :height="87"
          style="margin-left: 10px; border-radius: 5px"
          src="https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp"
          :preview="false"
          :fallback="errorImage"
        />
        <div class="layer-item-text">
          <div class="item-title">名称： {{ item.name }}</div>
          <div class="item-control">
            <a-button
              type="primary"
              size="small"
              style="background-color: #09b66d; margin-right: 7px"
              >查看数据</a-button
            >
            <a-button type="primary" size="small" style="background-color: #0081ff">操作</a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { PlusOutlined } from '@ant-design/icons-vue';
  import { h, defineEmits, ref } from 'vue';
  import { errorImage } from '../util.ts';
  const dataList = ref([
    {
      id: 1,
      name: '111',
      checked: true,
    },
    {
      id: 2,
      name: '222',
      checked: false,
    },
    {
      id: 3,
      name: '333',
      checked: false,
    },
    {
      id: 4,
      name: '444',
      checked: false,
    },
    {
      id: 5,
      name: '555',
      checked: false,
    },
    {
      id: 6,
      name: '666',
      checked: false,
    },
    {
      id: 7,
      name: '777',
      checked: false,
    },
    {
      id: 8,
      name: '888',
      checked: false,
    },
  ]);
  const isSelected = ref();
  const emits = defineEmits(['changeOpenModal', 'changeOpenInsertShpModal']);
  const changeClick = () => {
    emits('changeOpenModal', true);
  };
  const openInsertShpModal = () => {
    emits('changeOpenInsertShpModal', true);
  };
  const selectLayer = (id: number) => {
    isSelected.value = id;
  };
</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;
    }
  }
</style>
