<template>
  <div class="container">
    <div class="container-header">
      <div class="logo"></div>
      <div class="title-text">
        <h1>智慧养护平台</h1>
        <span>Intelligent maintenance platform</span>
      </div>
      <div class="line"></div>
      <div class="Datau-image">
        <dv-decoration-9 style="width:120px;height:120px;"></dv-decoration-9>
      </div>
    </div>
    <div class="model-title">
      <model-title>
        <div slot="h1">计费金额统计</div>
        <div slot="span">Billing amount statistics</div>
      </model-title>
      <div class="model-small">
        <small-model>
          <div slot="h1">日常养护项目计费金额</div>
          <div slot="p">11,457</div>
        </small-model>
        <small-model>
          <div slot="h1">专项养护项目计费金额</div>
          <div slot="p">8,005</div>
        </small-model>
        <small-model>
          <div slot="h1">抢险养护项目计费金额</div>
          <div slot="p">1,361</div>
        </small-model>
      </div>
    </div>
    <div class="column-chart">
      <model-title>
        <div slot="h1">各路段养护金额</div>
        <div slot="span">Maintenance amount of each section</div>
      </model-title>
      <anamiton-chart></anamiton-chart>
    </div>
    <div class="map" id="map"></div>
    <div class="container-bottom">
      <model-title>
        <div slot="h1">施工/完成养护任务统计</div>
        <div slot="span">
          Statistics of construction / completed maintenance tasks
        </div>
      </model-title>
      <dv-border-box-1>
        <cloum-chart></cloum-chart>
      </dv-border-box-1>
    </div>
    <div class="container-right">
      <model-title>
        <div slot="h1">养护检查统计</div>
        <div slot="span">Maintenance inspection statistics</div>
      </model-title>
      <radius-chart></radius-chart>
      <dv-chart></dv-chart>
      <model-title>
        <div slot="h1">合同统计</div>
        <div slot="span">Contract statistics</div>
      </model-title>
      <div class="dv-charts">
        <dv-border-box-8 :reverse="true">
          <contract-data></contract-data
        ></dv-border-box-8>
      </div>
    </div>
  </div>
