<template>
  <v-scale-screen
    ref="scale-screen"
    width="1920"
    height="1080"
    :fullScreen="true"
  >
    <div class="screen-box1">
      <div class="screen-title">
        <span>弘基AI视频推理平台</span>
      </div>
      <div class="screen-content">
        <el-row>
          <el-col :span="5" style="padding-right: 10px">
            <el-button type="text" class="back-btn" @click="goTo">
              <i class="el-icon-setting el-icon-arrow-left"></i> 管理后台&gt;
            </el-button>
            <div class="left-top">
              <span>
                <svg-icon icon-class="camera" class="on" />
                <p>在线监控:{{ CameraOnlineData.on }}</p>
              </span>
              <span>
                <svg-icon icon-class="camera" class="off" />
                <p>离线监控:{{ CameraOnlineData.off }}</p>
              </span>
            </div>
            <div class="left-content">
              <div class="chart-title"></div>
              <PieChartScreen
                :pieData="VideoAnalysisOnlineData"
                v-if="isDataLoaded"
                width="100%"
                height="298px"
              />
            </div>
            <div class="left-bottom">
              <div class="left-bottom-txt">
                <div>
                  <span>今日累计报警</span>
                  <p>{{ alarmStatisticsData.dayAlarm }}</p>
                </div>
                <div>
                  <span>报警已处理</span>
                  <p>{{ alarmStatisticsData.onAlarm }}</p>
                </div>
                <div>
                  <span>报警未处理</span>
                  <p>{{ alarmStatisticsData.offAlarm }}</p>
                </div>
              </div>
              <img src="../../assets/images/UI_34.png" alt="" />
            </div>
          </el-col>
          <el-col :span="14" style="padding: 0 10px">
            <div class="content-top">
              <div class="content-top-title">
                <!-- <el-select
                  class="playsource"
                  v-model="selectVidoe"
                  value-key="id"
                  placeholder=""
                  size="small"
                >
                  <el-option
                    v-for="item in videoList"
                    :key="item.id"
                    :label="item.name"
                    :value="item"
                  ></el-option>
                </el-select> -->
                <el-cascader
                  v-model="selectVidoe"
                  @change="handleCascaderChange"
                  :options="videoList"
                  placeholder="二楼办公室左后"
                  :props="{
                    value: 'value',
                    label: 'label',
                    children: 'children',
                  }"
                  clearable
                ></el-cascader>
              </div>
              <!-- <VideoPlay
                :videoID="'video'"
                :rtspIp="selectVidoe.url"
                :videoShow="videoShow"
                class="video-box"
              ></VideoPlay> -->
              <div class="video-box" ref="videoContainer">
                <video
                  id="videoPlayer"
                  ref="videoPlayer"
                  class=""
                  style="width: 100%; height: 100%"
                  autoplay
                  muted
                  controls
                  preload="auto"
                ></video>
              </div>
            </div>
            <div class="content-bottom">
              <div class="chart-title">
                <el-date-picker
                  v-model="pickerDate"
                  class="chart-picker"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  @change="getData"
                >
                </el-date-picker>
              </div>
              <div class="chart-box">
                <LineChartScreen
                  :chartData="StatisticsData"
                  v-if="isDataLoaded"
                  width="100%"
                  height="297px"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="5" style="padding-left: 10px">
            <div class="right">
              <el-button type="text" class="right-btn" @click="lookDetails">
                详情<i class="el-icon-plus"></i>
              </el-button>
              <div class="alarm-group">
                <div
                  class="alarm-item"
                  v-for="item of alarmList"
                  :key="item.logId"
                >
                  <el-row>
                    <el-col :span="12">
                      <p>
                        <dict-tag
                          :options="dict.type.algorithm_level"
                          :value="item.alarmLevel"
                          class="alarm-dict"
                        />
                        <span>{{ item.algorithmName }}</span>
                      </p>
                      <p>{{ item.cameraName }}</p>
                      <p>{{ item.alarmTime }}</p>
                    </el-col>
                    <el-col :span="12">
                      <image-preview
                        :src="item.alarmImageUrl"
                        class="alarm-img"
                      />
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </v-scale-screen>
</template>

