<template>
  <div id="data-statis">
    <div
      id="amap-container"
      v-loading="mapLoading"
      element-loading-background="rgba(0, 0, 0, 0.2)"
      element-loading-text="地图加载中..."
    ></div>
    <div class="left-area">
      <Section class="sections" title="本年问题分析">
        <STable :headers="header1" :table-data="data1"> </STable>
      </Section>
      <Section class="sections" title="本年问题等级分析">
        <STable :headers="header2" :table-data="data2"> </STable>
      </Section>
      <Section class="sections" title="本年问题处理分析">
        <STable :headers="header3" :table-data="data3">
          <template slot-scope="scope">
            <template v-if="scope.header.slot == 'count'">
              <span
                >{{ scope.row.count }}/<span style="color: #b2bfcf">{{
                  scope.row.general
                }}</span></span
              >
            </template>
          </template>
        </STable>
      </Section>
    </div>
    <div class="right-area" v-if="currentCityName">
      <Section class="sections long" type="long" :title="currentCityName">
        <div class="switch-buttons">
          <div :class="[activeTab == 1 ? 'active' : '']" @click="switchList(1)">
            政府监管
          </div>
          <div :class="[activeTab == 2 ? 'active' : '']" @click="switchList(2)">
            质量管理制度
          </div>
          <div :class="[activeTab == 3 ? 'active' : '']" @click="switchList(3)">
            资质资格
          </div>
          <div :class="[activeTab == 4 ? 'active' : '']" @click="switchList(4)">
            实体质量
          </div>
        </div>
        <STable2
          style="margin-top: 0.14rem; height: calc(100% - 0.64rem)"
          :headers="
            activeTab == 1
              ? header4_1
              : activeTab == 2
              ? header4_2
              : activeTab == 3
              ? header4_3
              : header4_4
          "
          :table-data="data4"
        ></STable2>
      </Section>
    </div>
    <div class="bottom-area">
      <Section2 title="工程问题情况" class="bottom-section">
        <STable2 :headers="header5" :table-data="data5">
          <template slot-scope="scope">
            <template v-if="scope.header.slot == 'count'">
              <span
                >{{ scope.row.question_count }}/<span style="color: #b2bfcf">{{
                  scope.row.question_general
                }}</span></span
              >
            </template>
          </template>
        </STable2>
      </Section2>
    </div>
    <img src="@/assets/images/index/lt.png" class="lt" alt="" />
    <img src="@/assets/images/index/rt.png" class="rt" alt="" />
    <img src="@/assets/images/index/btm.png" class="btm" alt="" />
  </div>
</template>
<script>
import {
  getMapData,
  getYearQuestion,
  getLevelQuestion,
  getStatusQuestion,
  getProjectQuestion,
  getAreaQuestionByAreaId,
} from "@/api/dataStatis";

import AMapLoader from "@amap/amap-jsapi-loader";
import { mapState } from "vuex";

