<template>
    <div class="iot-media-server">
        <el-card v-show="showSearch" style="margin-bottom: 15px; border-radius: 8px; width: 100%; height: 84px">
            <el-form @submit.native.prevent :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom: -18px; height: 36px; padding: 3px 0 0 0">
                <el-form-item prop="serverId">
                    <el-input v-model="queryParams.serverId" :placeholder="$t('sip.mediaServer.998535-8')" clearable @keyup.enter.native="handleQuery" />
                </el-form-item>

                <div style="float: right">
                    <el-button type="primary" icon="el-icon-search" @click="handleQuery">{{ $t('search') }}</el-button>
                    <el-button icon="el-icon-refresh" @click="resetQuery">{{ $t('reset') }}</el-button>
                </div>
            </el-form>
        </el-card>

        <el-card style="border-radius: 8px">
            <el-row :gutter="10" style="margin-bottom: 20px">
                <el-col :span="1.5">
                    <el-button type="primary" plain icon="el-icon-plus" size="small" @click="add" v-hasPermi="['iot:video:add']">{{ $t('add') }}</el-button>
                </el-col>
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getServerList"></right-toolbar>
            </el-row>

            <el-row :gutter="20" v-loading="loading">
                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" v-for="(item, index) in mediaServerList" :key="index" class="media-item">
                    <el-card :body-style="{ padding: '0px' }" shadow="always" style="border-radius: 8px" class="card-item">
                        <div class="item-title">
                            <div>
                                <el-image class="img" :src="require('@/assets/images/zlm-logo.png')" fit="fit"></el-image>
                            </div>
                            <div class="title">
                                <div class="name">{{ item.serverId }}</div>
                                <div class="tag">
                                    <el-tag type="info" size="mini">{{ item.protocol }}</el-tag>
                                </div>
                            </div>
                        </div>
                        <el-row :gutter="10">
                            <el-col :span="12" class="card-item-desc" style="padding-left: 24px">
                                <el-descriptions :column="1" size="small" class="card-item-desc-item">
                                    <el-descriptions-item :label="$t('sip.mediaServer.998535-13')">
                                        {{ item.portRtsp }}
                                    </el-descriptions-item>
                                </el-descriptions>
                            </el-col>
                            <el-col :span="12" class="card-item-desc" style="padding-right: 24px">
                                <el-descriptions :column="1" size="small" class="card-item-desc-item">
                                    <el-descriptions-item :label="$t('sip.mediaServer.998535-14')">
                                        {{ item.portRtmp }}
                                    </el-descriptions-item>
                                </el-descriptions>
                            </el-col>
                        </el-row>
                        <el-row :gutter="10">
                            <el-col :span="12" class="card-item-desc" style="padding-left: 24px">
                                <el-descriptions :column="1" size="small" class="card-item-desc-item">
                                    <el-descriptions-item :label="$t('sip.mediaServer.998535-2')">
                                        {{ item.ip }}
                                    </el-descriptions-item>
                                </el-descriptions>
                            </el-col>
                            <el-col :span="12" class="card-item-desc" style="padding-right: 24px">
                                <el-descriptions :column="1" size="small" class="card-item-desc-item">
                                    <el-descriptions-item :label="$t('sip.mediaServer.998535-4')">
                                        {{ parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}') }}
                                    </el-descriptions-item>
                                </el-descriptions>
                            </el-col>
                        </el-row>
                        <!-- 分割线 -->
                        <el-divider class="divider" />

                        <div class="card-item-btns">
                            <el-button size="mini" type="text" @click="view(item)" v-hasPermi="['iot:video:query']">{{ $t('sip.mediaServer.998535-9') }}</el-button>
                            <span class="btn-item-line" v-hasPermi="['iot:video:edit']">|</span>
                            <el-button v-if="!istrue" size="mini" type="text" @click="edit(item)" v-hasPermi="['iot:video:edit']">{{ $t('sip.mediaServer.998535-10') }}</el-button>
                            <el-button v-else size="mini" type="text">{{ $t('sip.mediaServer.998535-5') }}</el-button>
                            <span class="btn-item-line" v-hasPermi="['iot:video:edit']">|</span>
                            <el-button size="mini" type="text" @click="configManage(item)" v-hasPermi="['iot:video:edit']">{{ $t('sip.mediaServer.998535-11') }}</el-button>
                            <span class="btn-item-line" v-hasPermi="['iot:video:remove']">|</span>
                            <el-button size="mini" type="text" @click="del(item)" v-hasPermi="['iot:video:remove']">{{ $t('sip.mediaServer.998535-12') }}</el-button>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <el-empty :description="$t('sip.mediaServer.998535-6')" v-if="total == 0"></el-empty>
            <pagination style="margin: 0 0 20px 0" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :pageSizes="[12, 24, 36, 60]" @pagination="getServerList" />
        </el-card>

        <mediaServerEdit ref="mediaServerEdit" :edit-flag="editFlag"></mediaServerEdit>
    </div>
</template>

<script>
import mediaServerEdit from '@/views/iot/sip/mediaServer-edit.vue';
import { delmediaServer, listmediaServer } from '@/api/iot/mediaServer';

export default {
    name: 'MediaServer',
    components: {
        mediaServerEdit,
    },
    data() {
        return {
            // 遮罩层
            showSearch: true, // 显示搜索条件
            loading: true,
            editFlag: false,
            istrue: false,
            mediaServerList: [], //设备列表
            winHeight: window.innerHeight - 200,
            updateLooper: false,
            currentPage: 1,
            count: 15,
            num: this.getNumberByWidth(),
            total: 0,
            queryParams: {
                serverId: '',
                pageNum: 1,
                pageSize: 10,
            },
        };
    },
    computed: {},
    mounted() {
        this.initData();
        //this.updateLooper = setInterval(this.initData, 2000);
    },
    destroyed() {
        clearTimeout(this.updateLooper);
    },
    methods: {
        initData: function () {
            this.getServerList();
        },
        pageNumChange: function (val) {
            this.queryParams.pageNum = val;
            this.getServerList();
        },
        pageSizeChange: function (val) {
            this.queryParams.pageSize = val;
            this.getServerList();
        },
        getServerList: function () {
            this.loading = true;
            listmediaServer(this.queryParams).then((response) => {
                this.mediaServerList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        add: function () {
            this.$refs.mediaServerEdit.openDialog(null, this.initData, this.editFlag);
            this.editFlag = true;
        },
        view: function (row) {
            this.$refs.mediaServerEdit.openDialog(row, this.initData, this.editFlag);
            this.editFlag = false;
        },
        edit: function (row) {
            this.$refs.mediaServerEdit.openDialog(row, this.initData, this.editFlag);
            this.editFlag = true;
        },
        delay: function () {
            let n = 5;
            // 定义定时器time
            const time = setInterval(() => {
                this.istrue = true;
                n--;
                // 如果n<0，清除定时器，禁用状态取消，文字提示为空（不显示）
                if (n < 0) {
                    this.istrue = false;
                    clearInterval(time);
                }
            }, 1000);
        },
        del: function (row) {
            const ids = row.id || this.ids;
            this.$modal
                .confirm(this.$t('sip.mediaServer.998535-7', [ids]))
                .then(function () {
                    delmediaServer(ids);
                })
                .then(() => {
                    this.getServerList();
                    this.$modal.msgSuccess(this.$t('delSuccess'));
                })
                .catch(() => {});
        },
        getNumberByWidth() {
            let candidateNums = [1, 2, 3, 4, 6, 8, 12, 24];
            let clientWidth = window.innerWidth - 30;
            let interval = 20;
            let itemWidth = 360;
            let num = (clientWidth + interval) / (itemWidth + interval);
            let result = Math.ceil(24 / num);
            let resultVal = 24;
            for (let i = 0; i < candidateNums.length; i++) {
                let value = candidateNums[i];
                if (i + 1 >= candidateNums.length) {
                    return 24;
                }
                if (value <= result && candidateNums[i + 1] > result) {
                    return value;
                }
            }
            return resultVal;
        },
        // 搜索按钮操作
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getServerList();
        },
        // 重置按钮操作
        resetQuery() {
            this.resetForm('queryForm');
            this.handleQuery();
        },

        //配置管理按钮
        configManage(row) {
            if (row.protocol === 'https') {
                const url = 'https://' + row.domainAlias + ':' + row.portHttps + '/webassist/?secret=' + row.secret;
                window.open(url, '_blank');
            } else if (row.protocol === 'http') {
                const url = 'http://' + row.ip + ':' + row.portHttp + '/webassist/?secret=' + row.secret;
                window.open(url, '_blank');
            } else {
                this.$message.error('暂无该播放协议管理功能');
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.iot-media-server {
    padding: 20px;

    .media-item {
        margin-bottom: 20px;
        text-align: center;

        .card-item {
            background: #ffffff;
            border-radius: 8px;
            border: 1px solid #dcdfe6;

            .item-title {
                display: -webkit-box;
                flex-direction: row;
                align-items: center;
                position: relative;
                padding: 18px;

                .img {
                    height: 58px;
                    width: 68px;
                    border-radius: 10px;
                }

                .title {
                    flex: 1;
                    text-align: left;
                    margin-left: 16px;

                    .name {
                        font-weight: 500;
                        font-size: 16px;
                        color: #303133;
                        line-height: 22px;
                        white-space: nowrap; /* 不换行 */
                        overflow: hidden; /* 隐藏超出部分 */
                        text-overflow: ellipsis; /* 使用省略号 */
                    }

                    .tag {
                        margin-top: 5px;

                        span {
                            font-weight: 200;
                            border-radius: 2px;
                            border: 1px solid #c0c4cc;
                            background: #ffffff;
                        }
                    }
                }
            }

            .card-item-desc {
                // 设备授权
                .card-item-desc-item {
                    white-space: nowrap;
                    .tag-item-success {
                        color: #67c23a;
                        border-radius: 2px;
                        border: 1px solid #67c23a;
                        background-color: #ffffff;
                    }
                    .tag-item-error {
                        color: #c0c4cc;
                        border-radius: 2px;
                        border: 1px solid #c0c4cc;
                        background-color: #ffffff;
                    }
                }
            }
            .divider {
                margin: 10px 0 0;
                height: 1px;
                background: #dcdfe6;
            }
            .card-item-btns {
                height: 40px;
                padding: 0 20px;
                display: flex;
                align-items: center;
                justify-content: space-around;
                .btn-item-line {
                    width: 1px;
                    margin: 0px 10px;
                    font-size: 16px;
                    color: #dcdfe6;
                }
            }
        }
    }
}
</style>
