<template>
  <div class="wrapper">
    <span class="dot-left"></span>
    <div class="top display-default">
      <div class="left text ddd" :title="data.deviceName">
        {{ data.deviceName }}
      </div>
      <div class="right text">
        <img src="../../assets/images/closeBtn.png" alt="" @click="close" />
      </div>
    </div>
    <!-- 设备信息 -->
    <div class="content scrollStyle">
      <div class="eq-content display-default">
        <div class="text-wrapper">
          <div class="eq-text">
            设备类型：<span>{{ title }}</span>
          </div>
          <div class="eq-text">
            设备型号：<span>{{ data.deviceModel }}</span>
          </div>
          <div class="eq-text">
            所属管道：<span>{{ data.pipeName }}</span>
          </div>
          <div class="eq-text">
            物联网编号：<span>{{ data.iotNo }}</span>
          </div>
        </div>
        <div class="pic">
          <img v-bind:src="data.iconUrl" alt="" />
        </div>
      </div>
      <!-- 维修人员 -->
      <div class="maintain-content">
        <el-col :span="11">
          <div>
            <span>安装日期：</span>
            <span>{{
              moment(data.installationTime).format("YYYY-MM-DD")
            }}</span>
          </div>
        </el-col>

        <el-col :span="13">
          <div>
            <span>最后巡检日期：</span>
            <span>{{ data.inspectionTime ? data.inspectionTime : "-" }}</span>
          </div>
        </el-col>

        <div>
          <span>设备所在地址：</span>
          <span>{{ data.pipeAddr }}</span>
        </div>
        <div>
          <span>备注信息：</span>
          <span>{{ data.remarks }} </span>
        </div>
      </div>
    </div>

    <!-- 报警状态 -->
    <div class="warn-wrapper" v-if="true">
      <div class="warn-content">
        <div>
          报警状态：<span>报警({{ data.alarmType }})</span>
        </div>
        <div>
          详细信息：<span>{{ data.alarmValue ? data.alarmValue : "-" }}</span>
        </div>
        <div v-if="!orderId">
          工单编号：<span>{{ data.orderId }}</span>
        </div>
      </div>

      <template v-if="data.deviceType ==3 || data.deviceType==4">
          <div v-if="data.deviceType==3" class="windowwarn-content" style="
          border-bottom: 1px solid #e2e2e2;
          padding: 10px 0 2px 22px;
          height: 150px;padding-bottom: 2px;
          ">
            <el-col :span="11">
              <div class="windowwarn">
                标况累积量：<span class="standardConditionAccumulation"></span>
              </div>
            </el-col>
            <el-col :span="11">
              <div class="windowwarn">
                工况累积量：<span class="workingConditionAccumulation"></span>
              </div>
            </el-col>
            <el-col :span="11">
              <div  class="windowwarn">
                剩余量：<span class="residualQuantity"></span>
              </div>
            </el-col>
            <el-col :span="11">
              <div class="windowwarn">
                标况流量：<span class="standardConditionFlow"></span>
              </div>
            </el-col>
            <el-col :span="11">
              <div class="windowwarn">
                工况流量：<span class="workingConditionFlow"></span>
              </div>
            </el-col>
            <el-col :span="11">
              <div  class="windowwarn">
                温度：<span class="temperature"></span>
              </div>
            </el-col>
            <el-col :span="11">
              <div class="windowwarn">
                压力：<span class="pressure"></span>
              </div>
            </el-col>
            <el-col :span="15">
              <div class="windowwarn">
                上报时间：<span class="reportTime"></span>
              </div>
            </el-col>
          </div>
          <div v-if="data.deviceType==4" class="windowwarn-content" style="
          border-bottom: 1px solid #e2e2e2;
          padding: 10px 0 2px 22px;
          height: 70px;padding-bottom: 2px;
          ">
            <el-col :span="24">
              <div class="windowwarn">
                压力：<span class="pressure"></span>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="windowwarn">
                上报时间：<span class="reportTime"></span>
              </div>
            </el-col>
          </div>
      </template>



      <div class="btn">
        <span @mousedown.stop="deviceMore">
          <el-button class="elbtn" type="primary">设备详情</el-button>
        </span>
        <span v-if="orderId" @mousedown.stop="createWork">
          <el-button v-if="title == '压力表' || title == '流量计'" class="elbtn" type="primary">生成工单</el-button>
        </span>
        <span v-else @mousedown.stop="checkWork">
          <el-button class="elbtn" type="primary">查看工单</el-button>
        </span>

      </div>
    </div>
  </div>
</template>

