<template>
  <div id="viewDiv">
    <el-container style="height: 100%; width: 100%">
      <el-container
        :style="{
          height: 'calc(100% - ' + footer_height + ')',
          width: '100%'
        }"
      >
        <el-main>
          <div id="mapView" class="mapView">
            <!-- <cesium-map></cesium-map> -->
          </div>

          <float-panels :panels="FloatPanels" :data="panels" />
          <div id="map-index-floatPanels" ref="floatPanels" />
        </el-main>
        <el-aside :style="{ width: side_width, height: '100%' }">
          <side-panels
            :panels="Panels"
            :data="panels"
            :side-width.sync="side_width"
            :panel-visible.sync="sidepanel_visible"
            @handelClose="handelClose"
          />
        </el-aside>
      </el-container>
      <el-footer :style="{ height: footer_height, width: '100%', padding: '0px' }">
        <half-panels
          :panels="HalfPanels"
          :data="panels"
          :footer-height.sync="footer_height"
          :default-height.sync="halfpanel_defaultHeight"
          :panel-visible.sync="halfpanel_visible"
          :fullpanel-visible.sync="fullpanel_visible"
          :style="{ display: fullpanel_visible ? 'none' : 'block' }"
          @handelClose="handelClose()"
        />
        <full-panels
          :panels="FullPanels"
          :data="panels"
          :footer-height.sync="footer_height"
          :panel-visible.sync="fullpanel_visible"
          :halfpanel-visible.sync="halfpanel_visible"
          :style="{ display: !fullpanel_visible ? 'none' : 'block' }"
          @handelClose="handelClose()"
        />
      </el-footer>
    </el-container>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
import { HalfPanels, FullPanels, FloatPanels, SidePanels } from '@/layout/components/index'
import cesiumMap from '@/views/widgets/cesiumMap.vue'

@Component({
  components: {
    HalfPanels,
    FullPanels,
    FloatPanels,
    SidePanels,
    cesiumMap
  }
})
export default class BaseMap extends Vue {
  LOADING!: (payload: boolean) => void
  currTitle = ''
  showMapLengend = false
  /** 开启点击事件弹窗 */
  openPopupSwitch = true
  //
  showLegendBox = true
  // 图例数据
  legendData = []
  // 用于管线定位
  vectorLayer = null
  // 空间参考
  projection = null

  /**左上角工具栏列表*/
  leftTopTool = null
  /**左下角工具栏列表*/
  leftBottomTool = null
  /**右上角工具栏列表*/
  rightTopTool = null //
  /**右下角工具栏列表*/
  rightBottomTool = null
  @Prop(Object) params: object
  view = null
  Comps
  show = true
  themSrc = ''
  labelShow = false
  side_width = '0%'
  footer_height = '0%'
  sidepanel_visible = false
  floatpanel_visible = false
  halfpanel_visible = false
  fullpanel_visible = false
  halfpanel_defaultHeight = '400px'
  legendHide = true
  loading = true
  loadText = ''
  panels = {
    mapView: this.view,
    that: this,
    activeModel: null,
    tfDialog: { Show: null, Hide: null, setSize: null }
  }

