<!--
 * @Author: your name
 * @Date: 2022-01-26 10:52:10
 * @LastEditTime: 2022-02-17 10:11:35
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /test/hello-world/src/components/PipeColor.vue
-->
<template>
  <div>
    <div class="pipePressure">
      <!-- <div>管道压力</div> -->
      <div class="hasColorBox" :style="{ color: pipeColor[`1`] }">
        <div :style="{ backgroundColor: pipeColor[`1`] }"></div>
        低压
      </div>
      <div class="hasColorBox" :style="{ color: pipeColor[`2`] }">
        <div :style="{ backgroundColor: pipeColor[`2`] }"></div>
        中压
      </div>
      <div class="hasColorBox" :style="{ color: pipeColor[`3`] }">
        <div :style="{ backgroundColor: pipeColor[`3`] }"></div>
        次高压
      </div>
      <div class="hasColorBox" :style="{ color: pipeColor[`4`] }">
        <div :style="{ backgroundColor: pipeColor[`4`] }"></div>
        高压
      </div>
    </div>
    <div class="mapChange">
      <div :class="{ active: !mapStyle }" @click="mapChange(1)">卫星地图</div>
      <div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div>
    </div>
  </div>
</template>

<script>
import { pipeColor } from "@/utils/mapClass/config.js";
export default {
  data() {
    return {
      pipeColor,
      mapStyle:true
    };
  },
  methods: {
    // 更改卫星图
    mapChange(num) {
      if (num == 1) {
        this.mapStyle = false;
      } else {
        this.mapStyle = true;
      }
      this.$parent.map.changeMap(this.mapStyle);
    },
  },
};
</script>

<style lang="scss" scoped>
.pipePressure {
  position: fixed;
  color: #fff;
  left: 460px;
  top: 120px;
  padding: 1px;
  // background: rgba(6, 29, 51, 0.8);
  .hasColorBox {
    // border: 1px solid #053b6a;
    padding: 2px 5px;
    margin-bottom: 5px;
    & > div {
      display: inline-block;
      width: 10px;
      height: 10px;
    }
  }
}
.mapChange {
  left: 460px;
  top: 76px;
  color: #fff;
  position: absolute;
  display: flex;
  div {
    padding: 4px 8px;
    border: 1px solid #fff;
    margin-left: 8px;
    cursor: pointer;
    &.active,
    &:hover {
      background-color: #053b6a;
      color: #31eaea;
    }
  }
}
</style>