<template>
  <div class="home_manage cm-layout">
    <!-- <div class="m-view">
			<cu-amap 
				ref="amap" 
				:options="amapOptions()"
			/>
			<div class="b_0">
				<ul>
					<li><span>尾矿库名称：</span><span>{{unitInfo.tailingname}}</span></li>
					<li><span>尾矿库编号：</span><span>{{unitInfo.tailingno}}</span></li>
					<li><span>尾矿库地址：</span><span>{{unitInfo.address}}</span></li>
					<li><span>值班电话：</span><span>{{unitInfo.ondutytel}}</span></li>
					<li><span>安全负责人姓名：</span><span>{{unitInfo.securityofficer}}</span></li>
					<li><span>安全负责人电话：</span><span>{{unitInfo.securityofficertel}}</span></li>
					<li><span>运行状态：</span><span>{{unitInfo.operatingstatus}}</span></li>
					<li><span>安全度：</span><span>{{unitInfo.safetytypeno}}</span></li>
				</ul>
			</div>
		</div> -->
    <div class="b_0">
      <ul>
        <li>
          <span>尾矿库名称：</span><span>{{ unitInfo.tailingname }}</span>
        </li>
        <li>
          <span>尾矿库编号：</span><span>{{ unitInfo.tailingno }}</span>
        </li>
        <li>
          <span>尾矿库地址：</span><span>{{ unitInfo.address }}</span>
        </li>
        <li>
          <span>值班电话：</span><span>{{ unitInfo.ondutytel }}</span>
        </li>
        <li>
          <span>安全负责人姓名：</span
          ><span>{{ unitInfo.securityofficer }}</span>
        </li>
        <li>
          <span>安全负责人电话：</span
          ><span>{{ unitInfo.securityofficertel }}</span>
        </li>
        <li>
          <span>运行状态：</span><span>{{ unitInfo.operatingstatus }}</span>
        </li>
        <li>
          <span>安全度：</span><span>{{ unitInfo.safetytypeno }}</span>
        </li>
      </ul>
    </div>
    <iframe
      src="model/index.html"
      style="width: 100%; height: 100%; border: none;"
      frameborder="0"
    ></iframe>
  </div>
</template>

