<template>
    <div class="pages">
        <div class="tabs">
            <ul>
                <li v-for="(tab,i) in tabs" @click="goTab(tab.url)" :class="{'active':tabIndex == i}">
                    {{tab.name}}
                </li>
            </ul>
        </div>
        <div class="content">
            <ul>
                <li>
                    <em>是否启用信号录制</em>
                    <el-switch
                            v-model="setting.update"
                            active-color="#6DC1FF"
                            inactive-color="#DCDFE6">
                    </el-switch>
                </li>
                <li>
                    <em>是否启用回放</em>
                    <el-switch
                            v-model="setting.update"
                            active-color="#6DC1FF"
                            inactive-color="#DCDFE6">
                    </el-switch>
                </li>
                <li>
                    <em>是否启用下载</em>
                    <el-switch
                            v-model="setting.update"
                            active-color="#6DC1FF"
                            inactive-color="#DCDFE6">
                    </el-switch>
                </li>
                <li>
                    <em>扫描策略数量上限</em>
                    <el-input v-model="setting.max" placeholder="" type="number"></el-input>
                </li>
                <li>
                    <em>扫描任务最大时长</em>
                    <el-input v-model="setting.max" placeholder="" type="number"></el-input>
                </li>
                <li>
                    <em>信号录制文件最大容量</em>
                    <el-select v-model="setting.value" placeholder="请选择">
                        <el-option
                                v-for="item in setting.options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </li>
                <li>
                    <em>归档策略</em>
                    <el-select v-model="setting.value" placeholder="请选择">
                        <el-option
                                v-for="item in setting.options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </li>
                <li>
                    <em>归档数据保留期限</em>
                    <el-select v-model="setting.value" placeholder="请选择">
                        <el-option
                                v-for="item in setting.options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tabIndex: 0,
                tabs: [
                    {name: '系统设置', url: 'setting'},
                ],
                setting: {
                    sound: true,
                    update: false,
                    max:10,
                    value:1,
                    options: [{
                        value: '选项1',
                        label: '黄金糕'
                    }, {
                        value: '选项2',
                        label: '双皮奶'
                    }, {
                        value: '选项3',
                        label: '蚵仔煎'
                    }, {
                        value: '选项4',
                        label: '龙须面'
                    }, {
                        value: '选项5',
                        label: '北京烤鸭'
                    }],
                },
            }
        },
        methods: {
            // 跳转tab页面
            goTab(url) {
                this.$router.push({path: url});
            },
        },
    }
</script>

<style scoped>
    @import "../assets/css/panel.css";

    .tabs ul {
        width: 558px;
    }

    .pages {
        width: 96%;
        min-height: 600px;
        overflow: hidden;
        display: block;
        margin-left: 20px;
    }

    .content {
        position: absolute;
        top: 60px;
        left: 30px;
        right: 30px;
        bottom: 60px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        border: 1px solid rgba(0, 147, 254, 0.24);
        background: rgba(0, 130, 255, 0.05);
    }

    .content ul {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding: 0;
        list-style: none;
        padding-top: 30px;
    }

    .content li {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: rgba(27, 86, 200, 0.14);
        color: #6DC1FF;
        font-size: 16px;
        height: 60px;
        line-height: 60px;
        padding-left: 37px;
        margin-bottom: 5px;
    }

    .content li em {
        width: 140px;
        float: left;
        text-align: right;
        font-style: normal;
        margin-right: 27px;
    }

    .content li .el-switch {
        float: left;
        margin-top: 20px;
    }
    /deep/ .el-input {
        width: 120px;
        float: left;
        color: #fff;
    }
    /deep/ .el-input__inner {
        background-color: inherit;
        border: none;
        color: #fff;
    }
    /deep/ .el-select {
        float: left;
    }
</style>
