<template>
  <div id="e_popup" class="e_popup">
    <div v-if="model.equip_type === 'camera'"
      class="equip_camera full-h full-w"
    >
      <!--        <div v-if="false" class="equip_camera full-h full-w">-->
      <!--        <div class="equip_camera full-h full-w">-->

      <div class="camera_header">
        {{ model.equipAddr || "暂无安装地址信息" }}
      </div>
      <div class="camera_main">

        <camera-video
          ref="cameraVideo"
          style="height: 100%; width: 100%"
          :videoData="model"
        />
      </div>
    </div>
    <div v-if="model.equip_type === 'weather'"
      class="equip_weather full-h full-w"
    >
      <div class="e_header">气象检测仪</div>
      <div class="e_main">
        <div class="left-image">
          <img
            style="height: 100%; width: 100%"
            alt="气象检测仪"
            :src="model.equipImgUrl"
          />
        </div>
        <div class="right">
          <div class="equip-type">
            <div class="detail-item"><span>设备名称</span>气象检测仪</div>

            <div class="detail-item">
              <span>气压</span>{{ model.pressure }} Kpa
            </div>
            <div class="detail-item">
              <span>设备地址</span>{{ model.equipIp||'暂无 IP 地址' }}
            </div>
            <div class="detail-item">
              <span>PM 2.5</span>{{ model.pm2dot5 }} ug/m²
            </div>
            <div class="detail-item">
              <span>在线情况</span
              >{{
                model.status === "0"
                  ? "离线"
                  : model.status === "1"
                  ? "在线"
                  : "未知"
              }}
            </div>
            <div class="detail-item">
              <span>PM 10</span>{{ model.pm10 }} ug/m²
            </div>
            <div class="detail-item">
              <span>风速</span>{{ model.windSpeed }} m/s
            </div>
            <div class="detail-item">
              <span>空气温度</span>{{ model.temperature }} ℃
            </div>
            <!--                        <div class="detail-item"><span>风向</span>{{ dict.equip_weather.windDir[model.windDirection] }}-->
            <!--                        </div>-->
            <div class="detail-item">
              <span>风向</span
              >{{ getNameByCode(model.windDirection, "Direction") }}风
            </div>
            <!--                        <div class="detail-item" :title="dict.equip_weather.vis[model.visibility]"><span style="margin-right: 20PX">大气能见度</span>{{-->
            <!--                            // dict.equip_weather.vis[model.visibility]-->
            <!--                            }}-->
            <!--                        </div>-->
            <div
              class="detail-item"
              :title="getNameByCode(model.visibility, 'Visibility')"
            >
              <span>大气能见度</span
              >{{ getNameByCode(model.visibility, "Visibility") }}
            </div>
            <div class="detail-item">
              <span>空气湿度</span>{{ model.humidity }} RH
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="model.equip_type === 'milli'" class="equip_milli full-h full-w">
      <!--        <div v-if="false" class="equip_milli full-h full-w">-->
      <!--        <div class="equip_milli full-h full-w">-->
      <div class="milli_header">毫米波雷达</div>
      <div class="milli_main">
        <div class="left-image">
          <img
            style="height: 100%; width: 100%"
            alt="毫米波雷达"
            :src="model.equipImgUrl"
          />
        </div>
        <div class="right">
          <div class="equip-type">
            <div class="detail-item"><span>设备名称</span>毫米波雷达</div>
            <div class="detail-item">
              <span>设备IP</span>{{ model.equipIp }}
            </div>
            <div class="detail-item">
              <span>设备厂商</span>{{ model.manufacturer }}
            </div>
            <div class="detail-item">
              <span>设备状态</span>{{ model.status === "0" ? "离线" : "在线" }}
            </div>
            <div class="detail-item">
              <span>数据传输</span
              >{{ model.dataTransferStatus === "0" ? "异常" : "正常" }}
            </div>
            <div class="detail-item" :title="model.equipAddr">
              <span>设备点位</span>{{ model.equipAddr }}
            </div>
            <div
              class="detail-item"
              :title="
                decToDms(model.wkt.split(',')[0], 'E') +
                '，' +
                decToDms(model.wkt.split(',')[1], 'N')
              "
            >
              <span>位置坐标</span
              >{{ decToDms(model.wkt.split(",")[0], "E") }}，{{
                decToDms(model.wkt.split(",")[1], "N")
              }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="model.equip_type === 'radar'" class="equip_radar full-h full-w">
      <!--        <div v-if="false" class="equip_radar full-h full-w">-->
      <!--        <div class="equip_radar full-h full-w">-->
      <div class="radar_header">激光雷达</div>
      <div class="radar_main">
        <div class="left-image">
          <img
            alt="激光雷达"
            style="height: 100%; width: 100%"
            :src="model.equipImgUrl"
          />
        </div>
        <div class="right">
          <div class="equip-type">
            <div class="detail-item"><span>设备名称</span>激光雷达</div>
            <div class="detail-item">
              <span>设备IP</span>{{ model.equipIp }}
            </div>
            <div class="detail-item">
              <span>设备厂商</span>{{ model.manufacturer }}
            </div>
            <div class="detail-item">
              <span>设备状态</span>{{ model.status === "0" ? "离线" : "在线" }}
            </div>
            <div class="detail-item">
              <span>数据传输</span
              >{{ model.dataTransferStatus === "0" ? "异常" : "正常" }}
            </div>
            <div class="detail-item" :title="model.equipAddr">
              <span>设备点位</span>{{ model.equipAddr }}
            </div>
            <div
              class="detail-item"
              :title="
                decToDms(model.wkt.split(',')[0], 'E') +
                '，' +
                decToDms(model.wkt.split(',')[1], 'N')
              "
            >
              <span>位置坐标</span
              >{{ decToDms(model.wkt.split(",")[0], "E") }}，{{
                decToDms(model.wkt.split(",")[1], "N")
              }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="model.equip_type === 'signal'" class="equip_sign full-h full-w">
      <!--        <div v-if="false" class="equip_sign full-h full-w">-->
      <!--        <div class="equip_sign full-h full-w">-->
      <div class="sign_header">信号机</div>
      <div class="sign_main">
        <CrossControl :cross-control-data="crossPropData" />
      </div>
    </div>
  </div>
</template>

<script>
import CameraVideo from "../../../components/Standard/cameraVideo.vue";
import CrossControl from "../../../components/CrossControl/crossControl.vue";
import store from "../../../store";
export default {
  name: "passerbyPopup",
  props: ["model"],
  components: { CrossControl, CameraVideo },
  data() {
    return {
      dictVisbility: [],
      dictDirection: [],
      videoURL: null,
    };
  },
  created() {
    let queue = [];
    let needDicts = ["Visibility", "Direction"];
    for (let item of needDicts) {
      queue.push(
        store.dispatch("QUERY_DICT", {
          type: item,
        })
      );
    }
    Promise.all(queue);
  },
  mounted() {
    console.log("equp", this.model);
  },
  methods: {
    getOptions(name) {
      return store.state.dicts[name];
    },
    getNameByCode(code, type) {
      console.log(store);
      for (let item of store.state.dicts[type]) {
        console.log(item);
        if (item.code == code) {
          return item.name;
        }
      }
      return "未定义";
    },
    // 经纬度转度分秒
    decToDms(deg, nOrW) {
      let d = Math.floor(deg);
      let minFloat = (deg - d) * 60;
      let m = Math.floor(minFloat);
      let s = (minFloat - m) * 60;
      return d + "°" + m + "'" + s.toFixed(2) + '"' + nOrW;
    },
    destroyEquipVideo() {
      this.$refs.cameraVideo?.destroy();
    },
  },
  computed: {
    crossPropData() {
      return {
        crossName: this.model.crossName,
        crossId: this.model.crossId,
      };
    },
  },
  beforeDestroy() {
    this.destroyEquipVideo()
    console.log("equipment popup destroy...");
  },
};
</script>

<style lang='less' scoped>

.e_popup {
  background: rgba(15, 38, 69, 1);

  .e_header {
    height: 43PX;
    font-size: 18PX;
    font-weight: 700;
    padding: 12PX 0 0 12PX;
    display: flex;
    align-items: center;
    color: white;
    background: url("../../../assets/images/holo/popupTop.png");
    background-size: 100%;
  }

  .e_main {
    height: calc(100% - 43PX);
    border: 1PX solid #037bb2;
    padding: 18PX;
    display: flex;
  }
}

.equip_weather {
  width: 540PX;

  span {
    width: 70PX;
    margin-right: 12PX;
  }

  .e_header {
    height: 43PX;
    font-size: 18PX;
    font-weight: 700;
    padding: 12PX 0 0 12PX;
    display: flex;
    align-items: center;
    color: white;
    background: url("../../../assets/images/holo/popupTop.png");
    background-size: 100%;
  }

  .e_main {
    height: 211PX;
    border: 1PX solid #037bb2;
    padding: 18PX;
    display: flex;
  }

  .left-image {
    margin-right: 18PX;
    width: 130PX;
    min-width: 130PX;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .right {
    .equip-type {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      height: 100%;

      .detail-item {
        flex: 0 0 48%;
        height: 26PX;
        line-height: 30PX;
        color: white;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-height: 100%;
        font-size: 14PX;

        span {
          display: inline-block;
          color: rgba(155, 177, 212, 1);
          text-align: justify;
          text-align-last: justify;
        }
      }

      .f {
        flex: 0 0 100%;
      }
    }
  }
}

.equip_camera {
  width: 800PX;
  height: 475PX;
  overflow:hidden;

  .camera_header {
    height: 43PX;
    font-size: 18PX;
    font-weight: 700;
    padding: 12PX 0 0 12PX;
    display: flex;
    align-items: center;
    color: white;
    background: url("../../../assets/images/holo/popupTop.png");
    background-size: 100% 100%;
  }

  .camera_main {
    //height: 276PX;
    height: calc(100% - 43PX);
    border: 1PX solid #037bb2;
    //padding: 18PX;
    display: flex;
  }
}

.equip_milli {
  width: 434PX;

  span {
    width: 60PX;
    margin-right: 16PX;
  }

  .milli_header {
    height: 43PX;
    font-size: 18PX;
    font-weight: 700;
    padding: 12PX 0 0 12PX;
    display: flex;
    align-items: center;
    color: white;
    background: url("../../../assets/images/holo/popupTop.png");
    background-size: 100% 100%;
  }

  .milli_main {
    height: 211PX;
    border: 1PX solid #037bb2;
    padding: 18PX;
    display: flex;

    .left-image {
      margin-right: 18PX;
      width: 130PX;
      min-width: 130PX;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .right {
      width: calc(100% - 148PX);

      .equip-type {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;

        .detail-item {
          //height: 30PX;
          //line-height: 30PX;
          color: white;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          max-height: 100%;
          font-size: 14PX;

          span {
            display: inline-block;
            color: rgba(155, 177, 212, 1);
            text-align: justify;
            text-align-last: justify;
          }
        }
      }
    }
  }
}

.equip_radar {
  width: 434PX;

  span {
    width: 60PX;
    margin-right: 16PX;
  }

  .radar_header {
    height: 43PX;
    font-size: 18PX;
    font-weight: 700;
    padding: 12PX 0 0 12PX;
    display: flex;
    align-items: center;
    color: white;
    background: url("../../../assets/images/holo/popupTop.png");
    background-size: 100% 100%;
  }

  .radar_main {
    height: 211PX;
    border: 1PX solid #037bb2;
    padding: 18PX;
    display: flex;

    .left-image {
      margin-right: 18PX;
      width: 130PX;
      min-width: 130PX;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .right {
      width: calc(100% - 148PX);

      .equip-type {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;

        .detail-item {
          color: white;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          max-height: 100%;
          font-size: 14PX;

          span {
            display: inline-block;
            color: rgba(155, 177, 212, 1);
            text-align: justify;
            text-align-last: justify;
          }
        }
      }
    }
  }
}

.equip_sign {
  //width: 294PX;

  .sign_header {
    height: 43PX;
    font-size: 18PX;
    font-weight: 700;
    padding: 12PX 0 0 12PX;
    display: flex;
    align-items: center;
    color: white;
    background: url("../../../assets/images/holo/popupTop.png");
    background-size: 100% 100%;
  }

  .sign_main {
    //height: 359PX;
    border: 1PX solid #037bb2;
    //padding: 18PX;
    display: flex;

    .left-image {
      margin-right: 18PX;
      width: 130PX;
      min-width: 130PX;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .right {
      .equip-type {
        display: flex;
        flex-direction: column;

        .detail-item {
          height: 30PX;
          line-height: 30PX;
          color: white;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          max-height: 100%;
          font-size: 14PX;

          span {
            display: inline-block;
            color: rgba(155, 177, 212, 1);
            text-align: justify;
            text-align-last: justify;
          }
        }
      }
    }
  }
}
</style>
