<!--
 * @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 style="float: left;margin-right: 5px;">
        <div class="hasColorBox">
          <!-- <div :style="{ backgroundColor: pipeColor[`4`] }"></div> -->
          <img src="../../assets/image/bigtyx.svg" alt="">
          调压箱
        </div>
        <div class="hasColorBox">
          <!-- <div :style="{ backgroundColor: pipeColor[`4`] }"></div> -->
          <img src="../../assets/image/bigfmj.svg" alt="">
          阀门井
        </div>
        <div class="hasColorBox">
          <!-- <div :style="{ backgroundColor: pipeColor[`4`] }"></div> -->
          <img src="../../assets/image/bigcz.svg" alt="">
          厂站
        </div>
        <div class="hasColorBox">
          <!-- <div :style="{ backgroundColor: pipeColor[`4`] }"></div> -->
          <img src="../../assets/image/biguser.svg" alt="">
          用户
        </div>
        <div class="hasColorBox">
          <!-- <div :style="{ backgroundColor: pipeColor[`4`] }"></div> -->
          <img src="../../assets/image/bigjk.svg" alt="">
          监控
        </div>
      </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>

    <div class="mapChange">
      <div class="qiehuan">
        <div :class="{ active: !mapStyle }" @click="mapChange(1)">
          <img src="../../assets/image/weixing.png" alt="" v-show="!downIcon">
          <div class="mapqh2" v-show="!downIcon">卫星</div>
        </div>
        <div :class="{ active: mapStyle }" @click="mapChange(2)">
          <img src="../../assets/image/quanxi.png" alt="" v-show="downIcon">
          <div class="mapqh3" v-show="downIcon">全景</div>
        </div>
      </div>
    </div>
  </div>
</template>

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

<style lang="scss" scoped>
.pipePressure {
  width: 180px;
  height: auto;
  border: 1px solid #a5a5a5;
  background-color: #112238b3;
  position: fixed;
  color: rgb(205, 219, 228);
  left: 460px;
  bottom: 20px;
  padding: 5px;
  font-size: 14px;
  // 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;
    }
  }
}
.hasColorBox>img{
  width: 14px;
}
.mapChange {
  left: 460px;
  top: 76px;
  color: #fff;
  padding: 5px;
  position: absolute;
  display: flex;
  div {
    cursor: pointer;
    &.active
    {
      .mapqh2{
        color: #fff;
        background: #09f;
      }
      .mapqh3{
        color: #fff;
        background: #09f;
      }
    }
  }
}
.qiehuan{
  height: 40px;
  display: block;
  float: right;
  &:hover{
    .divfirst{
      display: none;
    }
    .mapqh1{
      display: none;
    }
    .qiehuanlog{
      padding: 3px 3px 3px 3px;
      img{
        height: 34px;
      }
      background-color: #bac7d0;
    }
  }
}

.qiehuan img{
  width: 56px;
  height: 38px;
}
.divsecond{
  margin-left: 8px;
}
.qiehuanlog{
  display: flex;
  float: right;
  height: 100%;
  margin-left: 8px;
}
.mapqh1{
  position: fixed;
  margin-top: -23px;
  font-size: 14px;
  color: #838280;
  background-color: #fff;
}
.mapqh2{
  position: fixed;
  margin-top: -21px;
  font-size: 12px;
  color: #838280;
  background-color: #fff;
}
.mapqh3{
  position: fixed;
  margin-top: -21px;
  font-size: 12px;
  color: #838280;
  background-color: #fff;
}
@keyframes show {
    0%{
        transform: translateX(-10%);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
    }
}
@keyframes hide {
    0%{
        transform: translateX(0)
    }
    100%{
        transform: translateX(-100%)
    }
}

.show-enter-active {
      animation: show 0.6s;
  }
  .show-leave-active {
      animation: hide 0.6s;
  }
  .show-enter, .show-leave-to {
      opacity: 0;
  }
</style>
