<template>
  <div class="wrapper enseDetail gis">
    <div class="flexBox">
      <div class="flexBox-item">
        <div class="enterDetail">
          <h3>*企业注册信息-高德*</h3>
          <div class="enterDetail-item">
            <span class="itit">单位名称必填：</span>
            {{editForm.unitName}}
          </div>
          <div class="enterDetail-item">
            <span class="itit">统一社会信用代码：</span>
            {{editForm.orgCode}}
          </div>
          <div class="enterDetail-item">
            <span class="itit">法定代表人：</span>
            {{editForm.legalPerson}}
          </div>
          <div class="enterDetail-item">
            <span class="itit">法人邮箱：</span>
            {{editForm.legalPersonEmail}}
          </div>
          <div class="enterDetail-item">
            <span class="itit">所属区域：</span>
            <City :valueqv="cityval" :disabled="true"></City>
          </div>
          <div class="enterDetail-item">
            <span class="itit">所属街道：</span>
            {{editForm.streetName}}
          </div>
          <div class="enterDetail-item">
            <span class="itit">单位注册地址：</span>
            {{editForm.regAddress}}
          </div>
          <div class="enterDetail-item">
            <span class="itit">生产经营地址：</span>
            {{editForm.runAddress}}
          </div>
          <div class="enterDetail-item">
            <span class="itit">法人手机：</span>
            {{editForm.legalPersonPhone}}
          </div>
          <div class="enterDetail-item">
            <span class="itit">营业执照：</span>
            <span
              class="dbtn sd qiCr"
              v-if="editForm.viewOrgFilePath"
              @click="checkFile(editForm.viewOrgFilePath)"
            >
              <i class="el-icon el-icon-view"></i>查看
            </span>
          </div>
          <div class="enterDetail-item">
            <span class="itit">授权书：</span>
            <span
              class="dbtn sd qiCr"
              v-if="editForm.viewAuthorizeFile"
              @click="checkFile(editForm.viewAuthorizeFile)"
            >
              <i class="el-icon el-icon-view"></i>查看
            </span>
          </div>
          <div class="enterDetail-item">
            <span class="itit">管理员姓名：</span>
            {{editForm.userName}}
          </div>
          <div class="enterDetail-item">
            <span class="itit">管理员身份证：</span>
            {{editForm.idCard}}
          </div>
          <div class="enterDetail-item">
            <span class="itit">管理员Email：</span>
            {{editForm.email}}
          </div>
          <div class="enterDetail-item">
            <span class="itit">管理员手机：</span>
            {{editForm.mobliePhone}}
          </div>
          <!-- <h3>
            <span class="dbtn dg fr" @click="$router.push('/EnseList')">
              <i class="el-icon-d-arrow-left"></i> 返回企业列表
            </span>
          </h3>-->
        </div>
      </div>
      <div class="flexBox-item">
        <el-row>
          <el-checkbox
            @change="handleCheckAllChange"
            :indeterminate="isIndeterminate"
            v-model="checkAll"
          >全选</el-checkbox>
          <el-checkbox-group v-model="checkList" @change="CheckChange">
            <el-checkbox label="1">
              企业辅料
              <img src="@/assets/mark/mark05.png" width="20" />
            </el-checkbox>
            <el-checkbox label="2">
              生产设备
              <img src="@/assets/mark/mark03.png" width="20" />
            </el-checkbox>
            <el-checkbox label="3">
              企业产品
              <img src="@/assets/mark/mark01.png" width="20" />
            </el-checkbox>
            <el-checkbox label="4">
              应急物资
              <img src="@/assets/mark/mark02.png" width="20" />
            </el-checkbox>
            <el-checkbox label="5">
              监控设备
              <img src="@/assets/mark/markjk.png" width="25" />
            </el-checkbox>
            <el-checkbox label="6">
              传感设备
              <img src="@/assets/mark/markcgq.png" width="25" />
            </el-checkbox>
          </el-checkbox-group>
        </el-row>
        <div id="mapbox">
          <MouseTool v-if="toolVisble" :MAP="MAP" :toolobj="toolobj" :mouseTool="mouseTool"></MouseTool>
          <el-amap
            ref="map"
            vid="amap"
            :plugin="mapOption.plugin"
            :center="mapOption.center"
            :events="mapOption.events"
            :zoom="mapOption.zoom"
            :amap-manager="amapManager"
          >
            <template v-if="markers.length > 0">
              <el-amap-marker
                v-for="(marker, index) in markers"
                :key="index"
                :content="marker.content"
                :position="marker.position"
                :events="marker.events"
                :label="marker.label"
                :visible="marker.visible"
                :offset="marker.offset"
              ></el-amap-marker>
            </template>
            <el-amap-info-window
              v-if="currentWindow"
              :position="currentWindow.position"
              :content="currentWindow.content"
              :visible="currentWindow.visible"
              :events="currentWindow.events"
              :close-when-click-map="true"
            ></el-amap-info-window>
          </el-amap>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import METHOD from "@/utils/methods";
