<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="设备详情"
    append-to-body
    @opened="openedEvents"
    width="1200px"
  >
    <div>
      <div class="title-label">
        <img src="@/assets/tower/arrow.png" alt="" />
        {{ deviceData.device_no }} /
        <span :class="[deviceData.is_online == 1 ? 'online' : '']">{{
          deviceData.is_online_text
        }}</span>
      </div>
      <div class="base-info">
        <div class="status-area">
          <div class="status-window">
            <div class="status-value">{{ deviceData.height }}</div>
            <div class="status-text">高度/m</div>
          </div>
          <div class="status-window">
            <div class="status-value">{{ deviceData.rotation }}</div>
            <div class="status-text">回转/°</div>
          </div>
          <div class="status-window">
            <div class="status-value">{{ deviceData.amplitude }}</div>
            <div class="status-text">幅度/m</div>
          </div>
          <div class="status-window">
            <div class="status-value">{{ deviceData.load }}</div>
            <div class="status-text">载重/t</div>
          </div>
          <div class="status-window">
            <div class="status-value">{{ deviceData.moment_rate }}</div>
            <div class="status-text">力矩百分比/%</div>
          </div>
          <div class="status-window">
            <div class="status-value">{{ deviceData.wind_speed }}</div>
            <div class="status-text">风速/m/s</div>
          </div>

          <div class="status-window">
            <div
              class="status-value"
              style="line-height: 20px; font-size: 15px"
            >
              {{ deviceData.log_time && deviceData.log_time.split(" ")[0] }}
              <br />
              {{ deviceData.log_time && deviceData.log_time.split(" ")[1] }}
            </div>
            <div class="status-text">数据更新</div>
          </div>
          <div class="status-window" style="opacity: 0">
            <div class="status-value">{{ deviceData.wind_speed_rate }}</div>
            <div class="status-text">风速百分比/%</div>
          </div>
        </div>
        <div
          id="video-container"
          v-if="deviceData.camera_list && deviceData.camera_list.length > 0"
          v-loading="videoLoading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <div v-show="player" id="video-container-inner"></div>
          <div class="video-container-img" v-show="!player">
            <img src="@/assets/tower/no_camera.png" alt="" />
            <div>暂无监控信息</div>
          </div>
        </div>
        <div id="video-container-img" v-else>
          <img src="@/assets/tower/no_camera.png" alt="" />
          <div>暂无监控信息</div>
        </div>
        <div
          class="video-buttons"
          v-if="deviceData.camera_list && deviceData.camera_list.length > 1"
        >
          <div class="all-video" @click="watchAll">全部监控</div>
          <div class="video-list">
            <div
              :class="['camera-button', videoIndex == index ? 'active' : '']"
              v-for="(camera, index) in deviceData.camera_list"
              :key="index"
              @click="switchCamera(camera, index)"
            >
              {{ camera.link_device_position_name }}
            </div>
          </div>
        </div>
        <VideoDialog
          :visible="videoDialogVisible"
          :idList="videoIdArray"
          @changeVisible="(val) => (videoDialogVisible = val)"
        ></VideoDialog>
      </div>

      <div class="title-label">
        <img src="@/assets/tower/arrow.png" alt="" />
        今日载重/高度实时数据
      </div>

      <div id="current-chart" ref="currentChart"></div>
    </div>
  </el-dialog>
