<template>
    <!-- <div class="eqSetting flex-col"> -->
    <div class="eqSetting flex-col">
        <div class="setting_dialog flex-col">

            <div class="setting_dialog flex-col">
                <div class="setting_title">
                    <div class="setting_title_text">系统设置</div>
                </div>
                <div class="setting_top flex-row  mt-20">
                    <div class="setting_top_left">反应塔报警条件：</div>
                    <div class="setting_top_right">
                        <div class="setting_top_right_item flex-row">
                            <div class="setting_top_right_item_text">报警柱报警</div>
                            <el-switch v-model="alarmFlag" active-color="#13ce66" inactive-color="#0E2750" />
                        </div>
                        <div class="setting_top_right_item flex-row">
                            <div class="setting_top_right_item_text">报警柱报警</div>
                            <el-switch v-model="alarmFlag" active-color="#13ce66" inactive-color="#0E2750" />
                        </div>
                        <div class="setting_top_right_item flex-row">
                            <div class="setting_top_right_item_text">联网失败报警</div>
                            <el-switch v-model="alarmFlag" active-color="#13ce66" inactive-color="#0E2750" />
                        </div>
                        <div class="setting_top_right_item flex-row">
                            <div class="setting_top_right_item_text">联网失败报警</div>
                            <el-switch v-model="alarmFlag" active-color="#13ce66" inactive-color="#0E2750" />
                        </div>
                        <div class="setting_top_right_item flex-row">
                            <div class="setting_top_right_item_text">水管漏水报警</div>
                            <el-switch v-model="alarmFlag" active-color="#13ce66" inactive-color="#0E2750" />
                        </div>
                        <div class="setting_top_right_item flex-row">
                            <div class="setting_top_right_item_text">水管漏水报警</div>
                            <el-switch v-model="alarmFlag" active-color="#13ce66" inactive-color="#0E2750" />
                        </div>
                    </div>
                </div>
                <div class="setting_top setting_center flex-row mt-20">
                    <div class="setting_top_left">首页模块配置：</div>
                    <div class="setting_center_boxs flex-row">
                        <div class="setting_center_box flex-col">
                            <div class="setting_center_box_title">
                                <template>
                                    <el-select v-model="value" placeholder="设备信息" @change="eqInfoSelected">
                                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </template>
                            </div>
                            <div class="setting_center_box_content">
                                <div class="setting_center_box_content_item">
                                    <img class="setting_center_box_content_icon" :src="eqInfoIcon">
                                </div>
                            </div>
                        </div>

                        <div class="setting_center_box flex-col">
                            <div class="setting_center_box_title">
                                <template>
                                    <el-select v-model="value" placeholder="温度状态" @change="eqInfoSelected">
                                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </template>
                            </div>
                            <div class="setting_center_box_content">
                                <div class="setting_center_box_content_item">
                                    <img class="setting_center_box_content_icon" :src="icon2">
                                </div>
                            </div>
                        </div>

                        <div class="setting_center_box flex-col">
                            <div class="setting_center_box_title">
                                <template>
                                    <el-select v-model="value" placeholder="实时监控" @change="eqInfoSelected">
                                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </template>
                            </div>
                            <div class="setting_center_box_content">
                                <div class="setting_center_box_content_item">
                                    <img class="setting_center_box_content_icon" :src="icon3">
                                </div>
                            </div>
                        </div>

                        <div class="setting_center_box flex-col">
                            <div class="setting_center_box_title">
                                <template>
                                    <el-select v-model="value" placeholder="故障现象" @change="eqInfoSelected">
                                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </template>
                            </div>
                            <div class="setting_center_box_content">
                                <div class="setting_center_box_content_item">
                                    <img class="setting_center_box_content_icon" :src="icon4">
                                </div>
                            </div>
                        </div>

                        <div class="setting_center_box flex-col">
                            <div class="setting_center_box_title">
                                <template>
                                    <el-select v-model="value" placeholder="用水量信息" @change="eqInfoSelected">
                                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </template>
                            </div>
                            <div class="setting_center_box_content">
                                <div class="setting_center_box_content_item">
                                    <img class="setting_center_box_content_icon" :src="icon5">
                                </div>
                            </div>
                        </div>

                        <div class="setting_center_box flex-col">
                            <div class="setting_center_box_title">
                                <template>
                                    <el-select v-model="value" placeholder="衰减信息" @change="eqInfoSelected">
                                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </template>
                            </div>
                            <div class="setting_center_box_content">
                                <div class="setting_center_box_content_item">
                                    <img class="setting_center_box_content_icon" :src="icon6">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="setting_bottom flex-row  mt-20">
                    <div class="setting_bottom_btns">
                        <button class="setting_bottom_btn"><i class="el-icon-edit" />修改</button>
                        <button class="setting_bottom_btn">取消</button>
                    </div>

                </div>
            </div>
        </div>

    </div>

    <!-- </div> -->
</template>
<script>
import '@/css/dcs/style.css'
import store from '@/store'

