<!--
 * @Author: your name
 * @Date: 2022-01-26 20:07:52
 * @LastEditTime: 2022-03-23 15:23:34
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE

 * @FilePath: /test/hello-world/src/views/components/deviceA.vue
-->
<template>
  <div class="devicea-wrapper">
    <div class="title">
      {{
      deviceData.deviceName ? deviceData.deviceName : deviceData.stationName
      }}
    </div>
    <div class="close" @click="close">
      <!-- <img src="@/assets/mapImages/closeBtn.png" alt="" /> -->
      <i class="el-icon-close" style="font-size:20px;color:#5dfefe;"></i>
    </div>
    <p style="background-image: linear-gradient(to right, #5dfefe, #071738); width:100%;height:1px;"></p>
    <div>
      <div class="top flex">
        <div class="top-left">
          <div class="group">
            <div class="left">所属公司：</div>
            <div class="right zzz">{{ companyType[deviceData.companyType] }}</div>
          </div>

          <div class="group">
            <div class="left">备注：</div>
            <div class="right zzz">{{ profile }}</div>
          </div>
        </div>
        <div class="top-center">
          <div class="group">
            <div class="left">设备类型：</div>
            <div class="right zzz">
              {{ deviceType[deviceData.iconType] }}
            </div>
          </div>
          <div class="group">
            <div class="left last">设备地址：</div>
            <div
              v-if="deviceData.deviceAddr"
              :title="deviceData.deviceAddr"
              class="right last zzz"
            >
              {{ deviceData.deviceAddr || "-" }}
            </div>
            <div
              v-else-if="deviceData.stationAddr"
              :title="deviceData.stationAddr"
              class="right last zzz"
            >
              {{ deviceData.stationAddr || "-" }}
            </div>
            <div class="right last zzz" v-else>-</div>
          </div>
        </div>
        <div class="top-right">
          <div class="left last">照片：</div>
          <el-image
            v-if="deviceData.iconUrl"
            style="width: 80px; height: 50px"
            :src="deviceData.iconUrl"
            :preview-src-list="[deviceData.iconUrl ]"
            :z-index="999999"
          >
          </el-image>
          <div class="imgtext" v-else>暂无图片</div>
        </div>
      </div>

      <!-- <div class="middle">{{ profile }}</div> -->

      <div class="foot">
        <div class="thead flex" v-if="list.length > 0">
          <div class="first">设备类型</div>
          <div>设备数量</div>
          <div>在线设备</div>
          <div>离线设备</div>
          <!-- <div>历史报警</div>
          <div>已处理报警</div> -->
          <div class="last">报警中</div>
        </div>
        <template v-if="list.length > 0">
          <div
            class="tbody flex"
            v-for="deviceData in list"
            :key="deviceData.inAlarm + Math.random()"
          >
            <div v-unValue class="first zzz">
              {{ typeList[deviceData.dataType] }}
            </div>
            <div v-unValue class="">{{ deviceData.numberPressureGauges }}</div>
            <div v-unValue class="">
              {{ deviceData.onlineEquipment }}
            </div>
            <div v-unValue class="">
              {{ deviceData.offlineEquipment }}
            </div>
            <!-- <div v-unValue class="">
              {{ deviceData.historicalAlarm }}
            </div>
            <div v-unValue class="">
              {{ deviceData.alarmProcessed }}
            </div> -->
            <div v-unValue class="last">
              {{ deviceData.inAlarm }}
            </div>
          </div>
        </template>
      </div>
    </div>

    <div style="width:100%;display: flex;">
      <div class="btn" v-if="list.length > 0">
        <div>感知设备</div>
      </div>
      <p style="width:83%;height:10px;background-color: #022346;margin-top: 22px;margin-left: -10px;"></p>
      <div @click="btnClick">
        <img  @click="flag = !flag" src="../../assets/second/box-down.png" :class="{ 'arrowTransform': !flag, 'arrowTransformReturn': flag}" alt="" style="width:30px;height:30px;margin-top: 12px;cursor: pointer;">
      </div>
    </div>

    <OtherCenter
      :title="centerTitle"
      :show="otherCenterShow"
      ref="otherCenter"
      :detcetorList="detcetorList"
      :userId="centerUserId"
      :total="centerTotal"
      :pageSize="5"
      v-show="!isShow"
    />
  </div>
</template>

