<template>
  <div class="main-index" style="position: relative">
    <div class="index-map" id="indexMap"></div>
    <img class="head-img" src="../../assets/img/main/head.png"/>
    <div class="box-left">
      <div>
        <div class="box-header-title">
          <div>巡检问题处理情况统计</div>
        </div>
        <div>
          <img src="../../assets/img/main/line.png"/>
          <div>
            <el-progress
              :width="1.57,fontSize | filterPx"
              :stroke-width="0.15,fontSize | filterPx"
              type="circle"
              color="#15CCD0"
              :percentage="parseInt(inspectQuestionInfo.percentage)"
            ></el-progress>
          </div>
          <div>
            <div>
              <div>
                <div>
                  <div></div>
                  <div>已发现</div>
                </div>
                <div>
                  {{inspectQuestionInfo.totalNum}}
                  <span>/件</span>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                  <div></div>
                  <div>已解决</div>
                </div>
                <div>
                  {{inspectQuestionInfo.finishedNum}}
                  <span>/件</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="box-header-title">
          <div>待处理污染</div>
        </div>
        <div>
          <div>
            <div>
              <img src="../../assets/img/main/build1.png"/>
              <div>
                <div>
                  <div><span v-if="waitQuestionInfo.shuimian">{{waitQuestionInfo.shuimian.totalNum}}</span></div>
                  <img src="../../assets/img/main/up.png"/>
                </div>
                <div>水面污染</div>
              </div>
            </div>
            <div>
              <img src="../../assets/img/main/build2.png"/>
              <div>
                <div>
                  <div><span v-if="waitQuestionInfo.shuizhi">{{waitQuestionInfo.shuizhi.totalNum}}</span></div>
                  <img src="../../assets/img/main/down.png"/>
                </div>
                <div>水质污染</div>
              </div>
            </div>
          </div>
          <div>
            <div>
              <img src="../../assets/img/main/build3.png"/>
              <div>
                <div>
                  <div><span v-if="waitQuestionInfo.paikou">{{waitQuestionInfo.paikou.totalNum}}</span></div>
                  <img src="../../assets/img/main/up.png"/>
                </div>
                <div>污水排口</div>
              </div>
            </div>
            <div>
              <img src="../../assets/img/main/build4.png"/>
              <div>
                <div>
                  <div><span v-if="waitQuestionInfo.anxian">{{waitQuestionInfo.anxian.totalNum}}</span></div>
                  <img src="../../assets/img/main/down.png"/>
                </div>
                <div>违法乱建</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="box-header-title">
          <div>巡检问题河湖统计</div>
        </div>
        <div>
          <transverseBar
            :dataList="questionDriverList"
            id="leftBar"
            :width="4.463,fontSize | filterPx"
            :height="2.008,fontSize | filterPx"
          ></transverseBar>
        </div>
      </div>
    </div>
    <div class="box-right">
      <div>
        <div class="box-header-title">
          <div>告警信息</div>
        </div>
        <div>
          <div :key="index" v-for="(item,index) in waterAlarmList">
            <div>
              <img
                :src="item.measuredStandard==5?require('../../assets/img/main/red.png'):(item.measuredStandard==4?require('../../assets/img/main/orange.png'):require('../../assets/img/main/yellow.png'))"/>
              <div>{{item.alarmInfo}}</div>
            </div>
            <div><span v-if="item.alarmTime">{{item.alarmTime.split(' ')[0]}}</span></div>
          </div>
          <div v-if="waterAlarmList.length<2"></div>
          <div v-if="waterAlarmList.length<3"></div>
        </div>
      </div>
      <div>
        <div class="box-header-title">
          <div>区属问题河湖统计</div>
        </div>
        <div>
          <div>数量/件</div>
          <bar
            :dataList="questionDriverAreaList"
            id="rightBar"
            :width="4.48,fontSize | filterPx"
            :height="2.22,fontSize | filterPx"
          ></bar>
        </div>
      </div>
      <div>
        <div class="box-header-title">
          <div>河湖水质问题分类统计</div>
        </div>
        <div>
          <cake v-if="waterAlarmCategoryList.length>0" :dataList="waterAlarmCategoryList" id="rightPre"
                :width="4.42,fontSize | filterPx" :height="2.554,fontSize | filterPx"></cake>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import AMap from "AMap";
  import njBround from "static/njBround";
  import transverseBar from "./transverseBar";
  import bar from "./bar";
  import cake from "./cake";
  import store from '../../vuex'
  import {mapGetters} from "vuex";
  import api from '@/api/main/index'
  import waterAlarmApi from '@/api/water/waterAlarm'
  import $ from 'jquery'

  export default {
    name: "main-container",
    data() {
      return {
        questionDriverList: [],
        waitQuestionInfo: {},
        waterAlarmList: [],
        waterAlarmCategoryList: [],
        questionDriverAreaList: [],
        inspectQuestionInfo: {},
        map: {},
        nameMark: [
          {name: '六合区', lng: 118.867937, lat: 32.369795},
          {name: '浦口区', lng: 118.571012, lat: 32.055306},
          {name: '栖霞区', lng: 118.908507, lat: 32.135114},
          {name: '南京市', lng: 118.798507, lat: 32.035114},
          {name: '江宁区', lng: 118.798507, lat: 31.835114},
          {name: '溧水区', lng: 119.038507, lat: 31.605114},
          {name: '高淳区', lng: 118.938507, lat: 31.325114},
        ]
      };
    },
    created() {
      let designSize = (1920 + 1080) / 2; // 设计图尺寸
      let wW = (document.body.clientWidth + document.body.clientHeight) / 2;// 窗口宽度
      let rem = wW * 100 / designSize;
      document.documentElement.style.fontSize = rem + 'px';
      store.dispatch('user/setFontSize', rem)
      $(window).resize(function ()// 绑定到窗口的这个事件中
      {
        let designSize = (1920 + 1080) / 2
        let wW = (document.body.clientWidth + document.body.clientHeight) / 2;// 窗口宽度
        let rem = wW * 100 / designSize;
        document.documentElement.style.fontSize = rem + 'px';
        store.dispatch('user/setFontSize', rem)
        // window.location.reload()
      });
    },
    mounted() {
      let me = this;
      me.getScreenIndex()
      me.getWaterAlarmList()
      this.map = new AMap.Map("indexMap", {
        zoom: 9,
        center: [118.750078, 31.983115],
        // features: ['bg'],
        mapStyle: "amap://styles/dark",
        resizeEnable: true
      });
      this.map.on("complete", function () {
        me.addBound();
        me.nameMark.map(item => {
          me.addRegionMarker(item)
        })
      });
    },
    computed: {
      ...mapGetters(["fontSize"])
    },
    components: {transverseBar, bar, cake},
    methods: {
      getWaterAlarmList() {
        waterAlarmApi.getWaterAlarmList(3).then(res => {
          this.waterAlarmList = res.data ? res.data : []
        }).catch(e => {
          this.waterAlarmList = []
        })
      },
      getScreenIndex() {
        api.getScreenIndex().then(res => {
          const {inspectQuestionInfo, questionDriverAreaList, waterAlarmCategoryList, waitQuestionInfo, questionDriverList} = res.data
          this.inspectQuestionInfo = inspectQuestionInfo ? inspectQuestionInfo : {}
          if (questionDriverAreaList && questionDriverAreaList.length > 0) {
            for (let i = 0; i < questionDriverAreaList.length; i++) {
              if (i % 2 === 0) {
                questionDriverAreaList[i].vote = 1
              } else {
                questionDriverAreaList[i].vote = 2
              }
            }
          }
          this.questionDriverAreaList = questionDriverAreaList ? questionDriverAreaList : []
          if(waterAlarmCategoryList&&waterAlarmCategoryList.length>0){
            waterAlarmCategoryList.map(item=>{
              item.value=parseInt(item.value)
            })
          }
          this.waterAlarmCategoryList = waterAlarmCategoryList ? waterAlarmCategoryList : []
          this.waitQuestionInfo = waitQuestionInfo ? waitQuestionInfo : {}
          if (questionDriverList && questionDriverList.length > 0) {
            for (let i = 0; i < questionDriverList.length; i++) {
              if (i == 0) {
                questionDriverList[i].cat = 1
              } else if (i == 1) {
                questionDriverList[i].cat = 2
              } else if (i == 2) {
                questionDriverList[i].cat = 3
              }else{
                questionDriverList[i].cat = 4
              }
            }
          }
          this.questionDriverList = questionDriverList ? questionDriverList.reverse() : []
          console.log(questionDriverList)
        }).catch(e => {
          this.inspectQuestionInfo = {}
          this.questionDriverAreaList = []
          this.waterAlarmCategoryList = []
          this.waitQuestionInfo = {}
          this.questionDriverList = []
        })
      },
      addBound() {
        let me = this;
        let list = njBround;
        if (list && list.length > 0) {
          list.map(item => {
            var bounds = item.bounds;
            if (bounds) {
              for (let i = 0, l = bounds.length; i < l; i++) {
                let path = [];
                bounds[i].map(cc => {
                  path.push(new AMap.LngLat(cc.lng, cc.lat));
                });
                let polygon = new AMap.Polygon({
                  strokeWeight: 4,
                  path: path,
                  fillOpacity: 0.7,
                  fillColor: "#15948d",
                  strokeColor: "#0CEBE1"
                });
                me.map.add(polygon);
              }
            }
          });
        }
      },
      addRegionMarker(item) {
        // 创建纯文本标记
        let fontSize = '14px'
        if (item.name == '南京市') {
          fontSize = '16px'
        }
        var text = new AMap.Text({
          text: item.name,
          anchor: "center", // 设置文本标记锚点
          cursor: "pointer",
          style: {
            background: 'transparent',
            fontSize: fontSize,
            color: "#ffffff",
            padding: "0",
            border: "none",
            fontWeight: 'bold'
          },
          position: [item.lng, item.lat]
        });

        text.setMap(this.map);
      }
    }
  };
