<template>
  <div>
    <div style="width: 100vw; height: 100vh" id="container"></div>
    <!-- <div class="input-card" style='width: 24rem;'>
      <div class="input-item">
        <input type="radio" name='func' value='marker'><span class="input-text">画点</span>
        <input type="radio" name='func' value='polyline'><span class="input-text">画折线</span>
        <input type="radio" name='func' value='polygon'><span class="input-text" style='width:5rem;'>画多边形</span>
      </div>
      <div class="input-item">
        <input type="radio" name='func' value='rectangle'><span class="input-text">画矩形</span>
        <input type="radio" name='func' value='circle'><span class="input-text">画圆</span>
      </div>
      <div class="input-item">
        <input id="clear" type="button" class="btn" value="清除" />
        <input id="close" type="button" class="btn" value="关闭绘图" />
      </div>
    </div>-->
    <el-button
      type="primary"
      style="position: absolute; top: 100px; left: 75%"
      @click="addDevice"
      >新增</el-button
    >
    <el-button
      type="primary"
      style="position: absolute; top: 100px; left: 82%"
      @click="editDevice"
      >编辑</el-button
    >
    <el-button
      type="primary"
      style="position: absolute; top: 100px; left: 90%"
      @click="deleteDevice"
      >删除</el-button
    >
    <el-select
      v-model="value"
      placeholder="请选择..."
      @change="selectDeviceType"
      style="position: absolute; top: 150px; left: 75%"
      v-if="deviceType"
    >
      <el-option label="管道" value="1"></el-option>
      <el-option label="调压箱" value="2"></el-option>
      <el-option label="阀门井" value="3"></el-option>
      <el-option label="流量计" value="4"></el-option>
      <el-option label="值班人员" value="5"></el-option>
    </el-select>
  </div>
</template>
<script>
import gaodeMap from "utils/gaodeMap.js";
import { map, DEVICE_TYPE, mapOperateType } from "utils/gaodeMap.js";
import  { getAllDeviceInfo } from "@/api/device/deviceInfo";
export default {
  data() {
    return {
      gaoMap: null,
      deviceType: false,
      value: "",
      operateType: "",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        enterpriseId: null,
        pipeId: null,
        deviceName: null,
        deviceAddr: null,
        deviceModel: null,
        deviceType: null,
        longitude: null,
        latitude: null,
        iotNo: null,
        iconUrl: null,
        linkman: null,
        phone: null,
        installationTime: null,
        inspectionTime: null,
        remarks: null
      },
    };
  },
  mounted() {
    let gaoMap = new gaodeMap("石家庄");
    this.gaoMap = gaoMap;
    let path = [
      [
        [114.436698, 38.083306],
        [114.57952, 38.065468],
        [114.57952, 38.002732],
        [114.440131, 38.006519],
        [114.436698, 38.083306],
      ],
      [
        [114.528708, 38.075198],
        [114.530768, 38.00165],
      ],
    ];
    gaoMap.addPolyline(path);
    gaoMap.addMouseTool();
    this.getDeviceInfo();
  },
  methods: {
    addDevice() {
      this.deviceType = true;
      this.gaoMap.mapOperateType = "add";
      this.gaoMap.removeMarkerDragg();
    },
    editDevice() {
      this.deviceType = false;
      this.gaoMap.lineType =2;
      this.gaoMap.mapOperateType = "edit";
      this.gaoMap.addMarkerDragg();
    },
    deleteDevice() {
      this.deviceType = false;
      this.gaoMap.mapOperateType = "delete";
      this.gaoMap.removeMarkerDragg();
    },
    selectDeviceType(val) {
      // if("add" == this.operationType){
      this.gaoMap.draw(val);
      // }
      this.deviceType = false;
      this.value = "";
      // 如果选择的是新建管道
      if (val == 1) {
        this.gaoMap.lineType = 1;
        this.gaoMap.createNewLine();
      }
    },
    getDeviceInfo(){
      this.loading = true;
      getAllDeviceInfo(this.queryParams).then(response => {
        if(response.code == 200){
          for(var i = 0;i < response.data.length; i++){
            if("1" == response.data[i].deviceType){
              this.gaoMap.addMarker(DEVICE_TYPE.REGEULATORBOX,response.data[i])
            }
            if("2" == response.data[i].deviceType){
              this.gaoMap.addMarker(DEVICE_TYPE.VALUEWELL,response.data[i])
            }
            if("3" == response.data[i].deviceType){
              this.gaoMap.addMarker(DEVICE_TYPE.FLOWMETER,response.data[i])
            }
          }
        }
        this.loading = false;
      });

    }
  },
};
</script>
<style lang="scss" scoped>
.input-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border-radius: 0.25rem;
  width: 22rem;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.75rem 1.25rem;
}

.input-item {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 2.2rem;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0 0.5rem 0 0;
}
.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  background-color: transparent;
  background-image: none;
  color: #25a5f7;
  border-color: #25a5f7;
  padding: 0.25rem 0.5rem;
  line-height: 1.5;
  border-radius: 1rem;
  -webkit-appearance: button;
  cursor: pointer;
  width: 6rem;
  margin: 0 1rem 0 2rem;
}

.btn:hover {
  color: #fff;
  background-color: #25a5f7;
  border-color: #25a5f7;
}
.input-text {
  width: 4rem;
  margin-right: 1rem;
}
</style>