import City from "@/components/city.vue";
import MouseTool from "@/components/mouseTool.vue";
import "@/utils/VamapLoad.ts";
import VueAMap, { AMapManager } from "vue-amap";
@Component({
  components: { City, MouseTool },
})
export default class EnseListDetail extends Vue {
  @Provide() enterpriseId: string = "";
  @Provide() cityval: any = [];
  @Provide() editForm: any = {};
  @Provide() checkList: any = ["1", "2", "3", "4", "5", "6"];
  @Provide() checkListOpt: any = ["1", "2", "3", "4", "5", "6"];
  @Provide() isIndeterminate: boolean = false;
  @Provide() checkAll: boolean = true;
  /* 地图 */
  @Provide() mapOption: any = {
    plugin: [
      {
        pName: "MapType",
        defaultType: 1,
      },
      {
        pName: "ToolBar",
      },
    ],
    center: [115, 28],
    zoom: 10,
    events: {},
  };
  @Provide() markers: any = [];
  @Provide() deviceDataArr: any = [];
  @Provide() goodsDataArr: any = [];
  @Provide() mapData: any = [];
  @Provide() windowsArr: any = [];
  @Provide() currentWindow: any = "";
  @Provide() amapManager: any = new VueAMap.AMapManager();

  @Provide() MAP: any;
  @Provide() toolobj: any;
  @Provide() mouseTool: any; //测量工具
  @Provide() toolVisble: boolean = false;