</script>

<style lang="less">
  .main-index {
    width: 100%;
    height: 100%;

    .index-map {
      width: 100%;
      height: 100%;
      border: 1px solid #dcdfe6;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);

      .amap-marker-label {
        padding: 0 !important;
        font-size: 14px !important;
        line-height: 18px !important;
      }
    }

    .head-img {
      position: absolute;
      top: 0rem;
      width: 100%;
      height: 1.04rem;
    }

    .box-header-title {
      width: 100%;
      background-image: linear-gradient(90deg,
      #213232 2%,
      rgba(101, 228, 227, 0) 100%);
      height: 0.35rem;
      line-height: 0.35rem;
      border-top: 0.01rem solid #65e4e3;
      position: relative;

      > div {
        color: #ffffff;
        font-family: PingFangSC-Regular;
        font-size: 0.22rem;
        padding-left: 0.3rem;
      }
    }

    .box-right {
      position: absolute;
      top: 1.55rem;
      width: 5.05rem;
      right: 0.1rem;

      > div:first-child {
        background-color: rgba(0, 0, 0, 0.6);

        > div:last-child {
          padding: 0rem 0.295rem 0.25rem 0.295rem;
          position: relative;

          > div {
            margin-top: 0.16rem;
            height: 0.28rem;
            display: flex;
            justify-content: space-between;
            align-items: center;

            > div:first-child {
              display: flex;
              align-items: center;

              > img {
                width: 0.2rem;
                height: 0.2rem;
                margin-right: 0.1rem;
              }

              > div:last-child {
                width: 2.8rem;
                overflow: hidden;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
                white-space: nowrap;
                font-family: PingFangSC-Regular;
                font-size: 0.2rem;
                color: #ffffff;
                line-height: 0.28rem;
              }
            }

            > div:last-child {
              font-family: PingFangSC-Regular;
              font-size: 0.14rem;
              color: #ffffff;
              line-height: 0.2rem;
            }
          }
        }
      }

      > div:nth-child(2) {
        margin-top: 0.154rem;
        background-color: rgba(0, 0, 0, 0.6);

        > div:last-child {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          padding-bottom: 0.178rem;
          padding-top: 0.492rem;

          > div:first-child {
            font-family: PingFangSC-Regular;
            font-size: 0.14rem;
            color: #ffffff;
            position: absolute;
            top: 0.2rem;
            left: 0.573rem;
          }
        }
      }

      > div:last-child {
        margin-top: 0.15rem;
        background-color: rgba(0, 0, 0, 0.6);

        > div:last-child {
          position: relative;
          display: flex;
          justify-content: center;
          padding: 0 0.34rem;
          padding-bottom: 0.05rem;
        }
      }
    }

    .box-left {
      position: absolute;
      top: 1.55rem;
      width: 5.05rem;
      left: 0.1rem;

      > div:first-child {
        background-color: rgba(0, 0, 0, 0.6);

        > div:last-child {
          padding: 0.17rem 0.27rem;
          display: flex;
          position: relative;

          > img {
            position: absolute;
            width: 0.92rem;
            height: 0.185rem;
            left: 1.85rem;
            bottom: 0.58rem;
          }

          > div:nth-child(2) {
            width: 1.82rem;
            height: 1.82rem;
            background-position: center center;
            background-size: cover;
            background-image: url(../../assets/img/main/table.png);
            display: flex;
            align-items: center;
            justify-content: center;

            .el-progress__text {
              font-family: Oswald-Demi-BoldItalic;
              font-size: 0.33rem !important;
              color: #ffffff;
            }
          }

          > div:last-child {
            margin-left: 0.53rem;

            > div {
              width: 2rem;
              height: 0.86rem;
              background-position: center center;
              background-size: cover;
              background-image: url(../../assets/img/main/bg.png);

              > div {
                padding: 0.15rem 0.24rem;

                > div:first-child {
                  display: flex;
                  align-items: center;

                  > div:first-child {
                    background: #fedf12;
                    border: 0.02rem solid #657533;
                    border-radius: 50%;
                    height: 0.06rem;
                    width: 0.06rem;
                  }

                  > div:last-child {
                    font-family: PingFangSC-Regular;
                    font-size: 0.14rem;
                    color: #ffffff;
                    margin-left: 0.05rem;
                  }
                }

                > div:last-child {
                  font-family: Impact;
                  font-size: 0.3rem;
                  color: #ffffff;
                  text-align: right;

                  > span {
                    font-family: PingFangSC-Regular;
                    font-size: 0.12rem;
                    color: #ffffff;
                    margin-left: 0.02rem;
                  }
                }
              }
            }

            > div:last-child {
              margin-top: 0.2rem;

              > div > div:first-child > div:first-child {
                background: #18d27c;
                border: 0.02rem solid #0c8757;
              }
            }
          }
        }
      }

      > div:nth-child(2) {
        margin-top: 0.175rem;
        background-color: rgba(0, 0, 0, 0.6);

        > div:last-child {
          padding: 0.178rem 0.43rem 0.235rem 0.4rem;
          position: relative;

          > div {
            display: flex;
            width: 100%;
            justify-content: space-between;
            align-items: center;

            > div {
              display: flex;
              align-items: center;

              > img {
                width: 0.8rem;
                height: 0.8rem;
                margin-right: 0.308rem;
              }

              > div:last-child {
                > div:first-child {
                  display: flex;
                  align-items: center;

                  > div:first-child {
                    font-family: PingFangSC-Medium;
                    font-size: 0.3rem;
                    color: #ffffff;
                    line-height: 0.42rem;
                  }

                  > img {
                    width: 0.12rem;
                    height: 0.18rem;
                    margin-left: 0.044rem;
                  }
                }

                > div:last-child {
                  font-family: PingFangSC-Regular;
                  font-size: 0.14rem;
                  color: #ffffff;
                  line-height: 0.2rem;
                }
              }
            }
          }

          > div:last-child {
            margin-top: 0.177rem;
          }
        }
      }

      > div:last-child {
        margin-top: 0.15rem;
        background-color: rgba(0, 0, 0, 0.6);

        > div:last-child {
          position: relative;
          display: flex;
          justify-content: center;
          padding-top: 0.1rem;
          padding-bottom: 0.05rem;
        }
      }
    }

  }
</style>