export default {
    components: {},
    props: {},
    data() {
        return {
            alarmFlag: true, // 反应塔报警条件
            options: [{
                value: '1-1',
                label: '温度监控'
            }, {
                value: '1-2',
                label: '实时状态'
            }, {
                value: '1-3',
                label: '故障信息'
            }, {
                value: '1-4',
                label: '用水量信息'
            }, {
                value: '1-5',
                label: '衰减信息'
            }],
            value: '', // 首页模块配置

            eqInfoIcon: require('@/assets/dcs/eqSetting/eqInfoIcon.svg'), // 设备信息图标
            icon2: require('@/assets/dcs/eqSetting/icon6.svg'), // 温度信息图标
            icon3: require('@/assets/dcs/eqSetting/icon2.svg'), // 实时监控图标
            icon4: require('@/assets/dcs/eqSetting/icon3.svg'), // 故障现象图标
            icon5: require('@/assets/dcs/eqSetting/icon4.svg'), // 用水量信息图标
            icon6: require('@/assets/dcs/eqSetting/icon5.svg'), // 衰减信息图标

            footTabImg1: require('@/assets/dcs/eqName/footTab1.svg'), // 主页图标
            footTabImg2: require('@/assets/dcs/eqName/footTab2.svg'), // 设备图标
            footTabImg3: require('@/assets/dcs/eqName/footTab3.svg') // 控制图标

        }
    },
    mounted() {
        
        const permissionFlag = ['dcs:eqSetting:index']
        const all_permission = "*:*:*";
        const permissions = store.getters && store.getters.permissions

        console.log('permissions: ', permissions);
        const hasPermissions = permissions.some(permission => {
            return all_permission === permission || permissionFlag.includes(permission)
        })

        console.log('hasPermissions: ', !hasPermissions);
        if (!hasPermissions) {
            this.$router.push({ name: '404' });
        }
    },

    methods: {
        eqInfoSelected(value) {
            console.log(value)
        }
    }
}
</script>
<style lang="scss" scoped>
.eqSetting {
    width: 1920px;
    height: 1080px;

    .setting_dialog {
        margin: auto;
        width: 1299px;
        height: 776px;
        flex-shrink: 0;
        border-radius: 8px;
        border: 1px solid rgba(16, 127, 209, 0.50);
        opacity: 0.9;
        background: rgba(1, 17, 48, 0.90);
        box-shadow: 0px 0px 6px 3px rgba(126, 230, 246, 0.30) inset;
        backdrop-filter: blur(2px);

        .setting_title {
            width: 344px;
            height: 48.946px;
            flex-shrink: 0;
            background-image: url('~@/assets/dcs/eqSetting/header.svg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            margin: 0 auto;

            .setting_title_text {
                color: #FFF;
                text-align: center;
                font-family: "PingFang SC";
                font-size: 24px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
            }
        }

        .setting_top {
            /* width: 800px; */
            margin-left: 268px;

            .setting_top_left {
                color: #00A2FF;
                text-align: right;
                font-family: "PingFang SC";
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
            }

            .setting_top_right {
                width: 500px;
                display: flex;
                flex-wrap: wrap;

                .setting_top_right_item {
                    width: 200px;
                    display: flex;
                    justify-content: space-between;
                    margin: 0 20px 20px;

                    .setting_top_right_item_text {
                        color: #FFF;
                        text-align: right;
                        font-family: "PingFang SC";
                        font-size: 16px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: normal;
                    }
                }
            }
        }

        .setting_center {
            .setting_center_boxs {
                display: flex;
                width: 550px;
                flex-direction: row;
                flex-wrap: wrap;

                .setting_center_box {
                    margin: 0 5px 10px;

                    .setting_center_box_title {
                        margin-bottom: 5px;

                        .el-input--medium .el-input__inner {
                            width: 259px;
                            height: 28px;
                            flex-shrink: 0;
                            background: #0C508C;
                            border: none;
                        }

                        .el-select .el-input .el-select__caret {
                            margin-top: 5px;
                        }
                    }

                    .setting_center_box_content {
                        width: 259px;
                        height: 74px;
                        flex-shrink: 0;
                        border: 1px solid #1069B1;
                        background: #01133C;

                        .setting_center_box_content_item {
                            margin: 20px auto;
                            width: 29px;
                            height: 29px;
                            flex-shrink: 0;

                        }

                    }
                }
            }
        }

        .setting_bottom {
            /* width: 755px; */

            .setting_bottom_btns {
                margin: auto;
                display: flex;
                justify-content: flex-end;
                margin-top: 20px;

                .setting_bottom_btn {
                    width: 118px;
                    height: 37px;
                    flex-shrink: 0;
                    border-radius: 5px;
                    border: 1px solid #16759D;
                    background: linear-gradient(180deg, rgba(27, 125, 196, 0.00) 12.5%, rgba(17, 164, 247, 0.20) 100%), #0B2A59;
                    margin: 0 5px;
                    color: #FFF;
                    font-family: "PingFang SC";
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                }
            }
        }

    }
}
</style>