<script>
import PieChartScreen from "../dashboard/PieChartScreen.vue";
import LineChartScreen from "../dashboard/LineChartScreen.vue";
import { getCameraList } from "@/api/business/cameraconfig.js";
import {
  getCameraOnlineData,
  getVideoAnalysisOnlineData,
  getStatisticsData,
  getAlarmStatisticsData,
  getVideoPlayUrlWithAlgorithm,
} from "@/api/business/home.js";
import { getAlarmLogList } from "@/api/business/alarmlog.js";
// 播放FLV视频流
import flvjs from "flv.js";
export default {
  dicts: ["algorithm_level"],
  name: "Screen",
  props: {},
  components: { PieChartScreen, LineChartScreen },
  data() {
    return {
      selectVidoe: [], // 选择视频
      videoList: [],
      webRtcServer: null, //webRtcServer上下文
      videoShow: false, //视频是否显示
      isDataLoaded: false, // 新增加载状态
      CameraOnlineData: {
        on: 0,
        off: 0,
      },
      VideoAnalysisOnlineData: [],
      StatisticsData: {},
      pickerDate: [],
      alarmList: [],
      alarmStatisticsData: {
        dayAlarm: 0,
        offAlarm: 0,
        onAlarm: 0,
      },
      width: 0,
      height: 0,
      resizeObserver: null,
      iframeSrc: "", // iframe的src
      iframeUrl: process.env.VUE_APP_SRS_URL, // iframe的src
      srsUrl: process.env.VUE_APP_SRS_URL, //SRS服务地址
    };
  },
  computed: {},
  watch: {},
  created() {
    // 设置最近7天为默认值
    const end = new Date();
    const start = new Date();
    start.setDate(start.getDate() - 14);
    // 添加日期格式化
    const formatDate = (date) => {
      return `${date.getFullYear()}-${(date.getMonth() + 1)
        .toString()
        .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;
    };
    this.pickerDate = [formatDate(start), formatDate(end)];
    this.init();
    this.getAlarmLog();
  },
  mounted() {},
  beforeDestroy() {
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
      this.resizeObserver = null;
    }
  },
  methods: {
    async init() {
      // 使用Promise.all等待所有请求完成
      await Promise.all([
        getVideoPlayUrlWithAlgorithm().then((res) => {
          if (res.code !== 200) return;

          // 在数据转换时保留原始字段
          this.videoList = res.rows.map((camera) => ({
            value: camera.cameraId,
            label: camera.cameraName, // 这里保持摄像头名称
            children: [
              // 原有算法列表
              ...camera.algorithmVo.map((algorithm) => ({
                value: algorithm.algorithmId,
                label: algorithm.algorithmName,
              })),
            ],
          }));
          // 设置默认选中第一个摄像头的第一个算法
          if (
            this.videoList.length > 0 &&
            this.videoList[0].children?.length > 0
          ) {
            this.selectVidoe = [
              this.videoList[0].value,
              this.videoList[0].children[0].value,
            ];
            this.cameraName = this.videoList[0].label; // 摄像头名称
            this.algorithmName = this.videoList[0].children[0].label; // 算法名称
            var url = `${this.srsUrl}/view/${this.videoList[0].value}_${this.videoList[0].children[0].value}.flv`;
            this.videoPlayer(url);
          }
          this.videoShow = true;
        }),
        getCameraList().then((res) => {
          if (res.code !== 200) return;
        }),

        getCameraOnlineData().then((res) => {
          if (res.code !== 200) return;
          this.CameraOnlineData = { off: res.data.off, on: res.data.on };
        }),

        getVideoAnalysisOnlineData().then((res) => {
          if (res.code !== 200) return;
          this.VideoAnalysisOnlineData = [
            { value: res.data.off, name: "未启动" },
            { value: res.data.on, name: "已启动" },
          ];
        }),

        getStatisticsData({
          startTime: this.pickerDate[0],
          endTime: this.pickerDate[this.pickerDate.length - 1],
        }).then((res) => {
          if (res.code !== 200) return;
          this.StatisticsData = res.data;
          this.pickerDate = [
            res.data.xdata[0],
            res.data.xdata[res.data.xdata.length - 1],
          ];
        }),
        getAlarmStatisticsData().then((res) => {
          if (res.code !== 200) return;
          this.alarmStatisticsData = res.data;
        }),
      ]);

      // 所有请求完成后设置加载完成状态
      this.$nextTick(() => {
        this.isDataLoaded = true;
      });
    },
    getData() {
      getStatisticsData({
        startTime: this.pickerDate[0],
        endTime: this.pickerDate[this.pickerDate.length - 1],
      }).then((res) => {
        if (res.code !== 200) return;
        this.StatisticsData = res.data;
      });
    },
    getAlarmLog() {
      getAlarmLogList({}).then((res) => {
        if (res.code !== 200) return;
        this.alarmList = res.rows;
      });
    },
    goTo() {
      this.$router.push({ path: "/index" });
    },
    lookDetails() {
      this.$router.push({ path: "/alarmlog" });
    },
    handleCascaderChange(value) {
      console.log(value);
      if (value.length === 2) {
        this.cameraName = this.videoList.find(
          (item) => item.value === value[0]
        ).label; // 摄像头名称
        this.videoList.forEach((alg) => {
          if (alg.value === value[0]) {
            alg.children.forEach((item) => {
              if (item.value === value[1]) {
                this.algorithmName = item.label; // 摄像头名称
              }
            });
          }
        });
        this.iframeSrc = `${this.iframeUrl}/view/${value[0]}/${value[1]}`;
        var url = `${this.srsUrl}/live/${value[0]}_${value[1]}.flv`;

        this.videoPlayer(url);
      }
    },
    videoPlayer(url = "") {
      if (flvjs.isSupported()) {
        var videoElement = document.getElementById("videoPlayer");
        var flvPlayer = flvjs.createPlayer({
          type: "flv",
          url: url, //你的url地址
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.screen-box1 {
  width: 100%;
  height: 100%;
  background: url("../../assets/images/screenbg.jpg") no-repeat center;
  background-size: 100% 100%;

  .screen-title {
    width: 100%;
    height: 95px;
    text-align: center;
    font-size: 30px;
    font-weight: 550;
    line-height: 45px;
    color: #fff;
    padding-top: 15px;
    font-family: Franklin Gothic Medium, Arial Narrow, Arial, sans-serif;
  }
  .screen-content {
    position: relative;
    padding: 10px;
    height: calc(100% - 115px);
    .back-btn {
      font-size: 22px !important;
      color: white !important;
      position: absolute;
      top: -70px;
      left: 15px;
    }
    .left-top {
      width: 100%;
      height: 279px;
      background: url("../../assets/images/lefttop.png") no-repeat center;
      background-size: 100% 100%;
      margin-bottom: 10px;
      font-size: 22px;
      color: white;
      font-weight: 550;
      font-family: Franklin Gothic Medium, Arial Narrow, Arial, sans-serif;
      display: flex;
      // ... 其他样式保持不变 ...
      justify-content: center; // 改为居中对齐
      gap: 50px; // 新增间距控制
      align-items: center; // 垂直居中对齐
      span {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 50px;
        p {
          margin-top: 10px;
        }
        .on {
          color: #184ff0;
          font-size: 46px;
        }
        .off {
          color: #d1d6eb;
          font-size: 46px;
        }
      }
    }
    .left-content {
      width: 100%;
      height: 338px;
      background: url("../../assets/images/leftcontent.png") no-repeat center;
      background-size: 100% 100%;
      margin-bottom: 10px;
      .chart-title {
        width: 100%;
        height: 40px;
      }
    }
    .left-bottom {
      width: 100%;
      height: 290px;
      background: url("../../assets/images/leftbottom.png") no-repeat center;
      background-size: 100% 100%;
      position: relative;
      overflow: hidden;
      img {
        width: 100%;
        margin-top: 140px;
      }
      .left-bottom-txt {
        width: 100%;
        height: 140px;
        font-size: 18px;
        display: flex;
        justify-content: center;
        gap: 25px;
        align-items: center;
        color: white;
        text-align: center;
        position: absolute;
        top: 80px;
        p {
          font-size: 30px;
        }
      }
    }
    .content-top {
      width: 100%;
      height: 580px;
      background: url("../../assets/images/contenttop.png") no-repeat center;
      background-size: 100% 100%;
      margin-bottom: 10px;
      padding: 20px;
      position: relative;
      overflow: hidden; // 新增溢出控制
      box-sizing: border-box; // 新增盒模型修正
      .content-top-title {
        width: calc(100% - 40px);
        height: 40px;
        position: absolute;
        top: 18px;
        z-index: 1000;
        background: url("../../assets/images/contenttop_title.png") no-repeat;
        display: flex; // 新增flex布局
        justify-content: flex-end; // 新增右对齐
        .playsource {
          width: 200px; // 新增宽度设置
          margin-top: 2px;
          ::v-deep .el-input__inner {
            background-color: #0e4ab3; // 新增背景色
            color: white; // 新增文字颜色
            border-color: #409eff; // 保持原有边框色
          }
        }
      }
      .video-box {
        width: 100%;
        // height: calc(100%-40px);
        height: 100%; // 修复计算表达式（原值缺少空格）
        position: relative;
        flex-shrink: 0; // 新增弹性收缩限制
      }
    }
    .content-bottom {
      width: 100%;
      height: 337px;
      background: url("../../assets/images/contentbottom.png") no-repeat center;
      background-size: 100% 100%;

      .chart-title {
        width: 100%;
        height: 40px;
        display: flex; // 新增flex布局
        justify-content: flex-end; // 右对齐
        padding: 2px 4px;
        ::v-deep .el-date-editor {
          background-color: #0e4ab3; // 半透明白底
          .el-range-input {
            background: transparent;
            color: white; // 文字白色
          }
        }
      }
      .chart-box {
        width: 100%;
        height: calc(100% - 38px);
      }
    }
    .right {
      width: 100%;
      height: 928px;
      background: url("../../assets/images/right.png") no-repeat center;
      background-size: 100% 100%;
      position: relative;
      .right-btn {
        font-size: 20px !important;
        color: white !important;
        position: absolute;
        margin-left: 15px;
        right: 0px;
        top: -4px;
      }
      .alarm-group {
        padding-top: 45px;
        width: 100%;
        overflow: hidden;
        .alarm-item {
          width: calc(100% - 2px);
          margin-left: 1px;
          height: 140px;
          background: #000348;
          background-size: 100% 100%;
          padding: 15px;
          color: #fff;
          margin-bottom: 5px;
          p {
            margin: 0;
            margin-bottom: 15px;
            .alarm-dict {
              display: inline-block;
              margin-right: 5px;
            }
          }
          .alarm-img {
            width: 170px;
            height: 110px;
          }
          &:hover {
            width: 100%;
            height: 160px;
            background: url("../../assets/images/spkuang_01.png") no-repeat
              center;
            background-size: 100% 100%;
            margin-left: 0;
            cursor: pointer;
            p {
              margin: 0;
              margin-bottom: 15px;
              .alarm-dict {
                display: block;
                margin-right: 5px;
                margin-bottom: 15px;
              }
            }
            .alarm-img {
              width: 170px;
              height: 130px;
            }
          }
        }
      }
    }
  }
}
</style>