</template>
<script>
import { getDeviceTodayChart, getTowerLiveUrl } from "@/api/index";
require("vue-video-player/node_modules/video.js/dist/video-js.css");
import videojs from "video.js";
import "videojs-contrib-hls";
import VideoDialog from "./videoDialog";
export default {
  name: "DeviceDialog",
  components: { VideoDialog },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    deviceId: {
      type: [String, Number],
      default: "",
    },
    deviceData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      todayData: [],
      player: null,
      videoLoading: false,
      videoIndex: 0,
      videoDialogVisible: false,
      videoIdArray: [],
    };
  },
  methods: {
    watchAll() {
      this.videoIdArray = this.deviceData.camera_list.map((item) => {
        return item;
      });
      this.$nextTick(() => {
        this.videoDialogVisible = true;
      });
    },
    renderTodayChart() {
      const xAxisData = this.todayData.map((item) => {
        return item.time;
      });
      const loadData = this.todayData.map((item) => {
        return item.load;
      });
      const heightData = this.todayData.map((item) => {
        return item.height;
      });
      const chart = this.$echarts.init(this.$refs.currentChart);
      const option = {
        grid: {
          top: 30,
          bottom: 30,
          left: 30,
          right: 30,
        },
        legend: {
          orient: "horizontal",
          x: "center",
          y: "top",
          textStyle: {
            fontSize: 12,
            color: "rgba(225, 239, 255, 0.7)",
          },
        },
        tooltip: {
          appendToBody: true,
          trigger: "item",
        },
        xAxis: {
          type: "category",
          data: xAxisData,
          axisTick: { show: false },
          axisLabel: {
            fontSize: "12",
            color: "#c6def9",
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            fontSize: "12",
            color: "#c6def9",
          },
          splitNumber: 4,
          splitLine: {
            lineStyle: {
              color: "rgba(95, 120, 144, 0.4)",
            },
          },
        },
        series: [
          {
            name: "吊重",
            type: "line",
            smooth: true,
            data: loadData,
          },
          {
            name: "高度",
            type: "line",
            smooth: true,
            data: heightData,
          },
        ],
      };
      chart.setOption(option);
      this.$nextTick(() => {
        // 解决echarts图表放大溢出父容器
        const resizeOb = new ResizeObserver((entries) => {
          for (const entry of entries) {
            this.$echarts.getInstanceByDom(entry.target).resize();
          }
        });
        resizeOb.observe(document.getElementById("current-chart"));
      });
    },
    openedEvents() {
      getDeviceTodayChart(this.deviceId).then((result) => {
        this.todayData = result.data;
        this.$nextTick(() => {
          this.renderTodayChart();
        });
      });
      if (this.deviceData.camera_list.length > 0) {
        this.videoLoading = true;
        getTowerLiveUrl(this.deviceData.camera_list[0].id).then((res) => {
          if (res.data.live_address_url) {
            const myVideoDiv = document.getElementById(`video-container-inner`);
            myVideoDiv.innerHTML = `<video
            id="singleVideo"
            autoplay="autoplay"
            class="video-js vjs-default-skin"
          ></video>`;
            const singlePlayer = videojs(`singleVideo`, {
              autoplay: true, // 自动播放
              controls: true, // 控件显示
              preload: "auto", //定义视频加载模式
              loop: true, //是否循环播放
            });
            singlePlayer.src({
              src: res.data.live_address_url,
              type: "application/x-mpegURL",
            });
            singlePlayer.play();
            this.player = singlePlayer;
          } else {
            this.player = null;
          }
          this.videoLoading = false;
        });
      }
    },
    switchCamera(camera, index) {
      this.player && this.player.dispose();
      this.videoIndex = index;
      this.$nextTick(() => {
        this.videoLoading = true;
        getTowerLiveUrl(camera.id).then((res) => {
          if (res.data.live_address_url) {
            const myVideoDiv = document.getElementById(`video-container-inner`);
            myVideoDiv.innerHTML = `<video
            id="singleVideo"
            autoplay="autoplay"
            class="video-js vjs-default-skin"
          ></video>`;
            const singlePlayer = videojs(`singleVideo`, {
              autoplay: true, // 自动播放
              controls: true, // 控件显示
              preload: "auto", //定义视频加载模式
              loop: true, //是否循环播放
            });
            singlePlayer.src({
              src: res.data.live_address_url,
              type: "application/x-mpegURL",
            });
            singlePlayer.play();
            this.player = singlePlayer;
          } else {
            this.player = null;
          }
          this.videoLoading = false;
        });
      });
    },
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("changeVisible", val);
      },
    },
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.player && this.player.dispose();
        this.videoIndex = 0;
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "@/assets/common/element.less";
.title-label {
  border-bottom: 2px solid #00b7ee;
  height: 18px;
  font-size: 18px;
  color: #c6def9;
  line-height: 18px;
  min-height: 30px;
  margin-bottom: 20px;
  img {
    width: 18px;
    vertical-align: top;
  }
}
.base-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
#video-container {
  width: calc(40% - 20px);
  position: relative;
  margin-left: 12px;
  #video-container-inner {
    width: 100%;
    height: 100%;
  }

  .video-container-img {
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    text-align: center;
    border: 1px solid #00b7ee;
    box-shadow: 0px 21px 24px 0px rgba(42, 78, 169, 0.4);
    border-radius: 4px;
    padding: 20px;
    background: #113e77;
    text-align: center;
    font-size: 14px;
    color: #3f6fab;
    img {
      width: 130px;
      vertical-align: top;
    }
  }
  .switch-prev {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    vertical-align: top;
    cursor: pointer;
    z-index: 999;
  }
  .switch-next {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    vertical-align: top;
    cursor: pointer;
    z-index: 999;
  }
}
#video-container-img {
  width: calc(40% - 50px);
  text-align: center;
  border: 1px solid #00b7ee;
  box-shadow: 0px 21px 24px 0px rgba(42, 78, 169, 0.4);
  border-radius: 4px;
  padding: 20px;
  background: #113e77;
  text-align: center;
  font-size: 14px;
  margin-left: 12px;
  color: #3f6fab;
  img {
    width: 130px;
    vertical-align: top;
  }
}
.status-area {
  display: flex;
  width: 60%;
  flex-wrap: wrap;
  justify-content: space-between;
}
.status-window {
  width: 20%;
  border: 1px solid #00b7ee;
  box-shadow: 0px 21px 24px 0px rgba(42, 78, 169, 0.4);
  border-radius: 4px;
  padding: 10px;
  background: #113e77;
  text-align: center;
  margin-bottom: 20px;
  &:nth-child(n + 5) {
    margin-bottom: 0;
  }
  .status-value {
    font-size: 18px;
    color: #13e0ff;
    line-height: 40px;
    margin-bottom: 12px;
    border-bottom: 1px solid #00b7ee;
  }
  .status-text {
    font-size: 14px;
    color: #c6def9;
    line-height: 20px;
  }
}
#current-chart {
  width: 100%;
  height: 300px;
}
.online {
  color: #3eec6f;
}
::v-deep .video-js {
  width: 100%;
  height: 100%;
}
.video-buttons {
  width: 140px;
  margin-left: 4px;
  .all-video {
    height: 40px;
    background: #113e77;
    border: 1px solid #00b7ee;
    box-shadow: 0px 21px 24px 0px rgba(42, 78, 169, 0.4);
    border-radius: 4px;
    line-height: 40px;
    text-align: center;
    color: #c6def9;
    cursor: pointer;
    font-size: 14px;
    &:hover {
      color: #13e0ff;
    }
  }
  .video-list {
    margin-top: 4px;
    height: 164px;
    background: #113e77;
    border: 1px solid #00b7ee;
    box-shadow: 0px 21px 24px 0px rgba(42, 78, 169, 0.4);
    border-radius: 4px;
    text-align: center;
    color: #c6def9;
    font-size: 14px;
    padding: 0 12px;
    line-height: 54px;
    overflow-y: auto;
    .camera-button {
      border-bottom: 1px solid #00b7ee;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      cursor: pointer;
      &.active {
        color: #13e0ff;
      }
    }
  }
}
</style>