<script>
  import { getWindowData } from "@/api/dataMonitoring/reportData";
  import moment from "moment";
  //line移入时的的infowindow
  export default {
    props: {
      obj: { typs: Object },
      title: "",
      data: {},
      map: null,
    },
    data() {
      return {
        deviceType: {
          1: "调压箱",
          2: "阀门井",
          3: "流量计",
          4: "智能燃气表",
        },
      };
    },
    mounted() {
      clearInterval(this.data.view.deviceTimer);

      if (this.data.deviceType == 3 || this.data.deviceType == 4) {
        this.getDataid();
        this.data.view.deviceTimer = setInterval(this.getDataid, 5000);
      }

    },
    computed: {
      orderId() {
        // 如果已经生成过工单，就不能再次生成了

        // return this.data.orderId ? false : true;
        return this.data.orderId ? false : true;
      },
    },
    methods: {
      moment,
      getDataid() {
        getWindowData(this.data.deviceId).then(response => {
          this.changeValue(response.data)

        })
      },
      changeValue(data) {
        const keyArr = Object.keys(data);
        keyArr.forEach((item) => {
          const dom = document.getElementsByClassName(item)[0];
          if (dom) {
            dom.innerHTML = data[item];
          }
        })
      },
      createWork() {
        // 控制外层弹框
        // console.log(this.data.view.$refs.CreateWork);
        this.data.view.$refs.CreateWork.alarmId = this.data.alarmId;
        this.data.view.$refs.CreateWork.open = true;
        this.data.view.$refs.CreateWork.gaoMap = this.data.view.gaoMap;
        // 改变外层回调
        // this.data.view.CreateWorkCallBack = this.CreateWorkCallBack;
        this.data.view.alarmObjChange({
          alarmId: this.data.alarmId,
          type: "device",
        });
      },
      close() {
        this.map.clearInfoWindow();
        this.data.class.view.domAllShow();
      },
      // CreateWorkCallBack(e) {
      //   // console.log("生成工单后传过来的参数", e);
      //   // console.log("markerCallBack");
      //   const marker = this.data.view.gaoMap.markers.filter((item) => {
      //     return item.getExtData().alarmId == this.data.alarmId;
      //   })[0];
      //   console.log("marer.getExtData()", marker.getExtData());
      //   let options = marker.getExtData();
      //   // 暂时传值，到时候回重新刷新
      //   options.orderId = e;
      //   marker.setExtData(options);
      // },
      deviceMore() {
        this.data.view.$router.push({
          path: "/dataMonitoring/alarmdetail",
          query: {
            alarmId: this.data.alarmId,
            dcviceType: this.deviceType[this.data.deviceType],
          },
        });
      },
      // 查看工单
      checkWork() {
        this.data.view.$router.push({
          path: "/workOrder/detail",
          query: {
            orderId: this.data.orderId,
          },
        });
      },
      changeA() {

      }
    },
    beforeDestroy() {
      // this.data.view.createWorkOpen = false;
      console.log("清空卸载")
    },

  };




</script>
<style lang="scss" scoped>
  .windowwarn-content{
    div{
      font-size: 14px;
      font-wwight: 400;
      .windowwarn{
        margin-bottom: 7px;
      }
    }
  }
  .wrapper {
    width: 406px;
    max-height: 600px;
    // background: #fff;
    background: rgba(7, 29, 51, 0.9);
    color: #fff;
    border-radius: 4px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);

    // overflow: hidden;
    .top {
      width: 100%;
      height: 51px;
      // background-color: #ff5a67;
      background-image: url(../../assets/images/redTopBg.png);
      background-size: 100% 100%;
      background-position: center;

      &:before {
        content: "";
        position: absolute;
        left: -20px;
        top: 5px;
        z-index: -1;
        width: 33px;
        height: 33px;
        background-image: url(../../assets/images/redLeftTriangle.png);
      }

      .text {
        font-weight: 600;
        font-size: 16px;
        color: #ffffff;
        line-height: 51px;
      }

      .left {
        padding-left: 22px;
      }

      .right {
        padding-right: 22px;

        img {
          cursor: pointer;
        }
      }
    }

    .content {
      position: relative;
      max-height: 300px;
      overflow: hidden;
      overflow-y: auto;
      padding-bottom: 2px;
      border-bottom: 1px solid #eeeeee;

      .eq-content {
        // min-height: 156px;
        box-sizing: border-box;
        padding: 13px 22px 0px 22px;

        // border-bottom: 1px solid #e2e2e2;
        .text-wrapper {
          padding-top: 1px;

          &>div {
            margin-bottom: 6px;
          }

          .eq-text {
            font-size: 14px;
            font-weight: 400;
            color: #fff;
            opacity: 1;

            &>span {
              vertical-align: top;
              display: inline-block;
              // white-space: nowrap;
              // text-overflow: ellipsis;
              // overflow: hidden;
              word-break: break-all;
              max-width: 100px;
            }
          }
        }

        .pic {
          width: 180px;
          height: 103px;

          // background-color: black;
          img {
            width: 100%;
            height: 100%;
            // cursor: pointer;
          }
        }
      }
    }

    .maintain-content {
      width: 100%;
      max-height: 119px;
      padding-left: 22px;
      // padding-right: 22px;
      // padding-bottom: 10px;
      // padding-top: 16px;
      box-sizing: border-box;

      // border-bottom: 1px solid #e2e2e2;
      &>div {
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 400;

        span {
          vertical-align: top;
          display: inline-block;
          word-break: break-all;
          max-width: 280px;
        }
      }
    }

    .warn-wrapper {
      .warn-content {
        box-sizing: border-box;
        padding: 10px 0 2px 22px;
        border-bottom: 1px solid #e2e2e2;
        color: #fe5966;

        &>div {
          font-size: 14px;
          font-weight: 400;
          margin-bottom: 8px;
        }
      }

      .btn {
        padding: 16px 0;
        text-align: center;

        span {
          display: inline-block;
          padding: 0 10px;

          .elbtn {
            background-color: #053b6a;
            box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
            width: 95px;
            height: 33px;
            // border: none;
          }
        }
      }
    }
  }

  .wrapperEditorPage {}

  .display-default {
    display: flex;
    justify-content: space-between;
  }
</style>