<script>
  import {
    getTcqDevice,
  } from "@/api/bigWindowOld/getDevice";
  import { companyType, deviceType } from "@/utils/mapClassForBigOld/config.js";
  import { getTyxDevice, getFmDevice } from "@/api/bigWindowOld/getDevice.js";
  import OtherCenter from "@/components/bigWindowOld/OtherCenter.vue";
  export default {
    components: {
      OtherCenter,
    },
    data() {
      return {
        flag: true,
        isShow: true ,
        centerTitle: "",
        otherCenterShow: false,
        alarmTimer: null,
        detcetorList: [],
        centerUserId: null,
        centerTotal: null,
        userCenterShow: false,
        companyType,
        deviceType,
        profile: "暂无备注",
        typeList: {
          // 1压力表    2流量计  3探测器
          1: "压力表",
          2: "流量计",
          3: "工业探测器",
        },
        list: [
          // {
          //   numberPressureGauges: "-",
          //   onlineEquipment: "-",
          //   offlineEquipment: "-",
          //   historicalAlarm: "-",
          //   alarmProcessed: "-",
          //   inAlarm: "-",
          //   dataType: 1,
          // },
          // {
          //   numberPressureGauges: "-",
          //   onlineEquipment: "-",
          //   offlineEquipment: "-",
          //   historicalAlarm: "-",
          //   alarmProcessed: "-",
          //   inAlarm: "-",
          //   dataType: 2,
          // },
          // {
          //   numberPressureGauges: "-",
          //   onlineEquipment: "-",
          //   offlineEquipment: "-",
          //   historicalAlarm: "-",
          //   alarmProcessed: "-",
          //   inAlarm: "-",
          //   dataType: 3,
          // },
        ],
      };
    },
    computed: {
      prodTest() {
        return this.vueRoot.$store.state.user.systemSetting.prod_test;
      },
      company() {
        return this.vueRoot.$store.state.bigWindowCompany.company;
      },
    },
    mounted() {
      // 如果不是测试，而是真数据，就要用帧数据的东西
      if (this.prodTest != "test") {
        this.companyType = {};
        this.company.forEach((item) => {
          this.companyType[item.conpanyId] = item.companyName;
      });
      }
      // 当点开infowindow的时候，重新调接口
      this.myHttp();
      console.log(this.deviceData);
    },
    methods: {
      // 调压箱，阀门，场站睇下的设备
      getTcqDevice(queryParams, title) {
        console.log(queryParams);
        return getTcqDevice(queryParams).then((res) => {
          // console.log("queryParams", res);
          console.log("resresresresreszzzzzzzzzzzzzzz", res);

        this.detcetorList = res;
        this.centerUserId = queryParams.devId;
        // 总数据
        this.centerTotal = res.length;
        // this.$refs.userCenter.fade = "fade";
        this.userCenterShow = false;

        this.otherCenterShow = true;
        this.centerTitle = title;
        // if (res.detectorStatus === "在线"){
        //       return {'color':'red'}
        //   }
        // 传递回去
        return res.code;

      });
      },
      close() {
        this.mapClass.infowindowClose();
      },
      btnClick() {
        this.isShow = !this.isShow;
        // this.vueRoot.centerDataFunc(this.deviceData.pressureFlows);
        const title = this.deviceData.deviceName
          ? this.deviceData.deviceName
          : this.deviceData.stationName;

        this.getTcqDevice(
          { devId: this.deviceData.deviceId, relationDeviceType: 1,pageNum: 1, pageSize: 5, },
          title
        );
      },
      myHttp() {
        console.log(this.deviceData.iconType);

        if (this.deviceData.iconType == 2) {
          getTyxDevice({ deviceId: this.deviceData.deviceId }).then((res) => {
            // 过滤设备数为0的
            this.list = res.data[0].subordinateEquipmentList.filter(
            (item) => item.numberPressureGauges > 0
        );
          console.log("this.list333333333",this.list);
        });
        } else {
          getFmDevice({ deviceId: this.deviceData.deviceId }).then((res) => {
            // 过滤设备数为0的
            this.list = res.data[0].subordinateEquipmentList.filter(
            (item) => item.numberPressureGauges > 0
        );
        });
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .arrowTransform {
    transition: 0s;
    transform-origin: center;
    transform: rotateZ(180deg);
  }

  .arrowTransformReturn {
    transition: 0s;
    transform-origin: center;
    transform: rotateZ(0deg);
  }
  .devicea-wrapper {
    box-shadow: 0px 0px 10px #54e0ef inset;
    background-color: #071738;
    padding: 10px;
    position: relative;
    width: 670px;
    border-radius: 7px;
    .title {
      // padding-top: 10px;
      // padding-left: 10px;
      font-size: 14px;
      line-height: 14px;
      color: #ffffff;
    }
    .close {
      position: absolute;
      right: 10px;
      top: 5px;
      cursor: pointer;
    }

    .top {
      margin-top: 10px;
      margin-bottom: 10px;
      box-sizing: border-box;
      .top-left {
        flex: 1.8;
        .group {
          height: 30px;
          flex: 1;
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
          div {
            flex: 1;
            box-sizing: border-box;
            font-size: 14px;
            color: #ffffff;
            line-height: 30px;
            padding: 0 5px;
            &.last {
              border-bottom: none;
            }
          }
          .left {
            text-align: right;
          }
          .right {
            flex:2;
          }
        }
      }
      .top-center {
        flex: 1.8;
        .group {
          height: 30px;
          flex: 1;
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
          div {
            flex: 1;
            box-sizing: border-box;
            font-size: 14px;
            color: #ffffff;
            line-height: 30px;
            padding: 0 5px;
            &.last {
              border-bottom: none;
            }
          }
          .left {
            text-align: right;
          }
          .right {
            flex:2;
          }
        }
      }
      .top-right {
        flex: 1;
        display: flex;
        justify-content: center;
        div {
          width: 50px;
          font-size: 14px;
          color: #ffffff;
          &.last {
            border-bottom: none;
          }
        }
        .imgtext {
          color: #ffffff;
          font-size: 30px;
        }
      }
    }
    // .middle {
    //   width: 100%;
    //   padding: 5px;
    //   box-sizing: border-box;
    //   font-size: 14px;
    //   color: #ffffff;
    //   text-indent: 2em;
    //   margin-bottom: 10px;
    // }
    .foot {
      font-size: 14px;
      color: #ffffff;
      background: url('../../assets/second/box-bg.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 1px;
      .thead,
      .tbody {
        div {
          flex: 1;
          text-align: left;
          box-sizing: border-box;
          text-align: center;
          border: 1px solid #1b365d;
        }
        // .first {
        //   flex: 2;
        // }
        // .last {
        //   border-right: none;
        // }
      }
      .tbody {
        border-top: none;
      }
      // .thead {
      //   div {
      //     background-color: rgba(255, 255, 255, 0.1);
      //   }
      // }
    }

    .btn {
      position: relative;
      margin-top: 10px;
      div {
        font-size: 14px;
        color: #ffffff;
        background: url('../../assets/second/boxbtn-bg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 7px 15px;
      }
    }
    .flex {
      display: flex;
      justify-content: space-between;
    }
  }
</style>
