<template>
    <el-container style="padding: 15px 10px">
        <el-header style="padding: 0px; height: 35px">
            <div style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                ">
                <div style="display: flex">
                    <div style="
                            width: 100px;
                            height: 32px;
                            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: 32px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            cursor: pointer;
                        " :style="{
                            backgroundColor: _videoType == 2 ? '#2766dd' : '',
                            color: _videoType == 2 ? '#fff' : '',
                        }" @click="handleSelect(2)">
                        回放视频
                    </div>
                </div>
                <div v-if="videoType != 2">
                    <!-- 4分屏已选中 -->
                    <img v-if="videoListType == 1" src="@/assets/tag-2-select.png" class="button-base"
                        @click="videoListTypeChange(1)" />
                    <!-- 4分屏未选中 -->
                    <img v-else src="@/assets/tag-2.png" class="button-base" @click="videoListTypeChange(1)" />

                    <!-- 一分屏已选中 -->
                    <div v-if="videoListType == 0" class="button-base" style="background-color: #017ebc"></div>
                    <!-- 一分屏未选中 -->
                    <img v-else src="@/assets/tag-1.png" class="button-base" @click="videoListTypeChange(0)" />
                    <!-- 九分屏已选中 -->
                    <!-- <img
            v-if="videoListType == 2"
            src="@/assets/tag-3-select.png"
            class="button-base"
            @click="videoListTypeChange(2)"
          /> -->
                    <!-- 全屏 -->

                    <img v-else src="@/assets/fagnda.png" class="button-base" @click="videoListTypeChange(2)" />
                    <img v-if="videoListMagnify == false" src="@/assets/fagnda.png" class="fangda" style="margin-right: 0"
                        @click="videoFullScreen" />
                    <img v-if="videoListMagnify == true" src="@/assets/fagnda.png" class="fangda" style="margin-right: 10px"
                        @click="fullScreenChange" />
                    <!-- <div @click="toggleFullScreen">放大</div> -->
                    <img src="../../assets/放大.png" class="fangda" style="margin-right: 10px"
                        @click.stop="toggleFullScreen" />
                </div>
                <!-- <el-date-picker
          style="position: relative; top: -5px"
          v-model="playbackModal.time"
          @change="timeChage"
          v-if="videoType == 2"
          :picker-options="pickerOptions"
          type="datetimerange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        /> -->

                <template v-if="videoType == 2">
                    <div>
                        <el-date-picker size="small" value-format="yyyy-MM-dd" @change="timeChage"
                            v-model="playbackModal.date" type="date" placeholder="选择日期"
                            style="width: 150px"></el-date-picker>
                        -
                        <el-time-picker size="small" value-format="HH:mm:ss" @change="timeChage"
                            v-model="playbackModal.time" is-range range-separator="至" start-placeholder="开始时间"
                            end-placeholder="结束时间" placeholder="选择时间范围" style="width: 230px"></el-time-picker>
                    </div>
                </template>
            </div>
        </el-header>
        <el-main style="padding: 0px; overflow: auto" :class="'className' + this._videoType" v-if="this.videoType != 2">
            <div :class="{ fullscreen: isFullScreen }" ref="fullscreenModule" class="videoDiv" v-if="videoListType == 1"
                style="
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: row;
                ">
                <div v-for="(item, index) in 4" style="
                        width: 50%;
                        height: 50%;
                        float: left;
                        border: 5px solid #fff;
                    ">
                    <videoLine :camera-code="checkboxArr[index]
                        ? checkboxArr[index].cameraCode
                        : ''
                        " :items="false" :all-camera="getAllCamera"></videoLine>
                    <Video :src="checkboxArr[index] ? checkboxArr[index].src : ''" />
                </div>
            </div>
            <div :class="{ fullscreen: isFullScreen }" ref="fullscreenModule" class="videoDiv" v-if="videoListType == 0"
                style="width: 100%; height: 100%">
                <videoLine :items="false" :camera-code="cameraCode ? checkboxArr[0].cameraCode : ''"></videoLine>
                <Video v-if="checkboxArr[0]" :src="checkboxArr[0].src" />
            </div>
        </el-main>
        <el-main style="padding: 0px" :class="'className' + this.videoType" v-else>

            <!-- <el-table
                :empty-text="emptyText"
                :data="tableData"
                height="530px"
                style="width: 100%"
            >
                <el-table-column label="序号" width="80">
                    <template slot-scope="scope">
                        <span>{{ scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="startTime" label="开始时间" width="180">
                </el-table-column>
                <el-table-column prop="entTime" label="结束时间">
                </el-table-column>
                <el-table-column label="播放视频">
                    <template slot-scope="scope">
                        <div style="color: #0065ff" @click="play(scope.row)">
                            播放
                        </div>
                    </template>
                </el-table-column>
            </el-table> -->
            <!-- <div
                style="
                    position: absolute;
                    left: 0px;
                    top: 117px;
                    width: 100%;
                    text-align: center;
                "
            >
                <img
                    src="19241681291305_.pic.jpg"
                    v-if="tableData.length === 0"
                    style="width: 213px; left: 39%"
                    alt="No Data"
                />
            </div> -->
            <div style="padding-bottom: 14px;background-color: #000;height:100%">
                <videoLine :showElectric="false" :items="false" :camera-code="cameraCode">
                </videoLine>
                <Video :src="tableData"></Video>
            </div>
        </el-main>

        <!-- 回放功能 -->
        <el-dialog :visible.sync="playbackModal.show" v-if="playbackModal.show" :before-close="playbackModalClose"
            title="视频详情" width="900px">
            <div>
                <videoLine :camera-code="cameraCode"></videoLine>
                <div ref="mse" style="width: 100%"></div>
            </div>
        </el-dialog>
    </el-container>
</template>

<script>
import videoLine from "@/components/videoPlayer/videoLine";
import videoPlayer from "@/components/videoPlayer/videoPlayer";
import { invite, baseCameraManagementPlay } from "@/api/video";
import Video from "@/views/dashboard/Video";
import { records, lineDate } from "@/api/video";
var dayjs = require("dayjs");

// palyAndPlayback
// 播放与回放
export default {
    name: "PalyAndPlayback",
    components: { videoLine, videoPlayer, Video },
    data() {
        return {
            isFullScreen: false,
        };
    },
    props: {
        videoType: {
            // 菜单类型
            type: Number,
            default() {
                return 1;
            },
        },
        checkboxArr: {
            type: Array,
            default() {
                return "";
            },
        },
        getAllCamera: {
            type: Array,
            default() {
                return "";
            },
        },
        cameraCode: {
            // 摄像机code
            type: String,
            default() {
                return "";
            },
        },
        alarmTime: {
            // 报警时间
            type: String,
            default() {
                return "";
            },
        },
    },
    watch: {
        checkboxArr: {
            handler(res) {
                console.log('checkbox:',res);
            },
            deep: true,
        },
        cameraCode(newValue) {
            console.log(newValue, "111");
            this.cameraCodeVideo = newValue;
        },
        cameraCodeVideo(newValue) {
            records(newValue, true).then((res) => {
                this.src = res.data + "?" + Math.random();
            });
        },
        videoType(newValue) {
            this._videoType = newValue || 1;
            this.handleSelect(this._videoType);
        },
        videoListType() {
            console.log(this.videoListType);
        },
    },
    data() {
        return {
            videoListType: 0, // [右而]当前tab类型
            _videoType: 1,
            tableData: [],
            isTime: false,
            src: "",
            cameraCodeVideo: "",
            pickerOptions: {
                onPick: (time) => {
                    console.log(time, "time");
                    this.minDate = time.minDate;
                },
                disabledDate: (time, picker) => {
                    if (
                        this.minDate &&
                        this.getTIme(this.minDate) != this.getTIme(time)
                    ) {
                        return true;
                    }
                    return time.getTime() > Date.now();
                },
            },
            cameraCodeUrl: "",
            emptyText: "",
            playbackModal: {
                // 回放模块
                show: false,
                date: "", // 日期
                time: "", // 时间
            },
        };
    },
    mounted() {
        this.handleSelect(this._videoType);
        this._videoType = this.videoType;
    },
    methods: {
        toggleFullScreen() {
            const fullscreenModule = this.$refs.fullscreenModule;

            if (!this.isFullScreen) {
                fullscreenModule.requestFullscreen();
            } else {
                document.exitFullscreen();
            }

            this.isFullScreen = !this.isFullScreen;
        },
        // 视频模块切换
        videoListTypeChange(type) {
            this.numIndex = 0;
            console.log("[视频切换11111111]", type);
            this.numberVideos = type;

            this.videoListType = type;
            var _index = type === 1 ? 4 : 1;
            this.$emit("getType", type);
            setTimeout(() => {
                for (let index = 0; index < _index; index++) {
                    var item = Array.from(
                        document.querySelectorAll(".el-menu .el-checkbox")
                    )[index];
                    if (!item.querySelector("input").checked) {
                        item.click();
                    }
                }
            }, 500);
            // this.videoInit();
            // this.videoTreeInit();
        },
        getTIme(time) {
            const date = new Date(time);
            const year = date.getFullYear(); // 获取年份
            const month = date.getMonth() + 1; // 获取月份，需要加1
            const day = date.getDate(); // 获取日期
            const fullDate = `${year}-${month < 10 ? "0" + month : month}-${day < 10 ? "0" + day : day
                }`;
            return new Date(fullDate).getTime();
        },
        handleSelect(val = 1) {
            console.log("[视频服务]tab切换", val);
            if (val == 1) {
                this.videoType = 1;
                this.cameraCodeUrl = "";
                this.cameraCodeVideo = this.cameraCode;
                this.tableData = [];
                this.playbackModal.time = "";
                this.isTime = false;
                this.videoListTypeChange(0);
            } else if (val == 2) {
                this.videoType = 2;
                this.cameraCodeVideo = "";
                // this.isTime = true;
                // console.log("报警时间", this.alarmTime);
                // // 带有报警时间
                // if (this.alarmTime) {
                //   const beginTime = dayjs(new Date(this.alarmTime))
                //     .subtract(10, "minute")
                //     .format("YYYY-MM-DD HH:mm:ss");
                //   const endTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
                //   this.playbackModal.time = [beginTime, endTime];
                //   console.log(this.playbackModal.time);
                // } else {
                //   this.playbackModal.time = [];
                // }

                // this.playbackModalShow();
            }

            this.$emit("tabChange", val);
        },
        playbackModalShow() {
            this.playbackModal.show = true;
        },
        playbackModalClose() {
            this.cameraCodeUrl = "";
            this.cameraCodeVideo = "";
            this.playbackModal.show = false;
        },
        timeChage() {
            console.log("timeChage", this.playbackModal);
            if (this.playbackModal.date && this.playbackModal.time.length > 1) {
                baseCameraManagementPlay({
                    cameraCode: this.cameraCode,
                    startTime:
                        this.playbackModal.date +
                        " " +
                        this.playbackModal.time[0],
                    entTime:
                        this.playbackModal.date +
                        " " +
                        this.playbackModal.time[1],
                }).then((res) => {
                    this.tableData = res.data || [];
                    console.log(res, "res");
                    // if (res.code == "200" && res.data) {
                    //   this.cameraCodeUrl = res.data;
                    //   this.cameraCodeVideo = "";
                    // } else {
                    //   this.cameraCodeUrl = "";
                    //   this.cameraCodeVideo = "";
                    //   this.$message.error(res.msg);
                    // }
                });
            }
        },
        playbackModalSuccess() {
            this.playbackModal.show = false;
        },
        play(row) {
            this.playbackModal.show = true;
            console.log(this.tableData);
            this.$nextTick(() => {
                const config = {
                    el: this.$refs.mse,
                    url: row.url,
                    fluid: true,
                    playnext: {
                        urlList: this.tableData.map((item) => item.url),
                    },
                    poster: "",
                    plugins: [],
                    isLive: false,
                    autoplay: true,
                    autoplayMuted: true,
                };

                config.plugins.push(FlvPlayer);

                this.player = new Player(config);
                // this.player.on(Events.PlAY, () => {
                //   // TODO
                // })
            });
        },
        invite(startTime, entTime) {
            invite({
                cameraCode: this.cameraCode,
                startTime: startTime,
                entTime: entTime,
            }).then((res) => {
                if (res.code == "200" && res.data) {
                    this.cameraCodeUrl = res.data;
                    this.cameraCodeVideo = "";
                } else {
                    this.cameraCodeUrl = "";
                    this.cameraCodeVideo = "";
                    this.$message.error(res.msg);
                }
            });
        },
    },
};
</script>

<style >
.className2 {
    position: relative;
}

.button-base {
    width: 25px;
    height: 18px;
    margin-right: 10px;
    cursor: pointer;
    float: right;
}

.fangda {
    cursor: pointer;
    width: 18px;
    height: 18px;
    margin-right: 10px;
}

.homeRight-video-operation {
    text-align: right;
    background: red;
}
</style>
