<template>
    <div class="layersSwitch" :style="{ left: right }">
      <div v-show="true" class="layerIcons">
        <el-tooltip
          effect="dark"
          :content="item.name"
          placement="right"
          v-for="(item,index) of switchOptions"
          :key="index"
        >
          <div class="item" :key="index" :class="{ check: item.check }">
            <img
              alt=""
              :src="require(`../../../assets/images/holo/svg/${item.label}.svg`)"
              @click="changeCheck(item)"
              class="img"
            />
          </div>
        </el-tooltip>
      </div>
      <div
        class="visibleControl"
        :class="[{ 'expand-i': show }, { 'close-i': !show }]"
        @click="changeVisibel"
      >
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        layerIconsShow: true,
        switchOptions: [
          { label: "first", check: true, name: "轨迹" },
          { label: "second", check: false, name: "路况" },
          // { label: "third", check: false, name: "事件" },
          { label: "fourth", check: false, name: "设备" },
        ],
      };
    },
    props: ["right", "show"],
    mounted() {},
    methods: {
      changeVisibel() {
        this.$emit("visibleChange");
      },
      getOptions() {
        return this.switchOptions;
      },
      changeCheck(item) {
        let beforeItem = "";
        this.switchOptions.forEach((e) => {
          if (e.label === item.label) {
            e.check = !e.check;
          } else {
            e.check && (beforeItem = e.label);
            e.check = false;
          }
        });
        this.$emit("changeCheck", beforeItem, item);
      },
    },
    computed: {},
    beforeDestroy() {},
  };
  </script>
  
  <style lang="less" scoped>
  .layersSwitch {
    position: absolute;
    z-index: 13;
    .visibleControl {
      margin-top: 10px;
    }
    .el-icon-document-copy {
      font-size: 20px;
      cursor: pointer;
      color: #aeaeae;
      text-align: right;
    }
    .expand-i {
      background: url("../../../assets/images/holo/close.png");
      cursor: pointer;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
      height: 42px;
      width: 42px;
    }
    .close-i {
      background: url("../../../assets/images/holo/expand.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
      height: 42px;
      width: 42px;
    }
    .layerIcons {
      width: 42px;
      margin-top: 8px;
      height: 135px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      .item {
        width: 42px;
        height: 33.3%;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        cursor: pointer;
        background-position-y: bottom;
        padding-top: 20%;
      }
      // .item:nth-child(4) {
      //   margin-top: 6px;
      // }
      img {
        width: 30px;
      }
      .check {
        background: url("../../../assets/images/holo/check.png");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position-y: bottom;
        padding-top: 20%;
      }
      .check img {
        filter: drop-shadow(#bedeff 100px 0);
        transform: translateX(-100px);
      }
    }
  }
  </style>
  