<template lang="pug">
    el-dialog.my_dialog(:close-on-click-modal='false' :visible.sync='visible' append-to-body width='60%' :before-close='handleClose' :destroy-on-close='true')
        div.title-bold(slot='title') 历史视频
        el-row()
            div(v-if='videoList.length === 0' style='height:500px;display:flex')
                font(style='margin:auto;font-size:27px') 暂无视频
            el-col(v-else :span="(index === 0 && videoList.length === 1) || index ===2  ? 24 : 12" v-for="(item, index) in videoList" :key="index")
                el-card(:body-style="{ padding: '0px' }")
                    div(slot="header" align='center' class='my_dialog_header')
                        font() {{item.name}}
                    video( style="width:100%" :src="item.path" :id="item.id" autoplay loop controls muted="true")
</template>

<script>
    export default {
        name: 'history-video-info',
        data() {
            return {
                visible: false,
                videoList: [
                    // {
                    //     id: 1,
                    //     src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
                    //     name: 'ceshi1'
                    // },
                    // {
                    //     id: 2,
                    //     src: 'http://mirror.aarnet.edu.au/pub/TED-talks/911Mothers_2010W-480p.mp4',
                    //     name: 'ceshi2'
                    // },
                    // {
                    //     id: 3,
                    //     src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
                    //     name: 'ceshi3'
                    // }
                ]
            }
        },
        methods: {
            init(row) {
                this.visible = true
                // console.log(row)
                this.initData(row.id)
            },
            initData(id) {
                console.log(id)
                this.$http({
                    url: this.$http.adornUrlAlarm('/alarmsInfo/getHistoryVideInfo'),
                    method: 'get',
                    params: { id: id,
                    stationId: localStorage.getItem('stationId') }
                }).then(data => {
                    if (data && data.code === 0) {
                        this.videoList = data.list
                    }
                })
            },
            //关闭页面前调用
            handleClose() {
                this.visible = false
                //关闭视频
                this.videoList.map(item => {
                    var vide = document.getElementById(item.id)
                    if (vide.paused) {
                        // vide.play()
                    } else if (vide.play()) {
                        vide.pause()
                    }
                })
                this.videoList = []
            }
        }
    }
</script>

<style scoped>
    .title-bold {
        font-weight: bold;
        font-size: 17px;
    }

    .my_dialog >>> .el-dialog__body {
        padding: 0px;
    }

    .my_dialog >>> .el-card__header {
        padding: 8px 0px;
    }
</style>