  get Panels() {
    return this.$store.state.map.panels
  }
  get FullPanels() {
    return this.$store.state.map.fullPanels
  }
  get HalfPanels() {
    return this.$store.state.map.halfPanels
  }
  get FloatPanels() {
    return this.$store.state.map.floatPanels
  }
  get jumpText() {
    return this.$store.state.jumpText
  }
  get activeHeaderItem() {
    return this.$store.state.app.activeHeaderItem
  }
  @Watch('Panels')
  PanelsChange(n, o) {
    if (n.length === 0) {
      this.$nextTick(() => {
        // this.view.updateSize()
      })
    }
  }
  @Watch('HalfPanels')
  HalfPanelsChange(n, o) {
    if (n.length === 0) {
      this.$nextTick(() => {
        // this.view.updateSize()
      })
    }
  }
  @Watch('FullPanels')
  FullPanelsChange() {
    this.show = true
  }
  @Watch('loading')
  loadingChange(value) {
    console.log('跳转', value)
    if (value == false) {
      var str = this.$store.state.jumpText
      if (!str) return
      str = str.split(',')
      this.$store.dispatch('map/changeMethod', {
        pathId: str[0],
        widgetid: str[1],
        label: str[2]
      })
    }
  }
  @Watch('jumpText')
  jumpTextChange(n, o) {
    if (!n) return
    console.log('跳转', n)
    n = n.split(',')
    this.$store.dispatch('map/changeMethod', {
      pathId: n[0],
      widgetid: n[1],
      label: n[2]
    })
  }
  @Watch('activeHeaderItem', { immediate: true })
  activeHeaderItemChange(n, o) {
    this.currTitle = n
  }
  created() {
    // console.log('=====', this.Comps)
  }
  mounted() {
    // console.log('地图重新加载')
    // this.loading = false
    // this.initConfig() // 加载配置 ==> 加载地图
  }
  handelClose() {
    this.show = false
  }
}
</script>
<style lang="scss" scoped>
#viewDiv {
  position: absolute;
  margin: 0px auto;
  width: calc(100% - 0px);
  height: 100%;
  .el-main {
    padding: 0px;
    display: flex; // *
  }
  .mapView {
    position: relative;
    height: 100%;
    width: 100%;
  }
}
.close {
  position: absolute;
  right: 0;
  cursor: pointer;
}
#mapLabel {
  background: #fffc;
  position: absolute;
  bottom: 30px;
  left: 10px;
  padding: 5px;
  #mapView_legend {
    display: flex;
    width: 360px;
    flex-direction: column;
    flex-wrap: wrap;
    margin-top: 4px;
    overflow: hidden hidden;
    transition: 0.4s;
    >>> div {
      padding: 2px;
      img {
        width: 14px;
        height: 14px;
        margin-right: 5px;
      }
      span {
        padding-left: 3px;
        font-size: 12px;
      }
    }
  }
  #mapView_title {
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    border-left: 3px solid #2d74e7;
    padding-left: 4px;
  }
  #mapView_close {
    float: right;
    color: #2d74e7;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
  }
}
.qufen {
  position: absolute;
  top: 0px;
  background: chartreuse;
  padding: 5px;
}
#antherPanel::after {
  content: '副视图  主视图';
  border-radius: 0px 0px 5px 5px;
  border: 1px solid #2d74e7;
  background: #ecf2ffcc;
  position: absolute;
  top: -1px;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  text-align: center;
  padding: 10px 0px;
  display: block;
  letter-spacing: 1px;
}
#map-index-floatPanels {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}
#map-index-floatPanels >>> .floatBox {
  pointer-events: all;
  white-space: nowrap;
  position: absolute;
  background: #fff;
  transform: translate(-50%, calc(-100% - 37px));
  border-radius: 7px;
  padding: 8px 8px 2px 8px;
  box-shadow: 0px 6px 23px #afafaf;
  .widgets-scadaLayer-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 6px;
    span {
      line-height: 20px;
      letter-spacing: 1px;
    }
  }
  .widgets-scadaLayer-box {
    max-height: 69px;
    overflow: hidden;
    transition: 0.6s;
    padding-top: 8px;
    border-top: 1px solid #e0e0e0;
    div {
      line-height: 20px;
      font-size: 14px;
      display: flex;
      cursor: pointer;
      &:hover {
        background: #000;
        color: #eee;
        .scadaLayer-float-name {
          color: #eee;
        }
        .scadaLayer-float-value {
          color: #eee;
        }
      }
      .scadaLayer-float-name {
        color: #373737;
        flex: 1;
        &::after {
          content: '：';
        }
      }
      .scadaLayer-float-value {
        color: #2d74e7;
        font-weight: bold;
        margin-left: 8px;
        animation: mymove 0.8s;
        border-radius: 3px;
      }
      // .scadaLayer-float-unit {
      // }
      .scadaLayer-float-arrow2::after {
        content: '↑';
        color: #f56c6c;
        animation: mymove 0.8s;
      }
      .scadaLayer-float-arrow0::after {
        content: '↓';
        color: #67c23a;
        animation: mymove 0.8s;
      }
      .scadaLayer-float-arrow1::after {
        content: '-';
        color: #909399;
        animation: mymove 0.8s;
      }
    }
  }
  &::after {
    content: '';
    width: 0;
    height: 0;
    border-top: 9px solid #fff;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    position: absolute;
    left: calc(50% - 9px);
    bottom: -9px;
  }
  &:hover {
    z-index: 1;
    .widgets-scadaLayer-box {
      max-height: 500px;
    }
  }
  @keyframes mymove {
    from {
      background: rgb(158, 54, 153);
      color: #fff;
    }
    to {
      background: #fff0;
      color: #2d74e7;
    }
  }
}

.map-legend {
  background: #fffc;
  position: absolute;
  bottom: 40px;
  left: 10px;
  min-height: 30px;
  width: 200px;
  border: 1px solid rgb(13, 186, 255);
}

.map-legend-title {
  color: #fff;
  font-weight: 600;
  padding: 3px 10px;
  height: 30px;
  font-size: 15px;
  line-height: 25px;
  background-color: rgb(13, 186, 255);
}
.map-legend-item {
  display: flex;
  height: 20px;
  line-height: 20px;
  font-size: 13px;
  margin: 15px 10px;
}
.map-legend-label {
  margin-left: 5px;
}
.map-legend-rect {
  display: inline-block;
  width: 30px;
  height: 100%;
}
.map-legend-circle {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.map-legend-line {
  display: inline-block;
  width: 50px;
  height: 8px;
}
.map-legend-traingle1 {
  transform: scale(0.4);
  background-size: 100% 100%;
  background-image: url('../../assets/images/traingle1.png');
  background-repeat: no-repeat;
  width: 36px;
  height: 36px;
}
.map-legend-traingle2 {
  transform: scale(0.4);
  background-size: 100% 100%;
  background-image: url('../../assets/images/traingle2.png');
  background-repeat: no-repeat;
  width: 36px;
  height: 36px;
}
.map-legend-traingle3 {
  transform: scale(0.4);
  background-size: 100% 100%;
  background-image: url('../../assets/images/traingle3.png');
  background-repeat: no-repeat;
  width: 36px;
  height: 36px;
}
.map-legend-traingle4 {
  transform: scale(0.4);
  background-size: 100% 100%;
  background-image: url('../../assets/images/traingle4.png');
  background-repeat: no-repeat;
  width: 36px;
  height: 36px;
}
.map-legend-traingle0 {
  transform: scale(0.4);
  background-size: 100% 100%;
  background-image: url('../../assets/images/traingle0.png');
  background-repeat: no-repeat;
  width: 36px;
  height: 36px;
}
</style>
