<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__zoomIn"
    leave-active-class="animate__zoomOut"
  >
    <div ref="widget-Legend" class="widget-Legend">
      <el-popover placement="right" trigger="hover" :append-to-body="false">
        <img slot="reference" :src="require('@/views/groupPage/images/工具栏/图例.png')" />
        <div class="legend-content">
          <div class="title">图例</div>
          <div class="legend-item">
            <div class="name">设计排水-施工动态图</div>
            <div class="sub-item">
              <div class="icon circle" :style="{ background: 'yellow' }"></div>
              <div class="type">待建管点</div>
            </div>
            <div class="sub-item">
              <div class="icon circle" :style="{ background: 'red' }"></div>
              <div class="type">在建管点</div>
            </div>
            <div class="sub-item">
              <div class="icon circle" :style="{ background: '#01fbfb' }"></div>
              <div class="type">完工管点</div>
            </div>
            <div class="sub-item">
              <div class="icon dashed" :style="{ 'border-color': 'yellow' }"></div>
              <div class="type">待建管线</div>
            </div>
            <div class="sub-item">
              <div class="icon dashed" :style="{ 'border-color': 'red' }"></div>
              <div class="type">在建管线</div>
            </div>
            <div class="sub-item">
              <div class="icon dashed" :style="{ 'border-color': '#01fbfb' }"></div>
              <div class="type">完工管线</div>
            </div>
          </div>
          <div class="legend-item">
            <div class="name">设计管线</div>
            <div class="sub-item">
              <div class="icon dashed" :style="{ 'border-color': '#05ECEF' }"></div>
              <div class="type">雨水管线</div>
            </div>
            <div class="sub-item">
              <div class="icon dashed" :style="{ 'border-color': '#FE2424' }"></div>
              <div class="type">污水管线</div>
            </div>
            <div class="sub-item">
              <div class="icon dashed" :style="{ 'border-color': '#FE9524' }"></div>
              <div class="type">雨污合流管线</div>
            </div>
          </div>
          <div class="legend-item">
            <div class="name">存量管网</div>
            <div class="sub-item">
              <div class="icon line" :style="{ 'border-color': '#05ECEF' }"></div>
              <div class="type">雨水管线</div>
            </div>
            <div class="sub-item">
              <div class="icon line" :style="{ 'border-color': '#FE2424' }"></div>
              <div class="type">污水管线</div>
            </div>
            <div class="sub-item">
              <div class="icon line" :style="{ 'border-color': '#FE9524' }"></div>
              <div class="type">雨污合流管线</div>
            </div>
            <div class="sub-item">
              <div class="icon line" :style="{ 'border-color': '#2B8AFF' }"></div>
              <div class="type">供水管线</div>
            </div>
            <div class="sub-item">
              <div class="icon line" :style="{ 'border-color': '#02CD4F' }"></div>
              <div class="type">燃气管线</div>
            </div>
            <div class="sub-item">
              <div class="icon line" :style="{ 'border-color': '#F6E586' }"></div>
              <div class="type">电力管线</div>
            </div>
            <div class="sub-item">
              <div class="icon line" :style="{ 'border-color': '#C324FE' }"></div>
              <div class="type">通信管线</div>
            </div>
          </div>
          <div class="legend-item">
            <div class="name">其他</div>
            <div class="sub-item">
              <div class="icon"><img :src="require('@/views/groupPage/images/工具栏/视频监控.png')" /></div>
              <div class="type">视频监控</div>
            </div>
            <div class="sub-item">
              <div class="icon"><img :src="require('@/views/groupPage/images/工具栏/移动兵站.png')" /></div>
              <div class="type">移动兵站</div>
            </div>
            <div class="sub-item">
              <div class="icon"><img :src="require('@/views/groupPage/images/工具栏/工程图标.png')" /></div>
              <div class="type">工程图标</div>
            </div>
          </div>
        </div>
      </el-popover>
    </div>
  </transition>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'

//图例
@Component({ name: 'Legend', components: {} })
export default class Legend extends Vue {
  mounted() {
    let target = this.$refs['widget-Legend'] as any
    target.style.setProperty('--left', '2.34375rem')
    target.style.setProperty('--bottom', '0.052083rem')
  }
}
</script>

<style lang="scss" scoped>
.widget-Legend {
  $size10: 0.052083rem /* 10/192 */;
  $size20: 0.104167rem /* 20/192 */;
  z-index: 2;
  //position
  margin-left: var(--left); //2.34375rem /* 450/192 */;
  bottom: var(--bottom); //0.052083rem /* 10/192 */;
  position: absolute;
  left: 0;
  //font
  font-family: Source Han Sans CN;
  cursor: pointer;
  /deep/ .el-popover {
    background: rgba(7, 48, 80, 0.8);
    border-radius: 2px;
    border-color: rgba(7, 48, 80, 0.8);
    .popper__arrow,
    .popper__arrow::after {
      border-right-color: rgba(7, 48, 80, 0.8);
    }
  }
  .legend-content {
    width: 1.635417rem /* 314/192 */;
    height: 2rem /* 384/192 */;
    .title {
      width: 100%;
      height: 0.208333rem /* 40/192 */;
      font-size: 0.083333rem /* 16/192 */;
      font-weight: 400;
      color: #ffffff;
      border-bottom: 1px solid #0d4672;
    }
    .legend-item {
      width: 100%;
      margin: 0.078125rem /* 15/192 */ 0;
      .name {
        width: 100%;
        display: inline-block;
        font-size: 0.072917rem /* 14/192 */;
        font-family: Source Han Sans CN-MEDIUM;
        font-weight: 500;
        color: #2ba7ff;
      }
      .sub-item {
        display: flex;
        align-items: center;
        padding: 0.052083rem /* 10/192 */ 0;
        width: 33%;
        float: left;
        .icon {
          margin-right: 0.052083rem /* 10/192 */;
        }
        .type {
          font-size: 0.072917rem /* 14/192 */;
          font-weight: 400;
          color: #ffffff;
          white-space: nowrap;
        }
      }
      .circle {
        width: 0.052083rem /* 10/192 */;
        height: 0.052083rem /* 10/192 */;
        border-radius: 50%;
      }
      .dashed {
        margin-left: -0.036458rem /* 7/192 */;
        margin-right: 0.026042rem /* 5/192 */ !important;
        width: 0.114583rem /* 22/192 */;
        border-bottom: 2px dashed;
      }
      .line {
        margin-left: -0.036458rem /* 7/192 */;
        margin-right: 0.026042rem /* 5/192 */ !important;
        width: 0.114583rem /* 22/192 */;
        border-bottom: 2px solid;
      }
      img {
        width: 0.083333rem /* 16/192 */;
        height: 0.083333rem /* 16/192 */;
      }
    }
  }
}
</style>