<script>
import { Tools } from "@/assets/js/common.js";
import { reqApi, Config } from "@/assets/js/httpApi.js";
import cuAmap from "@/components/AMap";
export default {
  name: "Dashboard",
  components: { cuAmap },
  data() {
    return {
      query: {
        page: 1,
        size: 10,
        total: 0,
        sort: "date,desc"
      },

      unitInfo: {
        tailingname: "",
        tailingno: "",
        address: "",
        ondutytel: "",
        securityofficer: "",
        securityofficertel: "",
        operatingstatus: "",
        safetytypeno: ""
      }
      //UnitList:[],
    };
  },
  mounted() {
    var that = this;
    this.$nextTick(() => {
      this.pageApi = Config.getModuleInfo(this);

      //this.loadData();
    });
  },
  methods: {
    loadData() {},

    amapOptions(cmap) {
      var self = this;
      /* var disCountry = new AMap.DistrictLayer.World({
                zIndex: 1,
                rejectMapMask: true
            }); */
      return {
        zoom: 6,
        center: [107.260044, 36.737982],
        //showLabel: true,
        //pitch: 40,
        satellite: true,
        /* layers:[
                    new AMap.TileLayer.RoadNet({
                        zIndex:7
                    }),
                    disCountry,
                    new AMap.TileLayer.Satellite()
                ], */
        onload: function(cmap) {
          self.cmap = cmap;
          self.getUnitList(cmap);
        },
        click: function(e, cmap) {}
      };
    },

    getUnitList(cmap) {
      var self = this;
      reqApi.common
        .requstEdge("get", "tab/tailpondinfor", { page: 0, size: 10 })
        .then(res => {
          var body = res.body || {},
            list = body.list || [],
            len = list.length;
          self.UnitList = list;

          for (var i = 0; i < len; i++) {
            var item = list[i];
            var marker = cmap.addMarker({
              //icon:'red1',
              lnglat: [item.longitude, item.latitude],
              title: item["address"],
              extData: { name: item["tailingname"], index: i }
            });

            if (item.defaults) {
              this.setUnitInfo(item);

              // 地图设置
              cmap.setCenter([item.longitude, item.latitude]);
              cmap.setTargetMarker(marker);
              marker && marker.setIcon(cmap.icons.red1);
            }

            marker &&
              marker.on("click", function(e) {
                var lnglat = e.target.getPosition(),
                  extData = e.target.getExtData();
                var unitItem = self.UnitList[extData.index];

                var infoBox = document.createElement("div");
                infoBox.style.cssText = "display:flex;align-items:center;";
                infoBox.innerHTML =
                  "<span>" +
                  extData.name +
                  '</span><a class="el-icon-picture" style="margin-left:10px;color:#1890FF;font-size:20px;"></a>';
                // moer
                infoBox.onclick = function(e) {
                  var tag = e.target || e.srcElement;
                  if (tag.nodeName === "A") {
                    var tailingno = unitItem.tailingno;
                    self.openMonitorPoint(tailingno);
                  }
                };

                var InfoWindow = cmap.createInfoWindow({
                  offset: new AMap.Pixel(0, -33),
                  content: infoBox
                  //anchor: 'bottom-center',
                });
                InfoWindow.open(InfoWindow.Map, lnglat);

                // 更新窗口
                self.setUnitInfo(unitItem);
              });

            marker &&
              marker.on("dblclick", function(e) {
                var extData = e.target.getExtData(),
                  lnglat = e.target.getPosition();
                var index = extData.index,
                  tagMarker = cmap.getTargetMarker();
                var unitItem = self.UnitList[index];
                if (tagMarker !== e.target) {
                  // 请求切换尾矿库接口
                  self.pageApi
                    .switchPond({ tailingno: unitItem.tailingno })
                    .then(res => {
                      if (res.code === 200) {
                        // 重置中心点
                        //cmap.setCenter([unitItem.longitude, unitItem.latitude]);

                        /* // 清除原标记样式
									tagMarker.setIcon(cmap.icons.Default1);

									// 设置新标记样式
									e.target.setIcon(cmap.icons.red1);
									cmap.setTargetMarker(e.target);
									
									// 设置数据
									self.setUnitInfo(unitItem); */
                        window.location.reload();
                      }
                    });
                }
              });
          }
        });
    },
    openMonitorPoint(tailingno) {
      var loading = this.$loading({
        lock: true,
        text: "请稍后.....",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      reqApi.common
        .requstEdge("get", "web/monitorchart/tailingno", {
          tailingno: tailingno
        })
        .then(res => {
          loading.close();
          var body = res.body || [];
          if (body.chart && body.chart.picture) {
            qf.UI.popupLayer({
              //title:'<div>标题</div>',
              html:
                '<div class="monitor-points" style="width:13rem;height:8rem;margin-top:20px;"><div class="img-box"><img id="drawingImg"></div><div class="cview_ctn wkk-ctn"><ul></ul></div></div>',
              onload: function(el) {
                var box = el.firstElementChild;
                var monitorPoint = new qf.UI.pointCharts({
                  chartsBox: box,
                  width: box.offsetWidth,
                  height: box.offsetHeight
                });
                monitorPoint.setBackground(body.chart.picture);
                monitorPoint.createPoints(body.points, body.chart);
              }
            });
          } else {
            qf.UI.popupLayer({
              title: "提示",
              html: "暂无数据！",
              confirmText: "确定"
            });
          }
        });
    },
    setUnitInfo(item) {
      this.unitInfo["tailingname"] = item["tailingname"];
      this.unitInfo["tailingno"] = item["tailingno"];
      this.unitInfo["address"] = item["address"];
      this.unitInfo["ondutytel"] = item["ondutytel"];
      this.unitInfo["securityofficer"] = item["securityofficer"];
      this.unitInfo["securityofficertel"] = item["securityofficertel"];
      this.operatingstatus = item["operatingstatus"];
      this.safetytypeno = item["safetytypeno"];

      // 请求数据字典
      this.reqSelectDict();
    },
    reqSelectDict() {
      var Dict = reqApi.system.pondManage.Dict,
        self = this;
      if (typeof Dict.selectList.damstocktypeno === "function") {
        Dict.selectList.damstocktypeno.call(Dict).then(function(res) {
          self.operatDict = Tools.arrayJsonToJson(
            Dict.selectList.operatingstatus,
            "name",
            "value"
          );
          self.safetyDict = Tools.arrayJsonToJson(
            Dict.selectList.safetytypeno,
            "name",
            "value"
          );
          self.unitInfo["operatingstatus"] =
            self.operatDict[self.operatingstatus];
          self.unitInfo["safetytypeno"] = self.safetyDict[self.safetytypeno];
        });
      } else {
        self.operatDict = Tools.arrayJsonToJson(
          Dict.selectList.operatingstatus,
          "name",
          "value"
        );
        self.safetyDict = Tools.arrayJsonToJson(
          Dict.selectList.safetytypeno,
          "name",
          "value"
        );
        self.unitInfo["operatingstatus"] =
          self.operatDict[self.operatingstatus];
        self.unitInfo["safetytypeno"] = self.safetyDict[self.safetytypeno];
      }
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scope>
.home_manage {
  position: relative;
  height: 100%;
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: center;
  //background:no-repeat bottom center url('~@/assets/images/layout/main_bg.png');background-size:100% 100%;

  .m-view {
    position: relative;
    width: 100%;
  }

  .b_0 {
    border: 1px solid #143d96;
    position: absolute;
    top: 0.2rem;
    left: 0.1rem;
    width: max-content;
    padding: 0.1rem;
    user-select: none;
    background-color: rgba(0, 16, 52, 0.7);
    border-radius: 0.12rem;
    line-height: 26px;
    li {
      span:first-child {
        color: #ccc;
      }
      span {
        color: #fff;
      }
    }
  }
}
.monitor-points {
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  user-select: none;
  font-family: serif;
  color: #444;
}
.monitor-points .img-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}
.monitor-points .img-box img {
  display: block;
  border: 0;
  max-height: 100%;
  max-width: 100%;
}
.monitor-points .wkk-ctn {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 20;
}
.monitor-points .wkk-ctn {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.monitor-points .wkk-ctn li {
  position: absolute;
}
.monitor-points .wkk-ctn li::marker {
  content: close-quote;
}
.monitor-points .wkk-ctn li i {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}
.monitor-points .wkk-ctn li.d_01 i {
  background-image: url("~@/assets/images/icon/d_01.png");
}
.monitor-points .wkk-ctn li.d_02 i {
  background-image: url("~@/assets/images/icon/d_02.png");
}
.monitor-points .wkk-ctn li.d_03 i {
  background-image: url("~@/assets/images/icon/d_03.png");
}
.monitor-points .wkk-ctn li.d_04 i {
  background-image: url("~@/assets/images/icon/d_04.png");
}
.monitor-points .wkk-ctn li.d_05 i {
  background-image: url("~@/assets/images/icon/d_05.png");
}
.monitor-points .wkk-ctn li.d_06 i {
  background-image: url("~@/assets/images/icon/d_06.png");
}
.monitor-points .wkk-ctn li.d_07 i {
  background-image: url("~@/assets/images/icon/d_07.png");
}
.monitor-points .wkk-ctn li.d_08 i {
  background-image: url("~@/assets/images/icon/d_08.png");
}
.monitor-points .wkk-ctn li > div {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.monitor-points .wkk-ctn li > div .text {
  position: absolute;
  padding: 0.0402rem;
  background-color: #fff;
  border-radius: 0.0643rem;
  line-height: 1.2;
  color: #1a688c;
  font-weight: bold;
}
.monitor-points .wkk-ctn .text h4 {
  text-align: center;
  color: #1284b3;
  font-weight: normal;
}
.monitor-points .wkk-ctn .text dd {
  display: block;
  line-height: 1;
  margin-top: 3px;
  font-size: 12px;
}
.monitor-points .wkk-ctn .text dd:before {
  font-size: 15px;
  margin-right: 3px;
}
.monitor-points .wkk-ctn .text .normal:before {
  font-size: 13px;
  margin-right: 1px;
}
.monitor-points .wkk-ctn .text .red {
  background-color: red;
  color: #fff;
}
.monitor-points .wkk-ctn .text .orange {
  background-color: orange;
  color: #fff;
}
.monitor-points .wkk-ctn .text .yellow {
  background-color: #e8cb08;
  color: #fff;
}
.monitor-points .wkk-ctn .text .blue {
  background-color: #0991ff;
  color: #fff;
}
.monitor-points .wkk-ctn .text .relieve {
  cursor: pointer;
}
.monitor-points .wkk-ctn .text .offline {
  color: #aaa;
}
.monitor-points .wkk-ctn .text .online {
  color: #000;
}
.monitor-points .wkk-ctn li > div .text:before {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  border-style: solid;
  border-width: 0.0643rem;
  border-color: transparent;
}
.monitor-points .wkk-ctn .up {
  top: 0;
  left: 0;
  height: 0;
  width: 100%;
}
.monitor-points .wkk-ctn .up .text {
  bottom: 0.0804rem;
  width: max-content;
}
.monitor-points .wkk-ctn .up .text:before {
  bottom: -0.1287rem;
  left: 50%;
  margin-left: -0.0643rem;
  border-color: #fff transparent transparent transparent;
}
.monitor-points .wkk-ctn .down {
  bottom: 0;
  left: 0;
  height: 0;
  width: 100%;
}
.monitor-points .wkk-ctn .down .text {
  top: 0.0804rem;
  width: max-content;
}
.monitor-points .wkk-ctn .down .text:before {
  top: -0.1287rem;
  left: 50%;
  margin-left: -0.0643rem;
  border-color: transparent transparent #fff transparent;
}
.monitor-points .wkk-ctn .left {
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
}
.monitor-points .wkk-ctn .left .text {
  right: 0.0804rem;
  width: max-content;
}
.monitor-points .wkk-ctn .left .text:before {
  top: 50%;
  right: -0.1287rem;
  margin-top: -0.0643rem;
  border-color: transparent transparent transparent #fff;
}
.monitor-points .wkk-ctn .right {
  top: 0;
  right: 0;
  height: 100%;
  width: 0;
}
.monitor-points .wkk-ctn .right .text {
  left: 0.0804rem;
  width: max-content;
}
.monitor-points .wkk-ctn .right .text:before {
  top: 50%;
  left: -0.1287rem;
  margin-top: -0.0643rem;
  border-color: transparent #fff transparent transparent;
}
</style>

<style lang="scss">
.home_manage {
  a.amap-logo {
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 0.35rem;
    width: 100%;
    &:before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 8px;
      height: 100%;
      width: 1.58rem;
      background: no-repeat top left url("~@/assets/images/logo_ks.png");
      background-size: 100% auto;
    }
    &:after {
      color: #5c8ff5;
      display: inline-block;
      font-weight: bold;
      //background-image:-webkit-linear-gradient(top, #8fe9ff, #3d8aff);
      background-image: -webkit-linear-gradient(top, #8affe1, #4193ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      content: "©  ⋅ 技术支持：威海晶合数字矿山技术有限公司";
    }
    img {
      display: none !important;
    }
  }
  .amap-copyright {
    display: none !important;
  }
}
</style>
