<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :title="deviceData.device_sn"
    @opened="openedEvents"
    width="1820px"
    top="5vh"
  >
    <div id="device-container">
      <div class="left-info">
        <div class="content-area">
          <div class="title-label">
            <img src="@/assets/tower/arrow.png" alt="" />
            设备信息
          </div>
          <div class="infos">
            <div>产权单位：</div>
            <div>备案编号：</div>
            <div>备案编号：</div>
            <div>制造单位：</div>
            <div>设备型号：</div>
            <div>出厂日期：</div>
            <div>
              设备备案表：<span class="file">
                <i class="el-icon-paperclip"></i>点击查看文件</span
              >
            </div>
          </div>
        </div>
        <div class="content-area">
          <div class="title-label">
            <img src="@/assets/tower/arrow.png" alt="" />
            安装信息
          </div>
          <div class="infos">
            <div>安装单位：</div>
            <div>联系人：</div>
            <div>首次安装高度：</div>
            <div>最终使用高度：</div>
            <div>预安装时间：</div>
            <div>
              设备安装表：<span class="file">
                <i class="el-icon-paperclip"></i>点击查看文件</span
              >
            </div>
          </div>
        </div>
        <div class="content-area">
          <div class="title-label">
            <img src="@/assets/tower/arrow.png" alt="" />
            使用信息
          </div>

          <div class="infos">
            <div>使用单位：</div>
            <div>申请使用时间：</div>
            <div>使用单位联系人：</div>
            <div>安装验收时间：</div>
            <div>确认安装高度：</div>
            <div>检测单位：</div>
          </div>
        </div>
        <div class="content-area">
          <div class="title-label">
            <img src="@/assets/tower/arrow.png" alt="" />
            维保信息
          </div>
          <div class="infos">
            <div>维保人员：</div>
            <div>维保时间：</div>
            <div>维保单位：</div>
          </div>
        </div>
      </div>
      <div class="mid">
        <div class="content-area">
          <div class="title-label">
            <img src="@/assets/tower/arrow.png" alt="" />
            设备情况
            <div class="right-slot">
              <span>数据更新时间：{{ deviceData.log_time }}</span>
            </div>
          </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" style="opacity: 0"></div>
            </div>
          </div>
          <div class="tower">
            <div>
              <img src="@/assets/tower/tower-top.png" alt="" />
            </div>
            <div class="mid-tower" v-for="i in 9" :key="i">
              <img src="@/assets/tower/tower-mid.png" alt="" />
              <div class="bind-text">
                {{ 9 - i + 1 }}节 <span class="status">已绑定</span>
              </div>
            </div>
            <div>
              <img src="@/assets/tower/tower-bottom.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="right-device">
        <div class="content-area">
          <div class="title-label">
            <img src="@/assets/tower/arrow.png" alt="" />
            视频监控
            <div class="right-slot">
              <el-button
                type="primary"
                size="mini"
                @click="historyVisible = true"
                >历史抓拍</el-button
              >
              <el-dialog
                :visible.sync="historyVisible"
                title="历史抓拍"
                custom-class="inner-dialog"
                width="900px"
                append-to-body
              >
                <div>
                  <el-form inline :model="historyForm">
                    <el-form-item label="监控设备">
                      <el-select :popper-append-to-body="false">
                        <el-option></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="抓拍日期">
                      <el-date-picker
                        v-model="searchForm.date"
                        type="date"
                        value-format="yyyy-MM-dd"
                        :append-to-body="false"
                      >
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary">查询</el-button>
                    </el-form-item>
                  </el-form>

                  <div class="img-container"></div>
                </div>
              </el-dialog>
            </div>
          </div>
          <div class="video-area">
            <div class="in-video">
              <div id="video-container" v-if="deviceData.is_camera == 1"></div>
              <div id="video-container-img" v-else>
                <img src="@/assets/tower/no_camera.png" alt="" />
                <div>暂无监控信息</div>
              </div>
            </div>
            <div class="out-video">
              <div
                id="video-container-out"
                v-if="!deviceData.is_camera == 1"
              ></div>
              <div id="video-container-img" v-else>
                <img src="@/assets/tower/no_camera.png" alt="" />
                <div>暂无监控信息</div>
              </div>
            </div>
          </div>
        </div>

        <div class="content-area">
          <div class="title-label">
            <img src="@/assets/tower/arrow.png" alt="" />
            设备巡查情况
          </div>
          <Calendar
            v-on:choseDay="clickDay"
            v-on:changeMonth="changeDate"
            :markDateMore="dateMark"
          ></Calendar>
          <el-dialog
            :visible.sync="deviceVisible"
            title="设备巡查情况"
            custom-class="inner-dialog"
            width="900px"
            append-to-body
          >
            <div>
              <div class="device-info">
                <div class="avatar">
                  <img class="avatar-portrait" src="" alt="" />
                  <div class="user-name">李浩</div>
                </div>
                <div class="device-status">
                  <div>巡查时间：</div>
                  <div>巡查记录：</div>
                </div>
                <div class="device-img"></div>
              </div>
            </div>
          </el-dialog>
        </div>

        <div class="content-area">
          <div class="title-label">
            <img src="@/assets/tower/arrow.png" alt="" />
            设备今日使用情况
          </div>

          <div id="current-chart" ref="currentChart"></div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import Calendar from "vue-calendar-component";
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",
  components: { Calendar },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    deviceId: {
      type: [String, Number],
      default: "",
    },
    deviceData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      todayData: [],
      player: null,
      historyVisible: false,
      deviceVisible: false,
      searchForm: {
        date: new Date(),
      },
      dateMark: [],
    };
  },
  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() {
      if (this.deviceData.is_camera == 1) {
        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();
            });
          });
        });
      } else {
        getDeviceTodayChart(this.deviceId).then((result) => {
          this.todayData = result.data;
          this.$nextTick(() => {
            this.renderTodayChart();
          });
        });
      }
    },
    clickDay(data) {
      console.log(data); //选中某天
      this.deviceVisible = true;
    },
    changeDate(data) {
      console.log(data); //左右点击切换月份
    },
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("changeVisible", val);
      },
    },
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.player && this.player.dispose();
      }
    },
    historyVisible(val) {
      if (val) {
        this.$nextTick(() => {
          var devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可是区域宽度
          var scale = devicewidth / 1920; // 分母——设计稿的尺寸

          const dialogs = document.getElementsByClassName("inner-dialog");
          for (let i = 0; i < dialogs.length; i++) {
            dialogs[i].style.zoom = scale;
          }
        });
      }
    },
    deviceVisible(val) {
      if (val) {
        this.$nextTick(() => {
          var devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可是区域宽度
          var scale = devicewidth / 1920; // 分母——设计稿的尺寸
          const dialogs = document.getElementsByClassName("inner-dialog");
          for (let i = 0; i < dialogs.length; i++) {
            dialogs[i].style.zoom = scale;
          }
        });
      }
    },
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
@import "@/assets/common/element.less";
#device-container {
  display: flex;
  justify-content: space-between;
  .mid {
    width: 600px;
  }
  .left-info {
    width: 370px;
    .infos {
      color: rgba(198, 222, 249, 1);
      line-height: 28px;
      .file {
        color: rgba(0, 183, 238, 1);
        cursor: pointer;
      }
    }
  }
  .right-device {
    width: 790px;
  }
}
.title-label {
  border-bottom: 2px solid #00b7ee;
  height: 18px;
  font-size: 18px;
  color: rgba(0, 183, 238, 1);
  line-height: 40px;
  min-height: 40px;
  margin-bottom: 8px;
  img {
    width: 16px;
  }
  .right-slot {
    float: right;
    font-size: 14px;
    color: rgba(198, 222, 249, 1);
  }
}
.base-info {
  margin-bottom: 20px;
}
#video-container {
  width: 100%;
  height: 200px;
}
.video-area {
  display: flex;
  justify-content: space-between;
  .in-video,
  .out-video {
    width: calc(50% - 10px);
  }
}
#video-container-img {
  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;
  }
}
.status-area {
  display: flex;
  width: 100%;
  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: 200px;
}
.online {
  color: #3eec6f;
}
::v-deep .video-js {
  width: 100%;
  height: 100%;
}
.content-area {
  background: rgba(24, 81, 147, 0.98);
  padding: 10px;
  margin-bottom: 10px;
}
.tower {
  height: 626px;
  overflow-y: auto;
  img {
    max-width: 100%;
    vertical-align: top;
    display: inline-block;
  }
  .mid-tower {
    img {
      width: 58%;
    }
    display: inline-block;
    .bind-text {
      display: inline-block;
      color: rgba(198, 222, 249, 1);
      margin-left: 12px;
      line-height: 50px;
      .status {
        margin-left: 30px;
      }
    }
  }
}

.img-container {
  display: flex;
  justify-content: flex-start;
  img {
    width: 20%;
    height: 188px;
    margin-right: calc(10% / 3);
    margin-bottom: 12px;
    &:nth-child(4n) {
      margin-right: 0;
    }
  }
}
.wh_container {
  width: 100%;
  max-width: 100%;
}
::v-deep .wh_content_all {
  background: transparent;
}
::v-deep .wh_item_date:hover {
  background: #2268bf !important;
}
::v-deep .wh_content_item .wh_isToday {
  background: #164b8e;
}
::v-deep .wh_content_item .wh_chose_day {
  background: transparent;
}
.date-green {
  background: #42d00b;
}
.date-red {
  background: #ff4425;
}
.avatar-portrait {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  vertical-align: top;
}
.device-info {
  color: #c6def9;
  display: flex;
  justify-content: flex-start;
  background: #1f5ca3;
  padding: 10px;
}
.user-name {
  background: #164b8e;
  text-align: center;
  margin-top: 10px;
}
</style>