<template>
    <div class="edit-view">
        <div class="video-list">
            <video-grid
                v-for="item in list"
                ref="video"
                :token="token"
                :device="item.deviceSerial"
                :key="item.id"
                :roomname="item.name"
                :name="`video_${item.id}`"
            ></video-grid>
        </div>
    </div>
</template>

<script>
import VideoGrid from '../../components/VideoGridOrganization.vue';
import format from 'date-fns/format';
export default {
    components: { VideoGrid },
    data() {
        return {
            token: '',
            form: {},
            list: [],
            time: '',
            records: [],
            districts: [],
            district: '',
            search: '',
            agency: '',
            dateRange: '',
            status: ''
        };
    },
    created() {
        this.$http
            .get('/district/NJ')
            .then(res => {
                this.districts = res;
            })
            .catch(e => {
                console.log(e);
                this.$message.error(e.error);
            });
    },
    mounted() {
        // this.getTime();
        this.getVideo();
    },
    methods: {
        getTime() {
            this.time = format(new Date(), 'yyyy/MM/dd hh:mm:ss');
            setTimeout(() => {
                this.getTime();
            }, 1000);
        },
        randomNum(minNum, maxNum) {
            switch (arguments.length) {
                case 1:
                    return parseInt(Math.random() * minNum + 1, 10);
                    break;
                case 2:
                    return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                    break;
                default:
                    return 0;
                    break;
            }
        },
        getVideo() {
            let data = {
                size: 100,
                query: {}
            };
            if (this.$route.query.rid) {
                data.query.recordId = this.$route.query.rid;
            }
            this.$http
                .get('ezvizToken/getToken')
                .then(res => {
                    this.token = res;
                    return this.$http.post('/examRoom/all', data, { body: 'json' });
                })
                .then(res => {
                    this.list = res.content;
                    this.$nextTick(() => {
                        if (res.content.length > 0) {
                            res.content.forEach((item, index) => {
                                if (index == 0) {
                                    this.$refs.video[index].init();
                                } else {
                                    let _index = this.randomNum(0, 4);
                                    console.log(_index);
                                    this.$refs.video[index].initVideo(index);
                                }
                            });
                        }
                    });
                })
                .catch(e => {
                    console.log(e);
                    this.$message.error(e.error);
                });
        }
    }
};
</script>

<style lang="less" scoped>
.edit-view {
    height: 900px;
}

.video-list {
    display: flex;
    flex-wrap: wrap;
}

.span-size {
    font-size: 14px;
    color: #565b66;
    line-height: 15px;
    padding: 0 10px 0 10px;
}
</style>
