<!--
* @Author: hisense.xiaoshangqing
* @Date: 2022-7-26 10:00:48
 * @LastEditors: hisense.wuhongjian
 * @LastEditTime: 2022-11-29 11:47:26
* @Description: 水库专题首页缩略图 -->
<template>
  <div class="river-course-view">
    <div ref="qdCityMap" class="city-map-content-echarts"></div>
    <div class="topic-animation1 display-animation1"></div>
    <div class="topic-animation2 display-animation2"></div>
    <div class="topic-animation3 display-animation3"></div>
    <div class="topic-animation4 display-animation4"></div>
    <div class="topic-animation5 display-animation5"></div>
    <div class="topic-animation6 display-animation6"></div>
  </div>
</template>

<script>
  import { getProvideDistrictFundStatement } from '@/api/assertReport'
  import axios from 'axios'
  const echarts = require('echarts')
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
        districtData: [
          {
            name: '市南区',
            value: [120.395966, 36.000892],
          },
          {
            name: '市北区',
            value: [120.355026, 36.083819],
          },
          {
            name: '李沧区',
            value: [120.421236, 36.188023],
          },
          {
            name: '崂山区',
            value: [120.587393, 36.199569],
          },
          {
            name: '城阳区',
            value: [120.369135, 36.266833],
          },
          {
            name: '即墨区',
            value: [120.517352, 36.490847],
          },
          {
            name: '莱西市',
            value: [120.426226, 36.86009],
          },
          {
            name: '胶州市',
            value: [120.010202, 36.235878],
          },
          {
            name: '平度市',
            value: [119.959012, 36.788828],
          },
          {
            name: '西海岸新区',
            value: [119.895518, 35.875138],
          },
        ],
      }
    },

    mounted() {
      this.findAllInfo()
    },
    //方法集合
    methods: {
      findAllInfo() {
        getProvideDistrictFundStatement().then((res) => {
          let districtData = this.districtData
          let resulrtData = res.data.data
          for (let i = 0; i < resulrtData.length; i++) {
            for (let j = 0; j < districtData.length; j++) {
              if (resulrtData[i].districtName === districtData[j].name) {
                districtData[j].num = resulrtData[i].applyPrice + '万'
              }
            }
          }
          console.log('上图数据', districtData)
          this.initMap(districtData)
        })
      },
      initMap(data) {
        this.loadedDataUrl = './static/qingdao.json'
        let _this = this
        axios.get(_this.loadedDataUrl, {}).then((geoJson) => {
          _this.myChart = echarts.init(_this.$refs.qdCityMap)
          echarts.registerMap('qingdao', geoJson.data)
          const imgBack = new Image()
          imgBack.src = './static/assets/map-back.png'
          const img = new Image()
          img.src = './static/assets/echarts-map-bak.png'
          const typeImg = new Image()
          typeImg.src = './static/assets/reservoir-type-bak.png'

          _this.option = {
            visualMap: {
              show: false,
              max: 100,
              seriesIndex: 1,
              inRange: {
                color: ['#000000', 'yellow', 'pink'],
              },
            },
            geo: [
              {
                map: 'qingdao',
                roam: false, // 是否允许缩放
                aspectScale: 0.8,
                zoom: 1.1, // 默认显示级别
                top: 100,
                z: 6,
                label: {
                  show: true, //是否显示市
                  textStyle: {
                    color: '#ffffff', //文字颜色
                    fontSize: 16, //文字大小
                    fontFamily: '微软雅黑',
                    backgroundColor: 'rgba(0,0,0,0)', //透明度0清空文字背景
                  },
                },
                itemStyle: {
                  borderColor: '#25e8ff',
                  borderWidth: 2,
                  /* areaColor: "#004d8e", //rgba设置透明度0
                  shadowColor: "#10daff",
                shadowBlur: 10,
                shadowOffsetX: 10,
                opacity: 0.53, */
                  areaColor: {
                    image: img,
                    repeat: 'repeat',
                  },
                },
                emphasis: {
                  disabled: false,
                  focus: 'none',
                  itemStyle: {
                    color: null,
                  },
                  label: {
                    show: true,
                    //color: "#fff",
                  },
                },
              },
              {
                map: 'qingdao',
                aspectScale: 0.8,
                roam: false, // 是否允许缩放
                zoom: 1.1, // 默认显示级别
                top: 105,
                z: 4,
                itemStyle: {
                  areaColor: '#1864a5',
                  borderColor: 'transparent',
                },
                silent: true,
                tooltip: {
                  show: false,
                },
              },
              {
                map: 'qingdao',
                aspectScale: 0.8,
                roam: false, // 是否允许缩放
                zoom: 1.1, // 默认显示级别
                top: 110,
                z: 3,
                itemStyle: {
                  areaColor: '#1864a5',
                  borderColor: 'transparent',
                  borderWidth: 2,
                },
                silent: true,
                tooltip: {
                  show: false,
                },
              },
              {
                map: 'qingdao',
                aspectScale: 0.8,
                roam: true, // 是否允许缩放
                zoom: 1.1, // 默认显示级别
                top: 115,
                z: 2,
                itemStyle: {
                  areaColor: '#1864a5',
                  //borderColor: "#0f3866",
                  borderColor: 'transparent',
                  borderWidth: 1,
                  shadowColor: '#808080', // 外部阴影
                  shadowBlur: '10',
                },
                silent: true,
                tooltip: {
                  show: false,
                },
              },
            ],
            series: [
              // {
              //   tooltip: {
              //     show: false,
              //   },
              //   type: "effectScatter",
              //   coordinateSystem: "geo",
              //   rippleEffect: {
              //     scale: 3,
              //     brushType: "stroke",
              //   },
              //   showEffectOn: "render",
              //   itemStyle: {
              //     normal: {
              //       shadowColor: "#ffffff",
              //       shadowBlur: 10,
              //       shadowOffsetX: 0,
              //       shadowOffsetY: 0,
              //       color: "#df1818",
              //     },
              //   },
              //   label: {
              //     normal: {
              //       color: "#fff",
              //     },
              //   },
              //   symbol: "circle",
              //   symbolSize: [10, 5],
              //   data:data,  //地标闪烁小圆点
              //   zlevel: 1,
              // },
              // {
              //   type: "scatter",
              //   coordinateSystem: "geo",
              //   symbol: function (value, params) {
              //     return    'image://static/assets/warning-reservoir.png';
              //   },
              //   symbolSize: [25, 35],
              //   symbolOffset: [0, -20],
              //   z: 9999,
              //   data:data, //企业图片
              // },
              {
                type: 'scatter',
                coordinateSystem: 'geo',
                label: {
                  normal: {
                    show: true,
                    formatter: function (params) {
                      var name = params.data.num
                      var text = `{fline|${name}}`
                      return text
                    },
                    color: '#fff',
                    rich: {
                      fline: {
                        padding: [0, 25],
                        color: '#dcc52f',
                        textShadowColor: '#030615',
                        textShadowBlur: '0',
                        textShadowOffsetX: 1,
                        textShadowOffsetY: 1,
                        fontSize: 14,
                        fontWeight: 400,
                      },
                      tline: {
                        padding: [0, 27],
                        color: '#afd31d',
                        fontSize: 12,
                      },
                    },
                  },
                  emphasis: {
                    show: true,
                  },
                },
                itemStyle: {
                  color: '#e3e00a',
                },
                symbol: 'image://static/assets/reservoir-type-bak.png',
                symbolSize: [84, 28],
                symbolOffset: [0, -30],
                z: 999,
                data: data, //企业名称
              },
            ],
          }
          _this.myChart.setOption(_this.option)
          _this.myChart.on('click', (params) => {
            //  console.log("点的是什么", params);
            // //进入对应区的三维地图
            // //跟右下角菜单切换触发调用方法一样，但是要传递区划参数，区划name
            // const index = _this.districtData.findIndex((item) => {
            //   return item.name === params.name ;
            // });
            // //console.log('rrrrrrrr5555',index);
            // let districtObject = {
            //   name:params.name,
            //   longitude:_this.districtData[index].value[0],
            //   latitude:_this.districtData[index].value[1],
            // };
            // _this.$emit('jumpIntoMap',districtObject);
          })
        })
      },
    },

    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeUnmount() {}, //生命周期 - 销毁之前
    unmounted() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style lang="less" scoped>
  //@import url(); 引入公共css类

  .river-course-view {
    position: relative;
    width: 100%;
    height: 100%;
    background: url('~@/assets/common/homePage/big-bak.png') no-repeat;
    background-size: 100% 100%;
    .city-map-content-echarts {
      width: 10rem;
      height: 7.9rem;
      top: 10px;
      left: 500px;
      bottom: 2rem;
      position: absolute;
      z-index: 1000;
    }
    .map-menu {
      position: absolute;
      right: 486px;
      bottom: 10px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      pointer-events: none;
      z-index: 99999;
      .map-tab {
        // 1、菜单切换功能
        display: flex;
        pointer-events: auto;
        .tab-item {
          flex: 1;
          cursor: pointer;
          min-width: 1.4rem;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border: 1px solid #2ab1e9;
          border-left: 0;
          font-size: 16px;
          padding: 0px 20px;
          background-color: #0d284f;
          color: #35cffc;
          &.active {
            color: #fefefe;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #1eafda);
          }
          &:first-child {
            border-left: 1px solid #2ab1e9;
          }
        }
      }
    }
    .reservoirType-list {
      position: absolute;
      right: 486px;
      width: 122px;
      height: 100px;
      top: 164px;
      padding: 10px 0 0 10px;
      display: flex;
      flex-direction: column;
      background-color: rgba(13, 40, 79, 0.5);
      border: 1px solid #0d284f;
      padding-top: 22px;
      .type-legend {
        margin-bottom: 20px;
        margin-left: 10px;
        display: flex;
        flex-direction: row;
        .legend-color {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          text-align: center;
          line-height: 12px;
        }
        .color-normal {
          background-color: #00ebac;
        }
        .color-warning {
          background-color: #ff3537;
        }
        .legend-text {
          margin-left: 10px;
          span {
            color: #ffffff;
            font-size: 16px;
          }
        }
      }
    }
    .topic-animation1 {
      width: 100%;
      height: 100%;
      position: absolute;

      margin: 0px auto;
      background-image: url('~@/assets/common/homePage/animation1.png');
      background-size: cover;
    }
    .display-animation1 {
      animation: topup1 5s linear 1s infinite;
    }
    .topic-animation2 {
      width: 100%;
      height: 100%;
      position: absolute;

      margin: 0px auto;
      background-image: url('~@/assets/common/homePage/animation2.png');
      background-size: cover;
    }
    .display-animation2 {
      animation: topup1 5s linear 2s infinite;
    }
    .topic-animation3 {
      width: 100%;
      height: 100%;
      position: absolute;

      margin: 0px auto;
      background-image: url('~@/assets/common/homePage/animation3.png');
      background-size: cover;
    }
    .display-animation3 {
      animation: topup1 5s linear 3s infinite;
    }
    .topic-animation4 {
      width: 100%;
      height: 100%;
      position: absolute;

      margin: 0px auto;
      background-image: url('~@/assets/common/homePage/animation4.png');
      background-size: cover;
    }
    .display-animation4 {
      animation: topup1 5s linear infinite;
    }
    .topic-animation5 {
      width: 100%;
      height: 100%;
      position: absolute;

      margin: 0px auto;
      background-image: url('~@/assets/common/homePage/animation5.png');
      background-size: cover;
    }
    .display-animation5 {
      animation: topup1 5s linear 4s infinite;
    }
    .topic-animation6 {
      width: 100%;
      height: 100%;
      position: absolute;

      margin: 0px auto;
      background-image: url('~@/assets/common/homePage/animation6.png');
      background-size: cover;
    }
    .display-animation6 {
      animation: topup1 5s linear infinite;
    }
    @keyframes topup1 {
      from {
        top: 0%;
      }
      to {
        top: -100%;
      }
    }
  }
</style>
