<template>
    <div class="edit-view">
        <el-form :model="form" inline size="small">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="考级活动名称">
                        <el-input
                            placeholder="输入考级活动名称"
                            v-model="search"
                            clearable
                            class="filter-item"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="考级机构名称">
                        <el-input
                            placeholder="输入考级机构名称"
                            v-model="agency"
                            clearable
                            class="filter-item"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="考级地址">
                        <el-select v-model="district" clearable placeholder="请选择区县">
                            <el-option
                                v-for="item in districts"
                                :key="item.id"
                                :value="item.name"
                                :label="item.name"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="承办单位名称">
                        <el-input
                            placeholder="输入承办单位名称"
                            v-model="organizer"
                            clearable
                            class="filter-item"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="监控视频状态">
                        <el-select v-model="status" clearable placeholder="请选择监控视频状态">
                            <el-option label="在线" value="1"></el-option>
                            <el-option label="离线" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="详细地址">
                        <el-input style="width: 195px" placeholder="输入考级详细地址" class="filter-item"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <div style="margin-bottom: 15px">
                <el-button @click="getVideo" type="primary" icon="el-icon-search" class="filter-item">查询 </el-button>
            </div>
        </el-form>

        <el-col :span="24">
            <div class="video-list">
                <video-grid
                    v-for="item in list"
                    ref="video"
                    :token="token"
                    :device="item.deviceSerial"
                    :key="item.id"
                    :organizer="item.organizer"
                    :address="item.examinationAddress"
                    :owner="item.examOwner"
                    :phone="item.examOwnerPhone"
                    :name="`video_${item.id}`"
                ></video-grid>
            </div>
        </el-col>
    </div>
</template>

<script>
import VideoGrid from '../../components/VideoGrid.vue';
import format from 'date-fns/format';
export default {
    components: { VideoGrid },
    data() {
        return {
            token: '',
            form: {},
            list: [],
            time: '',
            records: [],
            districts: [],
            district: '',
            search: '',
            agency: '',
            organizer: '',
            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();
        // this.getRecord();
    },
    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;
            }
        },
        getRecord() {
            this.records = [];
            this.$http
                .post('/record/byToday', { district: this.district })
                .then(res => {
                    if (res.length > 0) {
                        res.forEach(item => {
                            this.records.push({
                                label: item.examinationName,
                                value: item.id
                            });
                        });
                    }
                })
                .catch(e => {
                    console.log(e);
                    this.$message.error(e.error);
                });
        },
        getVideo() {
            let data = {
                size: 100,
                query: {
                    examinationTime: format(new Date(), 'yyyy-MM-dd')
                }
            };
            if (this.search) {
                data.search = this.search;
            }
            if (this.district) {
                data.query.district = this.district;
            }
            if (this.agency) {
                data.query.examinationAgency = this.agency;
            }
            if (this.organizer) {
                data.query.organizer = this.organizer;
            }
            if (this.status) {
                data.query.status = this.status;
            }
            this.$http
                .get('ezvizToken/getToken')
                .then(res => {
                    this.token = res;
                    return this.$http.post('/examRoom/byToday', data, { body: 'json' });
                })
                .then(res => {
                    this.list = res;
                    console.log(res);
                    this.$nextTick(() => {
                        if (res.length > 0) {
                            res.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);
                });
        },
        districtSelect() {
            this.getVideo();
            // this.getRecord();
        }
    }
};
</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;
}
/deep/.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
    margin-bottom: 10px;
}
</style>
