<template>
    <div class="iot-record">
        <div v-if="!isRecordDetail">
            <el-card v-show="showSearch" style="margin-bottom: 15px; width: 100%">
                <el-form ref="queryForm" :inline="true" label-width="88px" style="margin-bottom: -18px; padding: 3px 0 0 0" @submit.native.prevent>
                    <el-form-item prop="serverId">
                        <el-select @change="handleMediaChange" v-model="mediaServerId" :placeholder="$t('record.239091-1')" :disabled="isRecordDetail">
                            <el-option v-for="item in mediaServerList" :key="item.serverId" :label="item.serverId" :value="item.serverId"></el-option>
                        </el-select>
                    </el-form-item>

                    <div style="float: right">
                        <el-button v-if="!isRecordDetail" icon="el-icon-search" :loading="loading" type="primary" @click="getRecordList()">{{ $t('search') }}</el-button>
                    </div>
                </el-form>
            </el-card>
            <el-card>
                <el-row :gutter="10" style="margin-bottom: 15px">
                    <right-toolbar :showSearch.sync="showSearch" @queryTable="getRecordList"></right-toolbar>
                </el-row>

                <el-table :data="recordList" :border="false">
                    <el-table-column prop="app" :label="$t('record.239091-2')" align="left" min-width="150"></el-table-column>
                    <el-table-column prop="stream" :label="$t('record.239091-3')" align="left" min-width="460"></el-table-column>
                    <el-table-column prop="time" :label="$t('record.239091-4')" align="center" width="180"></el-table-column>
                    <el-table-column :label="$t('opation')" width="100" fixed="right" align="center">
                        <template slot-scope="scope">
                            <el-button size="small" icon="el-icon-folder-opened" type="text" @click="handleRecordDetailClick(scope.row)" v-hasPermi="['iot:sip:record:query']">{{ $t('look') }}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination style="margin-bottom: 20px" v-show="total > 0" :total="total" :page.sync="queryRecord.pageNum" :limit.sync="queryRecord.pageSize" @pagination="getRecordList" />
            </el-card>
        </div>
        <record-detail ref="cloudRecordDetail" v-if="isRecordDetail" :recordFile="chooseRecord" :mediaServerId="mediaServerId" :recordApi="recordApi" @back="handleBack"></record-detail>
    </div>
</template>

<script>
import { listmediaServer } from '@/api/iot/mediaServer';
import { getServerRecord } from '@/api/iot/record';
import recordDetail from '@/views/iot/record/record-detail.vue';

export default {
    name: 'Reocrd',
    components: {
        recordDetail,
    },
    data() {
        return {
            showSearch: true, // 显示搜索条件
            mediaServerList: [], // 滅体节点列表
            mediaServerId: null, // 媒体服务
            recordApi: null, // 媒体服务地址
            recordList: [], // 设备列表
            chooseRecord: null, // 选中的媒体服务
            updateLooper: 0, //数据刷新轮训标志
            queryRecord: {
                pageNum: 1,
                pageSize: 10,
                recordApi: null,
            },
            total: 0,
            loading: false,
            isRecordDetail: false, // 打开详情
        };
    },
    computed: {},
    mounted() {
        this.initData();
    },
    destroyed() {},
    methods: {
        initData: function () {
            // 获取媒体节点列表
            this.getMediaServerList();
        },
        currentChange: function (val) {
            this.currentPage = val;
            this.getRecordList();
        },
        handleSizeChange: function (val) {
            this.count = val;
            this.getRecordList();
        },
        // 获取服务器标识
        getMediaServerList() {
            const params = { pageNum: 1, pageSize: 9999 };
            listmediaServer(params).then((res) => {
                if (res.code === 200) {
                    this.mediaServerList = res.rows;
                }
            });
        },
        getRecordList: function () {
            if (!this.recordApi) {
                this.$modal.alertError(this.$t('record.239091-5'));
                return;
            }
            this.loading = true;
            this.queryRecord.recordApi = this.recordApi;
            getServerRecord(this.queryRecord)
                .then((res) => {
                    if (res.code === 200) {
                        this.recordList = res.data.list;
                        this.total = res.data.total;
                    }
                    this.loading = false;
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        // 选择标识符
        handleMediaChange(val) {
            this.total = 0;
            this.recordList = [];
            this.getRecordApi(val);
            this.getRecordList();
        },
        // 生成api
        getRecordApi(serverId) {
            let i;
            for (i = 0; i < this.mediaServerList.length; i++) {
                if (serverId === this.mediaServerList[i].serverId) {
                    break;
                }
            }
            if (this.mediaServerList[i].protocol == 'http') {
                this.recordApi = 'http://' + this.mediaServerList[i].ip + ':' + this.mediaServerList[i].recordPort;
            } else if (this.mediaServerList[i].protocol == 'https') {
                this.recordApi = 'https://' + this.mediaServerList[i].domainAlias + ':' + this.mediaServerList[i].recordPort;
            }
        },
        // 查看详情
        handleRecordDetailClick(row) {
            this.isRecordDetail = true;
            this.chooseRecord = row;
        },
        // 返回list
        handleBack() {
            this.isRecordDetail = false;
        },
    },
};
</script>

<style lang="scss" scoped>
.iot-record {
    padding: 20px;
}
</style>
