<template>
    <div class="equipmentSwc" :class="boxesShow?'m-b':''">
      <div class="legend-container">
        <el-tooltip
          effect="dark"
          :content="item.name"
          :key="index"
          placement="bottom"
          v-for="(item,index) of switchOptions"
        >
          <div
            class="item"
            :key="index"
            :class="{ check: item.check }"
            @click="changeCheck(item)"
          >
            <img
              alt=""
              :src="
                require(`../../../assets/images/holo/${item.label}${
                  item.check ? 's' : ''
                }.png`)
              "
              class="img"
              style="vertical-align: super"
            />
          </div>
        </el-tooltip>
      </div>
      <div class="select-all">
        <div class="select-botton" @click="selectAll">
          {{ showStatus ? "全选" : "取消" }}
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "equipmentSwitch",
    data() {
      return {
        layerIconsShow: true,
        switchOptions: [
          { label: "signal", check: true, name: "信号机" },
          { label: "camera", check: true, name: "视频相机" },
          { label: "milli", check: true, name: "毫米波雷达" },
          { label: "weather", check: true, name: "气象检测仪" },
          { label: "radar", check: true, name: "激光雷达" },
        ],
      };
    },
    props: ['boxesShow'],
    mounted() {},
    methods: {
      selectAll() {
        if (this.showStatus) {
          this.switchOptions.forEach((e) => {
            e.check = true;
          });
        } else {
          this.switchOptions.forEach((e) => {
            e.check = false;
          });
        }
  
        this.$emit("equipmentChange", this.switchOptions);
      },
      changeCheck(item) {
        item.check = !item.check;
        this.$emit("equipmentChange", this.switchOptions);
      },
    },
    computed: {
      showStatus() {
        for (let item of this.switchOptions) {
          if (!item.check) {
            return true;
          }
        }
        return false;
      },
    },
    beforeDestroy() {},
  };
  </script>
  
  <style lang="less" scoped>
  
  .equipmentSwc {
    transition: 0.5s all ease;
    position: absolute;
    z-index: 12;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 340px;
    height: 60px;
    background-color: rgba(7, 15, 36, 0.5);
    padding: 7px;
    font-size: 12px;
    border: 1px solid #3c568c;
    border-radius: 3px;
    display: flex;
    justify-content: space-between;
  
    .legend-container {
      display: flex;
      flex: 0 0 76%;
      justify-content: space-between;
      height: 100%;
  
      .item {
        cursor: pointer;
        padding: 10px;
        border: 3px solid;
        border-image: linear-gradient(
            180deg,
            rgba(25, 67, 125, 0.54) 0%,
            rgba(47, 61, 82, 0.01) 100%
          )
          1;
        background-image: linear-gradient(
          180deg,
          rgba(25, 67, 125, 0.54) 0%,
          rgba(47, 61, 82, 0.01) 100%
        );
  
        .img {
          height: 100%;
        }
      }
  
      .check {
        border: 3px solid;
        border-image: linear-gradient(
            rgba(65, 146, 217, 1),
            rgba(65, 146, 217, 0.3),
            rgba(65, 146, 217, 0.3),
            rgba(65, 146, 217, 1)
          )
          1;
      }
    }
  
    .select-all {
      // width: 50px;
      display: flex;
      align-items: center;
  
      .select-botton {
        background-color: rgba(18, 35, 77, 0.5);
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
      //   line-height: 28px;
        text-align: center;
        color: white;
        border: 1px solid #3c568c;
        border-radius: 3px;
        width: 66px;
        cursor: pointer;
      }
  
      .select-botton:hover {
        border: 1px solid #45619e;
        background-color: rgba(28, 50, 107, 0.5);
      }
    }
  }
  .m-b{
    bottom: calc(33.3% + 40px);
    transition: 0.5s all ease;
  }
  </style>
  