import Section2 from "@/components/common/Section2.vue";
import STable2 from "@/components/common/STable2.vue";
export default {
  name: "DataStatis",
  components: {
    Section2,
    STable2,
  },
  data() {
    return {
      mapLoading: true,
      header1: [
        {
          name: "市区",
          props: "city_name",
          width: "calc(100% / 5 - .1rem)",
        },
        {
          name: "政府监管",
          props: "zfjg",
          width: "calc(100% / 5)",
        },
        {
          name: "质量管理制度",
          props: "zlglzd",
          width: "calc(100% / 5 + .1rem)",
        },
        {
          name: "资质资格",
          props: "zzzg",
          width: "calc(100% / 5)",
        },
        {
          name: "实体质量",
          props: "stzl",
          width: "calc(100% / 5)",
        },
      ],
      data1: [],
      header2: [
        {
          name: "市区",
          props: "city_name",
          width: "calc(100% / 4)",
        },
        {
          name: "严重问题",
          props: "serious",
          width: "calc(100% / 4)",
        },

        {
          name: "一般问题",
          props: "general",
          width: "calc(100% / 4)",
        },
        {
          name: "问题总数",
          props: "count",
          width: "calc(100% / 4)",
        },
      ],
      data2: [],

      header3: [
        {
          name: "市区",
          props: "city_name",
          width: "20%",
        },
        {
          name: "涉及工程",
          props: "project_count",
          width: "20%",
        },
        {
          name: "涉及单位",
          props: "units_count",
          width: "20%",
        },
        {
          name: "问题总数/已处理数",
          props: "count",
          slot: "count",
          width: "40%",
        },
      ],
      header4_1: [
        {
          name: "区域",
          props: "name",
          width: "20%",
        },
        {
          name: "项目法人",
          props: "category_count_14",
          width: "10%",
          style: {
            lineHeight: "0.16rem",
            fontSize: "0.12rem",
          },
        },
        {
          name: "监理单位",
          props: "category_count_15",
          width: "10%",
          style: {
            lineHeight: "0.16rem",
            fontSize: "0.12rem",
          },
        },
        {
          name: "施工单位",
          props: "category_count_16",
          width: "10%",
          style: {
            lineHeight: "0.16rem",
            fontSize: "0.12rem",
          },
        },
        {
          name: "设计单位",
          props: "category_count_17",
          width: "10%",
          style: {
            lineHeight: "0.16rem",
            fontSize: "0.12rem",
          },
        },
        {
          name: "验收评定",
          props: "category_count_18",
          width: "10%",
          style: {
            lineHeight: "0.16rem",
            fontSize: "0.12rem",
          },
        },
        {
          name: "检测单位",
          props: "category_count_19",
          width: "10%",
          style: {
            lineHeight: "0.16rem",
            fontSize: "0.12rem",
          },
        },
      ],
      header4_2: [
        {
          name: "区域",
          props: "name",
          width: "calc(100% / 3)",
        },
        {
          name: "质量管理岗位职责",
          props: "category_count_8",
          width: "calc(100% / 3)",
        },
        {
          name: "质量责任终身制",
          props: "category_count_9",
          width: "calc(100% / 3)",
        },
      ],
      header4_3: [
        {
          name: "区域",
          props: "name",
          width: "calc(100% / 2)",
        },
        {
          name: "人员资格",
          props: "category_count_10",
          width: "calc(100% / 2)",
        },
      ],
      header4_4: [
        {
          name: "人员资格",
          props: "name",
          width: "calc(100% / 4)",
        },
        {
          name: "工程外观",
          props: "category_count_11",
          width: "calc(100% / 4)",
        },
        {
          name: "开挖与基础处理质量",
          props: "category_count_12",
          width: "calc(100% / 4)",
          style: {
            lineHeight: "0.16rem",
            fontSize: "0.12rem",
          },
        },
        {
          name: "工程结构质量",
          props: "category_count_13",
          width: "calc(100% / 4)",
        },
      ],
      data4: [],

      header5: [
        {
          name: "工程名称",
          props: "project_name",
          width: "20%",
          style: {
            textAlign: "left",
            padding: "0 .2rem",
          },
        },
        {
          name: "标段名称",
          props: "prname",
          width: "15%",
          style: {
            textAlign: "left",
            padding: "0 .2rem",
          },
        },
        {
          name: "政府监管",
          props: "zfjg",
          width: "10%",
        },
        {
          name: "质量管理制度",
          props: "zlglzd",
          width: "10%",
        },
        {
          name: "资质资格",
          props: "zzzg",
          width: "10%",
        },
        {
          name: "实体质量",
          props: "stzl",
          width: "10%",
        },
        {
          name: "问题总数/已处理数",
          props: "label4",
          slot: "count",
          width: "15%",
        },
      ],
      data5: [],
      activeTab: 1,

      mapCenter: [],
      AMap: null,
      map: null,
      mapActive: 1,
      loca: null,
      renderColor: {
        A: "#208995",
        B: "#2a5dc6",
        C: "#23366f",
        D: "#a9a715",
        E: "#b74f4f",
      },
      districtArr: [],
      polygons: [],
      currentCityName: "",
      currentCityId: "",
    };
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "478c82d2e18c90f2fc32b93024d45539",
        version: "2.0",
        plugins: ["AMap.MarkerClusterer", "AMap.DistrictSearch"],
        Loca: {
          version: "2.0.0", //Loca 版本,缺省1.3.2
        },
      })
        .then((AMap) => {
          // 初始化地图
          this.AMap = AMap;
          var options = {
            subdistrict: 1,
            extensions: "all",
            level: "province",
          };
          var district = new this.AMap.DistrictSearch(options);
          district.search("浙江省", (status, result) => {
            var bounds = result.districtList[0]["boundaries"];

            var mask = [];
            for (var i = 0; i < bounds.length; i++) {
              mask.push([bounds[i]]);
            }

            this.map = new this.AMap.Map("amap-container", {
              mask,
              viewMode: "3D",
              pitch: 30,
              zoom: 7.3,
              center: [120.247008, 28.883294],
              resizeEnable: true,
              mapStyle: "amap://styles/1dda787b3ac1ce28f171d2f153726eb7",
            });
            this.infoWindow = new this.AMap.InfoWindow({
              offset: new AMap.Pixel(0, -25),
            });
            // this.$nextTick(() => {
            //   var scale = window.innerHeight / 1080;
            //   document.getElementById("amap-container").style.zoom = 1 / scale;
            // });
            this.loca = new Loca.Container({
              map: this.map,
            });
            // this.map.on("click", () => {
            //   console.log(this.map.getCenter());
            // });
            getMapData().then((res) => {
              this.districtArr = res.data;
              this.drawDistrict(result.districtList[0].districtList);
              this.setMarker(result.districtList[0].districtList);
            });
          });
        })
        .catch((e) => {
          // console.log(e);
        });
    },
    getData() {
      getYearQuestion().then((res) => {
        this.data1 = res.data;
      });
      getLevelQuestion().then((res) => {
        this.data2 = res.data;
      });
      getStatusQuestion().then((res) => {
        this.data3 = res.data;
      });
      getProjectQuestion().then((res) => {
        this.data5 = res.data;
      });
    },

    async load() {
      console.log("load");
    },

    setMarker(districts) {
      const markers = [];
      this.districtArr.map((item) => {
        const mapMarkers = new this.AMap.Marker({
          icon: new AMap.Icon({
            image: require("@/assets/images/index/icon_dingwie@2x.png"),
            size: new AMap.Size(40, 40),
            imageSize: new AMap.Size(40, 40),
          }),
          position: [
            districts.filter((point) => {
              return point.name == item.name;
            })[0].center.lng,
            districts.filter((point) => {
              return point.name == item.name;
            })[0].center.lat,
          ],
          offset: new this.AMap.Pixel(0, -20),
          extData: {
            markerData: districts.filter((point) => {
              return point.name == item.name;
            })[0],
          },
        });
        mapMarkers.setLabel({
          offset: new AMap.Pixel(12, 20), //设置文本标注偏移量
          content: `<div style="color:#fff;line-height:.16rem;padding-left:.02rem">
            <div>${item.name}</div>
            <div>${item.qcount}条</div>
            </div>`, //设置文本标注内容

          direction: "top", //设置文本标注方位
        });
        markers.push(mapMarkers);
      });

      markers.map((item) => {
        item.setMap(this.map);
      });
    },
    markerClick(e) {
      this.infoWindow.setContent(e.target.content);
      this.infoWindow.open(this.map, e.target.getPosition());
    },

    drawDistrict(disArr) {
      for (let i = 0; i < disArr.length; i += 1) {
        setTimeout(async () => {
          await this.drawFunction(
            disArr[i].name,

            i == disArr.length - 1
          );
        }, (i + 1) * 600);
      }
    },
    async drawFunction(area, isfinish) {
      return new Promise((resolve) => {
        let opts = {
          subdistrict: 1, //获取边界不需要返回下级行政区
          extensions: "all", //返回行政区边界坐标组等具体信息
          level: "city", //查询行政级别为 市
        };

        let district = new this.AMap.DistrictSearch(opts);
        district.setLevel("city");

        district.search(area, (status, result) => {
          let holes = result.districtList[0].boundaries;
          let pathArray = [];
          for (var i = 0; i < holes.length; i++) {
            pathArray.push([holes[i]]);
          }

          let polygon = new this.AMap.Polygon({
            path: pathArray,
            //线条颜色，使用16进制颜色代码赋值。默认值为#006600
            // strokeColor: 'rgb(20,164,173)',
            strokeColor: "#2656bb",
            strokeWeight: 1,
            //轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
            strokeOpacity: 1,
            //多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
            fillColor: "#23366f",
            //多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
            fillOpacity: 0.9,
            //轮廓线样式，实线:solid，虚线:dashed
            strokeStyle: "solid",
          });
          polygon.data = this.districtArr.filter((item) => {
            return item.name == area;
          })[0]
            ? this.districtArr.filter((item) => {
                return item.name == area;
              })[0]
            : {};
          // if (area == "杭州市")
          polygon.on("click", () => {
            this.polygons.map((item) => {
              item.setOptions({
                strokeColor: "#2656bb",
                strokeWeight: 1,
                fillColor: "#23366f",
              });
              item.selected = false;
            });

            polygon.setOptions({
              strokeColor: "#14ddf5",
              strokeWeight: 2,
              fillColor: "#2a5dc6",
            });
            polygon.selected = true;
            console.log(polygon);
            this.currentCityName = polygon.data.name ? polygon.data.name : "";
            if (polygon.data.id) {
              this.currentCityId = polygon.data.id;
              this.switchList(1);
            }
          });

          // 添加鼠标移入事件
          polygon.on("mousemove", function (event) {
            polygon.setOptions({
              strokeColor: "#14ddf5",
              strokeWeight: 2,
              fillColor: "#2a5dc6",
            });
          });
          // 添加鼠标移出事件
          polygon.on("mouseout", function (event) {
            if (!polygon.selected) {
              polygon.setOptions({
                strokeColor: "#2656bb",
                strokeWeight: 1,
                fillColor: "#23366f",
              });
            }
          });
          polygon.setPath(pathArray);
          this.polygons.push(polygon);
          this.map.add(polygon);
          console.log(i);
          if (isfinish) {
            this.mapLoading = false;
          }
          resolve();
        });
      });
    },
    switchList(type) {
      this.activeTab = type;
      this.data4 = [];
      getAreaQuestionByAreaId(type, this.currentCityId).then((res) => {
        this.data4 = res.data;
      });
    },
  },

  mounted() {
    this.getData();
    this.initMap();
    window.clickDetail = this.clickDetail;
  },
  watch: {},
  destroyed() {
    this.map && this.map.destroy();
  },
  computed: {
    ...mapState(["userInfo"]),
  },
};
</script>
<style lang="less" scoped>
#data-statis {
  position: relative;
  width: 100%;
  height: 100%;
}
#amap-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: calc(100% - 900px);
  height: calc(100% - calc(calc(100% - 90px) / 3 - calc(28px / 3)));
  background: transparent !important;
  z-index: 5;
}
.left-area {
  width: 440px;
  left: 10px;
  top: 80px;
  position: fixed;
  height: calc(100% - 90px);
  z-index: 999;
}
.right-area {
  position: fixed;
  right: 10px;
  top: 80px;
  width: 440px;
  height: calc(calc(100% - 90px) / 3 * 2);
  z-index: 999;
}
.bottom-area {
  position: fixed;
  width: calc(100% - 480px);
  left: 470px;
  bottom: 10px;
  right: 10px;
  height: calc(calc(100% - 90px) / 3 - calc(28px / 3)) !important;
  z-index: 999;
}
.sections {
  height: calc(100% / 3 - calc(28px / 3)) !important;
  margin-bottom: 14px;
  &:last-child {
    margin-bottom: 0;
  }
}
.sections.long {
  height: calc(100% - calc(28px / 3)) !important;
}
.bottom-section {
  width: 100%;
  height: 100% !important;
}
::v-deep .span-status {
  &.green {
    color: #47ae5f;
  }
  &.orange {
    color: #df7a1f;
  }
  &.red {
    color: #df441f;
  }
  &.blue {
    color: #b83be7;
  }
}
.lt {
  position: fixed;
  left: 0;
  width: 500px;
  top: 80px;
  height: 100%;
  z-index: 10;
}
.rt {
  position: fixed;
  right: 0;
  width: 500px;
  top: 80px;
  height: 100%;
  z-index: 10;
}
.btm {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(calc(100% - 90px) / 3 - calc(28px / 3) + 50px) !important;
  z-index: 10;
}
.switch-buttons {
  margin-top: 10px;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  div {
    background: url("@/assets/images/index/icon_yier@2x.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: 4px;
    width: calc(100% / 4 - calc(12px / 3));
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    cursor: pointer;
    &:last-child {
      margin-right: 0;
    }
    &:hover,
    &.active {
      color: rgba(255, 255, 255, 1);
      background: url("@/assets/images/index/icon_yiyi@2x.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}

::v-deep .amap-marker-label {
  border: none;
  background-color: transparent;
  font-size: 14px !important;
  line-height: 14px !important;
  top: 2% !important;
  left: 10% !important;
}
</style>