<template>
  <div class="screen">
    <div class="outer">
      <!-- <div class="header"><p class="title">山西华远陆港平台</p></div> -->
      <div class="content">
        <div class="map">
          <div class="sys-tit">
            <span @click="toOtherSys(1)">边坡监测</span>
            <span @click="toOtherSys(2)">桥梁监测</span>
            <span @click="toOtherSys(3)">隧道监测</span>
            <span @click="toOtherSys(4)">AI分析</span>
          </div>
          <div id="A_Map" class="amap"></div>
          <div class="bg"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
qf.openCalcLayout({dpr:1});
import { getToken } from "@/utils/auth";
export default {
  name: "screen",
  data() {
    return {
      previewUrl: process.env.VUE_APP_BASE_API,
      aMap:null,
      headers: { Authorization: "Bearer " + getToken() },
    }
  },
  created(){
    this.$nextTick(()=>{
      this.amapInfor()
    })
  },
  methods: {
    amapInfor() {
      let that = this;
      // 初始化地图
      this.aMap = new AMap.Map("A_Map", {
        zooms: [3, 20],
        center: [112.413542,38.019073],
        zoom: 9.6,
        layers: [
          new AMap.TileLayer.Satellite(),
     
        ],
      });
   
      that.aMap.on('complete', function () {
        that.boundTaiyuan()
      });
    },
    boundTaiyuan() {
      let that = this;
      const AMap = window.AMap || this.aMap;
      const map = this.map || {};
      AMap.plugin("AMap.DistrictSearch", function () {
        var district = new AMap.DistrictSearch({
          extensions: "all",
          level: "city",  
        });
        district.search("太原", function (status, result) {
          if (status === 'complete' && result && result.districtList) {
            var bounds = result.districtList[0].boundaries;
            const polygons = [];
            if (bounds) {
              for (let i = 0, l = bounds.length; i < l; i++) {
                const polygon = new AMap.Polygon({
                  map: that.aMap,
                  path: bounds[i],
                  strokeWeight: 3,
                  fillOpacity: 0.8,
                  fillColor: "transparent",
                  strokeColor: "#00c0ff",
                });
                polygons.push(polygon);
              }
            }
          } else {
            console.error('查询失败:', status);
          }
        });
        var district2 = new AMap.DistrictSearch({
          extensions: "all",
          level: "city",
        });
        district2.search("太原", function (status, result) {
          const outer = [
            new AMap.LngLat(-360, 90, true),
            new AMap.LngLat(-360, -90, true),
            new AMap.LngLat(360, -90, true),
            new AMap.LngLat(360, 90, true),
          ];
          const holes = result.districtList[0].boundaries;
          const pathArray = [outer];
          pathArray.push.apply(pathArray, holes);
          const polygon = new AMap.Polygon({
            path: pathArray,
            strokeColor: "#00c0ff",
            strokeWeight: 3,
            fillColor: "#001948",
            fillOpacity: 0.8,
          });
          polygon.setPath(pathArray);
          that.aMap.add(polygon);
        });
      });
    },
    getCookie(name) {
      var matches = document.cookie.match(new RegExp(
          "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$&') + "=([^;]*)"
      ))
      return matches ? decodeURIComponent(matches[1]) : undefined;
    },
    toOtherSys(val){//http://localhost:12100/ "Bearer " + getToken()
      if(val===1){
        var link = `http://bp.hylgzl.com/?Admin=${this.getCookie('Admin-Token')}`;
        window.open(link, "_blank");
        return;
      }else if(val===2){
        var link = `http://ql.hylgzl.com/}`;
        window.open(link, "_blank");
        return;
      }else if(val===3){
        var link = `http://sd.hylgzl.com/?Admin=${this.getCookie('Admin-Token')}`;
        window.open(link, "_blank");
        return;
      }else if(val===4){
        var link = `http://220.194.146.65:9045`;
        window.open(link, "_blank");
        return;
      }
      
    }
  },
}
</script>

<!-- 地图 tab样式 -->
<style scoped lang="scss">
$headerHeight: 173px;
.screen{
  width: 100%;
  height: 100%;
  flex:1;
  color:#fff;
  background-color: #010532;
  
  .outer{
    width: 100%;
    height: 100%;
    position: relative;
    .header{
      width: 100%;
      height: $headerHeight;
      position: absolute;
      left:0;
      top:0;
      right: 0;
      z-index: 10;
      color:#fff;
      text-align: center;
      // background-image: url('../assets/images/bigscreen/title.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
      pointer-events: none;
      .title{
        margin: 0;
        font-family: Source Han Sans SC;
        font-weight: bold;
        font-size: 44px;
        color: #A2B1DB;
        background: -webkit-gradient(linear, left bottom, left top, from(#00B4FF), to(#FAFEFF));
        background: linear-gradient(0deg, #00B4FF -83%, #FAFEFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        pointer-events: all;
        letter-spacing: .2em;
        line-height: 76px;
      }
    }
  }
  .content{
    width: 100%;
   
    position: absolute;
    left:0;
    top:0;
    right: 0;
    bottom:0;
    z-index: 9;
    
    
    .map{
      width: 100%;
    height:100vh;
    position: relative;
    
      .sys-tit{
        width: 50%;
        height: 63px;
        position: absolute;
        top:100px;
        left:24%;
        right: 0;
        z-index: 11;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        span{
          width: 188px;
          height: 63px;
          font-size: 0.24rem;
          color:#26D4FF;
          background-image: url('../assets/images/bigscreen/button_normal.png');
          background-repeat: no-repeat;
          background-position: center;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          &:hover{
            color:#05F9FB;
            background-image: url('../assets/images/bigscreen/button_click1.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
          }
        }
      }
      .amap {
        width: 100%;
        height:100vh;
        // background-color: unset !important;
        ::v-deep .amap-icon img {
            position: absolute;
            z-index: -1;
            width: 100%;
            height: auto;
        }
      }
      .bg{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left:0;
        right: 0;
        bottom: 0;
        z-index: 33;
        // background-image: url('../assets/images/bigscreen/bg.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        pointer-events: none;
      }
    }
  }
}
</style>