<template>
  <el-container style="padding: 15px 10px">
    <el-header style="padding: 0px; height: 35px">
      <div style="display: flex">
        <div
          style="
            width: 100px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
          "
          :style="{
            backgroundColor: _videoType == 1 ? '#2766dd' : '',
            color: _videoType == 1 ? '#fff' : '',
          }"
          @click="handleSelect(1)"
        >
          实时检测
        </div>
        <div
          style="
            width: 100px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
          "
          :style="{
            backgroundColor: _videoType == 2 ? '#2766dd' : '',
            color: _videoType == 2 ? '#fff' : '',
          }"
          @click="handleSelect(2)"
        >
          回放视频
        </div>
      </div>
    </el-header>
    <el-main style="padding: 0px" :class="'className' + this._videoType">
      <videoLine :items="items || '1'" :camera-code="cameraCode"></videoLine>
      <videoPlayer
        :isTime="isTime"
        :items="items || '1'"
        :heigthIsFull="false"
        :camera-code="cameraCodeVideo"
        :video-url="cameraCodeUrl"
        :video-id="this.id"
      />
    </el-main>
  </el-container>
</template>

<script>
import videoLine from "@/components/videoPlayer/videoLine";
import videoPlayer from "@/components/videoPlayer/videoPlayer";
import { invites } from "@/api/video";
var dayjs = require("dayjs");

// palyAndPlayback
// 播放与回放
export default {
  name: "PalyAndPlayback",
  components: { videoLine, videoPlayer },
  props: {
    videoType: {
      // 菜单类型
      type: Number,
      default() {
        return 1;
      },
    },
    cameraCode: {
      // 摄像机code
      type: String,
      default() {
        return "";
      },
    },
    id: {
      // 摄像机code
      type: String,
      default() {
        return "";
      },
    },
    items: {
      type: String,
      default() {
        return "";
      },
    },
    alarmTime: {
      // 报警时间
      type: String,
      default() {
        return "";
      },
    },
  },
  watch: {
    cameraCode(newValue) {
      this.cameraCodeVideo = newValue;
    },
    // videoType(newValue) {
    //   this._videoType = newValue;
    //   this.handleSelect(this._videoType);
    // },
  },
  data() {
    return {
      _videoType: 1,
      isTime: false,
      cameraCodeVideo: "",
      cameraCodeUrl: "",
      playbackModal: {
        // 回放模块
        show: false,
        time: "",
      },
    };
  },
  mounted() {
    if (this.$route.query.startTime) {
      this._videoType = 2;
      this.videoType = 2;
      this.isTime = true;
      this.cameraCode = this.$route.query.cameraCode;
      this.invite(this.$route.query.startTime, this.$route.query.entTime);
      this.playbackModal.show = false;
      return;
    }
    this._videoType = this.videoType;
    this.handleSelect(this._videoType);
  },
  methods: {
    handleSelect(val) {
      console.log("[视频服务]tab切换", val);
      if (val == 1) {
        this.videoType = 1;
        this.cameraCodeUrl = "";
        this.cameraCodeVideo = this.cameraCode;
        this.isTime = false;
        this._videoType = 1;
        this._videoType = this.videoType;
      } else if (val == 2) {
        this.videoType = 2;
        this.isTime = true;
        this._videoType = 2;
        this.invites();
      }
      this.$emit("tabChange", val);
    },
    playbackModalShow() {
      this.playbackModal.show = true;
    },
    playbackModalClose() {
      this.cameraCodeUrl = "";
      this.cameraCodeVideo = "";
      this.playbackModal.show = false;
    },
    invites() {
      invites(this.$route.query.alarmId).then((res) => {
        if (res.code == 200 && res.data) {
          console.log(res.data, "datafaf");
          this.cameraCodeUrl = res.data;
          this.cameraCodeVideo = "";
        } else {
          this.cameraCodeUrl = "";
          this.cameraCodeVideo = "";
          this.$message.error(res.msg);
        }
      });
    },
  },
};
</script>
