<template>
  <div style="margin-top:40px">
    <img src="../../../static/NewManageHome/map1.png" border="1" style="width:90%;" usemap="#planetmap" alt="Planets"/>
    <map name="planetmap" id="planetmap">
      <div class="auto" style="position:absolute;bottom:28%;left:-5%;">
        <span style="color:#fff;font-weight:border;font-size:16px;text-align:left">居民用户数</span><br/>
        <div style="display: flex;margin-top: 10px">
          <div v-for="row in jmStr" class="auto" style="	background-color: #004266;margin-right: 5px;border-radius: 4px;width:1.5vw;text-align:center;border: solid 1px #24d4d4;">
            <span class="font1">{{row.value}}</span>
          </div>
          <div>
            <span class="font1">万</span>
          </div>
        </div>
      </div>
      <div class="auto" style="position:absolute;bottom:28%;right:15%;">
        <span style="color:#fff;font-weight:border;font-size:16px;text-align:left">工商用户数</span><br/>
        <div style="display: flex;margin-top: 10px">
          <div v-for="row in gsStr" class="auto" style="	background-color: #004266;margin-right: 5px;border-radius: 4px;width:1.5vw;text-align:center;border: solid 1px #24d4d4;">
            <span class="font1">{{row.value}}</span>
          </div>
          <div>
            <span class="font1">万</span>
          </div>
        </div>
      </div>
      <area id="top" shape="circle" :coords="coords[0]" alt="城北"/>
      <div class="tooltip2 tooltip">
        <span class="t1">城北</span><br/>
        <span v-for="item in data.top">
          <span class="t2">{{item.sjmc}}：</span><span class="t3">{{item.sbsjfl}}</span><br/>
        </span>
      </div>
      <area id="left" href="#" shape="circle" :coords="coords[1]" alt="城西"/>
      <div class="tooltip3 tooltip">
        <span class="t1">城西</span><br/>
        <span v-for="item in data.left">
          <span class="t2">{{item.sjmc}}：</span><span class="t3">{{item.sbsjfl}}</span><br/>
        </span>
      </div>
      <area id="bottom" href="#" shape="circle" :coords="coords[2]" alt="城南"/>
      <div class="tooltip4 tooltip">
        <span class="t1">城南</span><br/>
        <span v-for="item in data.bottom">
          <span class="t2">{{item.sjmc}}：</span><span class="t3">{{item.sbsjfl}}</span><br/>
        </span>
      </div>
      <area id="right" href="#" shape="circle" :coords="coords[3]" alt="城东"/>
      <div class="tooltip5 tooltip">
        <span class="t1">城东</span><br/>
        <span v-for="item in data.right">
          <span class="t2">{{item.sjmc}}：</span><span class="t3">{{item.sbsjfl}}</span><br/>
        </span>
      </div>
    </map>
  </div>
</template>

<script>
  import $ from 'jquery'
  import "../../stores/shanxi1.js";
  import {HttpResetClass} from "vue-client";

  export default {
    name: "echart-map",
    props: {
      mode: String,
      idname: String
    },
    data() {
      return {
        coords_1080: [
          '187,114, 80',
          '110,200, 40',
          '185,250, 50',
          '300,200,50'
        ],
        coords_900: [
          '135,  70, 60',
          ' 80, 155, 30',
          '130, 160, 35',
          '215, 140, 40'
        ],
        coords: [],
        jmStr: [],
        gsStr: [],
        data: {
          top: [{}],
          bottom: [{}],
          left: [{}],
          right: [{}]
        }
      }
    },
    mounted() {
      // this.drawChinaMap();
    },
    ready() {
      let width = window.screen.width
      if (width < 1920) {
        this.coords = this.coords_900
      } else {
        console.log(window.screen.width)
        this.coords = this.coords_1080
      }
      let jmCount = 0
      let gsCount = 0
      let http = new HttpResetClass();
      http.load('post', 'rs/logic/getBpm', {data: {sql: `getUserSum`}}, {
        rejectMsg: null,
        resolveMsg: null
      }).then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          if (res.data[i].sjmc === '民用客户户数') {
            jmCount += Number(res.data[i].sbsjfl)
          } else if (res.data[i].sjmc === '工商客户户数') {
            gsCount += Number(res.data[i].sbsjfl)
          }
        }
        jmCount = ((jmCount / 10000).toFixed(0)).toString()
        gsCount = ((gsCount / 10000).toFixed(2)).toString()
        this.jmStr = []
        for (let i = 0; i < jmCount.length; i++) {
          let param = {}
          param.value = jmCount[i]
          this.jmStr.push(param)
        }
        this.gsStr = []
        for (let i = 0; i < gsCount.length; i++) {
          let param = {}
          param.value = gsCount[i]
          this.gsStr.push(param)
        }

        this.data.right = res.data.filter(
          (item) => item.tgsjbm === "城东分公司"
        )
        this.data.top = res.data.filter(
          (item) => item.tgsjbm === "城北分公司"
        )
        this.data.bottom = res.data.filter(
          (item) => item.tgsjbm === "城南分公司"
        )
        this.data.left = res.data.filter(
          (item) => item.tgsjbm === "城西分公司"
        )
      })
    }
  }
