<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="设备详情"
    append-to-body
    @opened="openedEvents"
  >
    <div>
      <div class="title-label">
        <img src="@/assets/tower/arrow.png" alt="" />
        {{ deviceData.device_sn }} /
        <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">{{ deviceData.wind_speed_rate }}</div>
            <div class="status-text">风速百分比/%</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>
        <div id="video-container" v-if="deviceData.camera_id"></div>
        <div id="video-container-img" v-else>
          <img :src="deviceData.image_url" alt="" />
        </div>
      </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";
export default {
  name: "DeviceDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    deviceId: {
      type: [String, Number],
      default: "",
    },
    deviceData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      todayData: [],
      player: null,
    };
  },
  methods: {
    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: {
          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() {
      getTowerLiveUrl(this.deviceData.camera_id).then((res) => {
        const myVideoDiv = document.getElementById(`video-container`);
        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;
        getDeviceTodayChart(this.deviceId).then((result) => {
          this.todayData = result.data;
          this.$nextTick(() => {
            this.renderTodayChart();
          });
        });
      });
    },
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("changeVisible", val);
      },
    },
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.player && this.player.dispose();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.title-label {
  border-bottom: 2px solid #00b7ee;
  height: 18px;
  font-size: 18px;
  color: #c6def9;
  line-height: 30px;
  min-height: 30px;
  margin-bottom: 20px;
  img {
    width: 16px;
  }
}
.base-info {
  display: flex;
  justify-content: space-between;
}
#video-container {
  width: calc(40% - 20px);
  height: 200px;
}
.video-container-img {
  width: calc(40% - 20px);
  height: 200px;
  img {
    width: 100%;
    height: 100%;
    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;
  .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%;
}
</style>