</template>
<script>
import ModelTitle from './components/ModelTitle.vue'
import SmallModel from './components/SmallModel.vue'
import CloumChart from './components/CloumChart.vue'
import RadiusChart from './components/RadiusChart.vue'
import DvChart from './components/DvChart.vue'
import ContractData from './components/ContractData.vue'
import AnamitonChart from './components/AnamitonChart.vue'
export default {
  components: {
    ModelTitle,
    SmallModel,
    CloumChart,
    RadiusChart,
    DvChart,
    ContractData,
    AnamitonChart
  },
  data() {
    return {
      map: '', //地图
      marker: '', //点标记
      markers: [],
      cluster: [], //点聚合
      markerType: '',
      bridgrData: [
        {x: 105.816934, y: 29.259587},
        {
          x: 105.780556,
          y: 29.255447
        }
      ],
      culData: [
        {x: 105.739722, y: 29.252798},
        {x: 105.754999, y: 29.252199},
        {x: 105.764269, y: 29.252798},
        {x: 105.775513, y: 29.255344},
        {x: 105.793022, y: 29.255344},
        {x: 105.816454, y: 29.259163},
        {x: 105.822119, y: 29.262009},
        {x: 105.833191, y: 29.268523},
        {x: 105.857395, y: 29.274288},
        {x: 105.868382, y: 29.273539},
        {x: 105.765299, y: 29.252873},
        {x: 105.776886, y: 29.255419}
      ]
    }
  },
  created() {
    setTimeout(() => {
      this.initMap()
      // this.markerSign(this.culData, 'cul')
      // this.markerSign(this.bridgrData, 'bridge')
      this.pointAggregation()
    }, 1000)
  },
  methods: {
    initMap() {
      let map = new AMap.Map('map', {
        resizeEnable: true,
        draggable: true,
        mapStyle: 'amap://styles/blue', //地图主题
        center: [105.780556, 29.255447],
        features: ['road', 'point'], //bg:区域图, road:道路, building:建筑, point: 标注
        zoom: 13 //地图显示的缩放级别
      })
      this.map = map
    },
    markerSign(data, type) {
      this.markerType = type
      data.forEach(item => {
        this.locationMark(item.x, item.y, '')
      })
    },
    //点聚合
    pointAggregation() {
      let icon = new AMap.Icon({
        size: new AMap.Size(48, 48),
        image: require('../../../assets/img/hanong.png')
      })
      //点聚合
      this.culData.forEach(item => {
        this.markers.push(
          new AMap.Marker({
            position: [item.x, item.y],
            offset: new AMap.Pixel(-15, -15),
            icon: icon,
            size: new AMap.Size(30, 37), //图标大小
            imageSize: new AMap.Size(30, 37)
          })
        )
      })
      this.map.plugin(['AMap.MarkerClusterer'], () => {
        // if(this.cluster){
        //   this.cluster.setMap(null)
        // }
        this.cluster = new AMap.MarkerClusterer(this.map, this.markers, {
          gridSize: 80
        })
      })
    },
    locationMark(x, y, name) {
      let icon
      if (this.markerType == 'cul') {
        icon = new AMap.Icon({
          size: new AMap.Size(48, 48),
          image: require('../../../assets/img/hanong.png')
        })
      } else if ((this.markerType = 'bridge')) {
        icon = new AMap.Icon({
          size: new AMap.Size(48, 48),
          image: require('../../../assets/img/qiaoliang.png')
          // imageSize: new AMap.Size(135, 40),
          // imageOffset: new AMap.Pixel(-8, -3)
        })
      }

      // 创建一个 Marker 实例：
      this.marker = new AMap.Marker({
        map: this.map,
        position: [x, y], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        offset: new AMap.Pixel(-13, -30),
        title: name,
        icon: icon
      })
      // 将创建的点标记添加到已有的地图实例：
      this.map.add(this.marker)
      //定位导标记点
      //   this.map.setFitView()
    }
  }
}
</script>
<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.container {
  background-image: linear-gradient(to right, #051730, #284f78, #051730);
  //   height: 1000px;
  height: 100%;
  padding: 0 37px;
  .container-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1872px;
    height: 99px;
    opacity: 1;
    margin: 0 auto;
    // background-color: #409fff;
    .logo {
      width: 180px;
      height: 55px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url('./images/whitelogo.png');
      border-radius: 0px;
      cursor: pointer;
    }
    .title-text {
      overflow: unset;
      text-overflow: unset;
      white-space: unset;
      color: rgb(255, 255, 255);
      background-image: none;
      background-clip: unset;
      -webkit-text-fill-color: initial;
      h1 {
        font-weight: bold;
        font-family: 'Microsoft Yahei', Arial, sans-serif;
        font-size: 30px;
        writing-mode: horizontal-tb;
        letter-spacing: 0px;
      }
      span {
        display: inline;
      }
    }
    .line {
      width: 1278px;
      height: 31px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url('./images/header-line.svg');
      border-radius: 0px;
      cursor: pointer;
    }
    .Datau-image {
      width: 153px;
      pointer-events: auto;
      image-rendering: -webkit-optimize-contrast;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      //   background-image: url('./images/DataAu.png');
      border-radius: 0px;
      cursor: pointer;
    }
  }
  .model-title {
    width: 417px;
    .model-small {
      width: 100%;
      margin-top: 10px;
      div {
        font-size: 20px;
        &:nth-child(3) {
          p {
            &:nth-child(1) {
              div {
                font-weight: normal;
                font-family: 'Microsoft Yahei', Arial, sans-serif;
                font-size: 30px;
                writing-mode: horizontal-tb;
                letter-spacing: 0px;
              }
            }
          }
        }
      }
    }
  }
  .column-chart {
    width: 417px;
    margin: 10px 0;
  }
  .map {
    height: 530px;
    width: 1000px;
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 40px 40px #033447;
    z-index: 1;
  }
  .container-bottom {
    height: 260px;
    width: 1000px;
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
  }
  .container-right {
    width: 417px;
    height: calc(100% - 80px);
    position: absolute;
    top: 80px;
    right: 20px;
    .dv-charts {
      width: 100%;
      height: calc(100% - 520px);
      margin-top: 10px;
    }
  }
}
</style>