</script>
<style scoped>
  .font1 {
    font-family: pFBold;
    font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 26px;
    letter-spacing: 0px;
    color: #ffc925;
  }

  .t1 {
    color: #12f1f3;
  }

  .t2 {
    color: white;
  }

  .t3 {
    color: #ffc21f;
  }

  .tooltip {
    visibility: hidden;
    width: 180px;
    height: 200px;
    background-color: #084a78;
    border: 1px solid #0389db;
    padding: 5px 0;
    border-radius: 6px;
    text-align: center;
    /* 定位 */
    position: absolute;
    z-index: 1;
  }

  img.map_top:hover {
    content: url(../../../static/NewManageHome/城北1.png);
  }

  img.map_bottom:hover {
    content: url(../../../static/NewManageHome/城南1.png);
  }

  img.map_left:hover {
    content: url(../../../static/NewManageHome/城西1.png);
  }

  img.map_right:hover {
    content: url(../../../static/NewManageHome/城东1.png);
  }

  /*img.pingli:hover {*/
  /*  content: url(../../../static/NewManageHome/平利县1.png);*/
  /*}*/

  /*img.lushi:hover {*/
  /*  content: url(../../../static/NewManageHome/卢氏县1.png);*/
  /*}*/

  /*img.qianyang:hover {*/
  /*  content: url(../../../static/NewManageHome/千阳县1.png);*/
  /*}*/

  area#qianyang:hover + .tooltip {
    visibility: visible;
  }

  area#top:hover + .tooltip {
    visibility: visible;
  }

  area#bottom:hover + .tooltip {
    visibility: visible;
  }

  area#left:hover + .tooltip {
    visibility: visible;
  }

  area#right:hover + .tooltip {
    visibility: visible;
  }

  area#pingli:hover + .tooltip {
    visibility: visible;
  }

  area#lushi:hover + .tooltip {
    visibility: visible;
  }

  /* img.map_bottom:hover + .tooltip {
    visibility: visible;
  }
  img.map_left:hover + .tooltip {
    visibility: visible;
  }
  img.map_right:hover + .tooltip {
    visibility: visible;
  }
  img.qianyang:hover + .tooltip {
    visibility: visible;
  }
  img.lushi:hover + .tooltip {
    visibility: visible;
  }
  img.pingli:hover + .tooltip {
    visibility: visible;
  } */
  @media screen and (max-width: 1920px) {
    .tooltip1 {
      top: 45px;
      left: 45px;
    }

    .tooltip2 {
      left: 210px;
      top: 124px;
    }

    .tooltip3 {
      top: 210px;
      left: 70px;
    }

    .tooltip4 {
      top: 250px;
      left: 190px;
    }

    .tooltip5 {
      top: 208px;
      left: 298px;
    }

    .tooltip6 {
      top: 324px;
      left: 238px;
    }

    .tooltip7 {
      top: 279px;
      left: 263px;
    }

  }

  @media screen and (max-width: 1440px) {

    .tooltip1 {
      top: 30px;
      left: 30px;
    }

    .tooltip2 {
      left: 134px;
      top: 73px;
    }

    .tooltip3 {
      top: 137px;
      left: 90px;
    }

    .tooltip4 {
      top: 163px;
      left: 131px;
    }

    .tooltip5 {
      top: 138px;
      left: 215px;
    }

    .tooltip6 {
      top: 234px;
      left: 178px;
    }

    .tooltip7 {
      top: 179px;
      left: 163px;
    }

  }
</style>