  /*获取物品*/
  getMapDataA() {
    let that = this;
    return new Promise((resolve, reject) => {
      METHOD.axiosPost(
        that,
        `/enterpriseGoods/selectEnterpriseGoodsList/${that.enterpriseId}`,
        { page: 1, size: 10000 },
        (res: any) => {
          if (res.code == 0) {
            resolve(res.data.pageData);
          }
        }
      );
    });
  }
  /*获取安全设备*/
  getMapDataB() {
    let that = this;
    return new Promise((resolve, reject) => {
      METHOD.axiosPost(
        that,
        `/safetyDeviceInfo/selectSafetyDeviceInfoList/${that.enterpriseId}`,
        { page: 1, size: 10000 },
        (res: any) => {
          if (res.code == 0) {
            let mapData = res.data.pageData;
            resolve(res.data.pageData);
          }
        }
      );
    });
  }
  addMarksToMap() {
    let that = this;
    Promise.all([that.getMapDataA(), that.getMapDataB()]).then(
      ([res1, res2]) => {
        let mapData = [...res1, ...res2];
        if (mapData.length > 0) {
          let latSum = 0;
          let lngSum = 0;
          mapData.forEach((ele: any, index: any) => {
            that.addMark(ele, index);
            lngSum += ele.longitude;
            latSum += ele.latitude;
          });
          that.mapOption.center = [
            lngSum / mapData.length,
            latSum / mapData.length,
          ];
        } else {
          that.$message.warning("没有设备及物品信息！");
        }
      }
    );
  }
  addMark(obj: any, index: any) {
    let icon,
      that = this;
    switch (obj.dataType) {
      case "3":
        icon = require("@/assets/mark/mark01.png");
        break;
      case "4":
        icon = require("@/assets/mark/mark02.png");
        break;
      case "2":
        icon = require("@/assets/mark/mark03.png");
        break;
      case "1":
        icon = require("@/assets/mark/mark05.png");
        break;
      case "5":
        icon = require("@/assets/mark/markjk.png");
        break;
      case "6":
        icon = require("@/assets/mark/markcgq.png");
        break;
    }
    let markoption = {
      vid: obj.dataType,
      position: [obj.longitude, obj.latitude],
      content: ` <img src="${icon}" width="25">`,
      label: { content: obj.goodsName || obj.deviceName, offset: [28, -7] },
      offset: [-13, -37],
      events: {
        click: () => {
          that.windowsArr.forEach((ele: any) => {
            ele.visible = false;
          });
          that.$nextTick(() => {
            that.currentWindow = that.windowsArr[index];
            that.currentWindow.visible = true;
          });
        },
      },
      visible: true,
    };
    that.markers.push(markoption);
    let htmlA =
      `<div class="windowDg"><h3>详细信息</h3>` +
      `<p><span>名称:</span>${obj.goodsName}</p>` +
      `<p><span>编号:</span>${obj.number}</p>` +
      `<p><span>介绍:</span>${obj.goodsInfo}</p>` +
      `<p><span>物品类型:</span>${obj.category}</p>` +
      `<p><span>是否是重大危险源:</span>${
        obj.isBigDanger == 1 ? "是" : "否"
      }</p>` +
      `<p><span>联系人:</span>${obj.contacts}</p>` +
      `<p><span>联系电话:</span>${obj.phone}</p>` +
      `<p><span>库存数量:</span>${obj.stockNum}</p>` +
      `<p><span>类型:</span>${obj.category}</p>` +
      `<p><span>仓库编号:</span>${obj.warehouseNum}</p>` +
      `<p><span>危险等级:</span>${obj.dangerGrade}</p>` +
      `<p><span>所在厂区位置:</span>${obj.factoryLocation}</p></div>`;
    let htmlB =
      `<div class="windowDg"><h3>详细信息</h3>` +
      `<p><span>设备名称:</span>${obj.deviceName}</p>` +
      `<p><span>设备编号:</span>${obj.deviceNumber}</p>` +
      `<p><span>设备短号:</span>${obj.shortNum}</p>` +
      `<p><span>设备介绍:</span>${obj.deviceInfo}</p>` +
      `<p><span>设备IP:</span>${obj.deviceIp}</p>` +
      `<p><span>是否是重大危险源:</span>${
        obj.isBigDanger == 1 ? "是" : "否"
      }</p>` +
      `<p><span>联系人:</span>${obj.contacts}</p>` +
      `<p><span>危险等级:</span>${obj.dangerGrade}</p>` +
      `<p><span>所在位置:</span>${obj.factoryLocation}</p></div>`;
    let html = obj.dataType == 5 || obj.dataType == 6 ? htmlB : htmlA;
    let window = {
      position: [obj.longitude, obj.latitude],
      content: html,
      visible: false,
    };
    that.windowsArr.push(window);
  }
  getDetail() {
    let that = this;
    METHOD.axiosGet(
      that,
      `/enterpriseInfo/queryEnterpriseInfoById/${that.enterpriseId}`,
      function (res: any) {
        if (res.code == 0) {
          that.editForm = res.data;
          if (that.editForm.provinceId) {
            that.cityval = [
              that.editForm.provinceId,
              that.editForm.cityId,
              that.editForm.countyId,
            ];
          }
          that.$nextTick(() => {
            that.mapOption.center = [
              that.editForm.longitude,
              that.editForm.latitude,
            ];
          });
        }
      }
    );
  }
  checkFile(url: any) {
    window.open(METHOD.URL + url, "_blank");
  }
  /*radio group*/
  CheckChange(val: any) {
    let that = this;
    that.markers.forEach((ele: any, inde: any) => {
      if (val.indexOf(ele.vid) > -1) {
        ele.visible = true;
      } else {
        ele.visible = false;
      }
    });
    let len = that.checkListOpt.length;
    that.checkAll = val.length == len;
    that.isIndeterminate = val.length > 0 && val.length < len;
  }
  handleCheckAllChange(val: any) {
    let that = this;
    that.checkList = val ? [...that.checkListOpt] : [];
    that.isIndeterminate = false;
    that.markers.forEach((ele: any, inde: any) => {
      if (val) {
        ele.visible = true;
      } else {
        ele.visible = false;
      }
    });
  }

