<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 class="chartsBox">
          <dv-charts :option="chartOption"></dv-charts>
        </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="25" />
            </el-checkbox>
            <el-checkbox label="2">
              生产设备
              <img src="@/assets/mark/mark03.png" width="25" />
            </el-checkbox>
            <el-checkbox label="3">
              企业产品
              <img src="@/assets/mark/mark01.png" width="25" />
            </el-checkbox>
            <el-checkbox label="4">
              应急物资
              <img src="@/assets/mark/mark02.png" width="25" />
            </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">
          <Search :MAP="MAP" :Mutil="Mutil" v-if="mapLoadDone"></Search>
          <DrawTool :MAP="MAP" v-if="mapLoadDone"></DrawTool>
        </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 DrawTool from "@/components/drawTool.vue";
import Search from "@/components/search.vue";
import Mutil from "@/utils/mapUtil.js";
import { Select } from "element-ui";

@Component({
  components: {
    City,
    DrawTool,
    Search,
  },
})
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() Mutil: any;
  @Provide() mapLoadDone = false;

  @Provide() mapData: any = [];
  @Provide() windowsArr: any = [];

  @Provide() MAP: any;
  @Provide() toolobj: any;
  @Provide() toolVisble: boolean = false;
  @Provide() chartOption: any = {};
  /* 获取各类型设备数量 */
  getStatiData() {
    let that = this;
    that.$nextTick(() => {
      that.chartOption = {
        title: {
          text: "设备数量柱状图",
        },
        xAxis: {
          name: "",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          name: "数量",
          data: "value",
        },
        series: [
          {
            data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
            type: "bar",
            label: {
              show: true,
              position: "top",
              offset: [0, -10],
              style: {
                fill: "#000",
                fontSize: 12
              },
            },
          },
        ],
      };
    });
    return;
    METHOD.axiosGet(
      that,
      `/dataStatistics/enterpriseDataStatistics/${METHOD.enterpriseId}`,
      function (res: any) {
        if (res.code == 0) {
        }
      }
    );
  }
  /*获取物品*/
  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);
          }
        }
      );
    });
  }
  /*获取企业详情*/
  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(() => {
            if (that.editForm.boundary) {
              that.Mutil.drawPloygon(JSON.parse(that.editForm.boundary));
            }
          });
        }
      }
    );
  }
  addMarksToMap() {
    let that = this;
    Promise.all([that.getMapDataA(), that.getMapDataB()]).then((iter) => {
      let res1: any = iter[0];
      let res2: any = iter[1];
      let mapData = [...res1, ...res2];
      that.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;
        });
        let mapcenter = [lngSum / mapData.length, latSum / mapData.length];
        that.Mutil.setViewF({
          center: mapcenter,
        });
      } 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;
    }
    that.Mutil.addMarkerToMap(
      obj.dataType,
      obj.goodsName,
      icon,
      [obj.longitude, obj.latitude],
      0.5,
      obj.id
    );
  }
  checkFile(url: any) {
    window.open(METHOD.URL + url, "_blank");
  }
  /*radio group*/
  CheckChange(val: any) {
    let that = this;
    that.checkListOpt.forEach((ele: any) => {
      if (val.indexOf(ele) == -1) that.Mutil.visibleMarks(false, ele);
      else that.Mutil.visibleMarks(true, ele);
    });

    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.checkListOpt.forEach((ele: any) => {
      if (val) that.Mutil.visibleMarks(true, ele);
      else that.Mutil.visibleMarks(false, ele);
    });
  }
  creatWindowHtml(obj: any) {
    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;
    return html;
  }
  getPopcon(id: any) {
    let that = this,
      aimArr = that.mapData.filter((ele: any) => ele.id == id);
    let htmlcon = that.creatWindowHtml(aimArr[0]);
    that.Mutil.addPopup(htmlcon, id, aimArr[0].longitude, aimArr[0].latitude);
  }
  created() {
    this.enterpriseId = METHOD.enterpriseId;
    this.getDetail();
    this.addMarksToMap();
    this.getStatiData();
  }
  mounted() {
    let that = this;
    that.mapLoadDone = true;
    that.Mutil = new Mutil("mapbox");
    that.MAP = that.Mutil.MAP;
    that.Mutil.mapSelectBind((evt: any) => {
      let id = evt.selected[0].get("did");
      if (id) that.getPopcon(id);
    });
  }
}
</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;
  height: 500px;
  overflow-y: auto;
}

.enterDetail .enterDetail-item {
  width: 100%;
}
.chartsBox {
  height: calc(100% - 500px);
}
</style>