  initMap() {
    let that = this;
    that.mapOption.events = {
      init(map: any) {
        that.MAP = map;
        let iconFlag = require("@/assets/flag.png");
        that.mouseTool = new AMap.MouseTool(map);
        let mouseTool = that.mouseTool;
        that.toolobj = {
          drawMarker: function () {
            //标记
            mouseTool.marker({
              id: "flag",
              icon: new AMap.Icon({
                size: [128, 128],
                image: iconFlag,
                imageSize: [60, 60],
              }),
              zIndex: 9999,
            });
          },
          drawPolyline() {
            //线段
            mouseTool.polyline({
              strokeColor: "#3366FF",
              strokeOpacity: 1,
              strokeWeight: 6,
              strokeStyle: "solid",
            });
          },
          drawCircle() {
            //圆形
            mouseTool.circle({
              strokeColor: "#FF33FF",
              strokeOpacity: 1,
              strokeWeight: 4,
              fillColor: "#1791fc",
              fillOpacity: 0.4,
              strokeStyle: "solid",
            });
          },
          drawPolygon() {
            //多边形
            mouseTool.polygon({
              strokeColor: "#0dec66",
              strokeOpacity: 1,
              strokeWeight: 4,
              strokeOpacity: 1,
              fillColor: "#ee6a38",
              fillOpacity: 0.3,
              strokeStyle: "solid",
            });
          },
          drawRule() {
            //测距
            let qiicon = require("@/assets/qi.png"),
              jingicon = require("@/assets/jing.png"),
              zhongicon = require("@/assets/zhong.png");
            mouseTool.rule({
              startMarkerOptions: {
                icon: new AMap.Icon({
                  size: new AMap.Size(128, 128),
                  imageSize: new AMap.Size(50, 50),
                  image: qiicon,
                }),
                offset: new AMap.Pixel(-25, -50),
              },
              endMarkerOptions: {
                icon: new AMap.Icon({
                  size: new AMap.Size(128, 128),
                  imageSize: new AMap.Size(40, 40),
                  image: zhongicon,
                }),
                offset: new AMap.Pixel(-20, -40),
              },
              midMarkerOptions: {
                icon: new AMap.Icon({
                  size: new AMap.Size(128, 128),
                  imageSize: new AMap.Size(40, 40),
                  image: jingicon,
                }),
                offset: new AMap.Pixel(-20, -40),
              },
              lineOptions: {
                strokeStyle: "solid",
                strokeColor: "#FF33FF",
                strokeOpacity: 1,
                strokeWeight: 3,
              },
            });
          },
          drawMeasureArea() {
            //面积
            mouseTool.measureArea({
              strokeColor: "#80d8ff",
              fillColor: "#80d8ff",
              fillOpacity: 0.5,
            });
          },
        };
        that.toolVisble = true;
      },
    };
  }
  created() {
    this.enterpriseId = METHOD.enterpriseId;
    this.initMap();
    this.getDetail();
    this.addMarksToMap();
  }
  mounted() {}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
#mapbox {
  width: 100%;
  position: relative;
}
@media screen and (min-width: 1500px) {
  #mapbox {
    height: calc(100% - 46px);
  }
}
@media screen and (max-width: 1500px) {
  #mapbox {
    height: calc(100% - 80px);
  }
}
.enterDetail {
  .el-row {
    height: 100%;
  }
}
main > div {
  padding: 10px;
  box-sizing: border-box;
}
.flexBox .flexBox-item:nth-child(2) {
  padding-left: 10px;
  border-left: 1px solid #eeeeee;
}
.gis {
  .el-tabs--border-card > .el-tabs__content {
    padding: 5px;
  }
  .el-tabs__item {
    padding: 0 10px;
  }
}
</style>
<style lang="scss" scoped>
.enterDetail {
  border: none;
}
.enterDetail .enterDetail-item {
  width: 100%;
}
</style>
