<template>
    <div class="app_container">
        <div class="eqList">
            <!-- F1罐体 -->
            <div class="eqList_border eqList_border_special">
                <div class="border_header">
                    <div class="header_title">
                        <text>{{ eqList[0].name }}</text>
                    </div>
                    <div class="header_text">
                        {{ eqList[0].status }}
                    </div>
                </div>
                <div class="border_body">
                    <!-- <el-row :gutter="10">
                        <el-col :xs="12" :sm="8" :md="9" :lg="6" :xl="6">
                            <EqListComponent :value="eqList[0].eqDetail[0].value" :type="eqList[0].eqDetail[0].type"
                                :title="eqList[0].eqDetail[0].name"></EqListComponent>
                        </el-col>
                        <el-col :xs="12" :sm="8" :md="9" :lg="6" :xl="6">
                            <EqListComponent :value="eqList[0].eqDetail[0].value" :type="eqList[0].eqDetail[0].type"
                                :title="eqList[0].eqDetail[0].name"></EqListComponent>
                        </el-col>
                        <el-col :xs="4" :sm="6" :md="6" :lg="3" :xl="2">
                            <EqSwitchComponent :name="switchList[0].name" :switchValue="switchList[0].value"
                                :title="switchList[0].title"> </EqSwitchComponent>
                        </el-col>
                        <el-col :xs="8" :sm="6" :md="6" :lg="3" :xl="2">
                            <EqSwitchComponent :name="switchList[0].name" :switchValue="switchList[0].value"
                                :title="switchList[0].title"> </EqSwitchComponent>
                        </el-col>
                        <el-col :xs="8" :sm="6" :md="6" :lg="3" :xl="2">
                            <EqSwitchComponent :name="switchList[0].name" :switchValue="switchList[0].value"
                                :title="switchList[0].title"> </EqSwitchComponent>
                        </el-col>
                        <el-col :xs="8" :sm="6" :md="6" :lg="3" :xl="2">
                            <EqSwitchComponent :name="switchList[0].name" :switchValue="switchList[0].value"
                                :title="switchList[0].title"> </EqSwitchComponent>
                        </el-col>
                    </el-row> -->
                    
                    <EqListComponent :value="eqList[0].eqDetail[0].value" :type="eqList[0].eqDetail[0].type"
                        :title="eqList[0].eqDetail[0].name"></EqListComponent>
                    <EqListComponent :value="eqList[0].eqDetail[1].value" :type="eqList[0].eqDetail[1].type"
                        :title="eqList[0].eqDetail[1].name"></EqListComponent>
                   
                    <EqSwitchComponent :name="switchList[0].name" :switchValue="switchList[0].value"
                        :title="switchList[0].title"> </EqSwitchComponent>
                    <EqSwitchComponent :name="switchList[1].name" :switchValue="switchList[1].value"
                        :title="switchList[1].title"> </EqSwitchComponent>
                    <EqSwitchComponent :name="switchList[2].name" :switchValue="switchList[2].value"
                        :title="switchList[2].title"> </EqSwitchComponent>
                    <EqSwitchComponent :name="switchList[3].name" :switchValue="switchList[3].value"
                        :title="switchList[3].title">  </EqSwitchComponent>
                    <EqSwitchComponent :name="switchList[4].name" :switchValue="switchList[4].value"
                        :title="switchList[4].title">  </EqSwitchComponent>
                    <EqSwitchComponent :name="switchList[5].name" :switchValue="switchList[5].value"
                        :title="switchList[5].title"> </EqSwitchComponent>
                </div>

            </div>
        </div>
        <div class="footer">
            <el-button color="#22B4B5" @click="$router.push({ name: 'F1' })">返回上级工艺</el-button>
            <el-button color="#22B4B5">关闭LB2</el-button>
            <el-button type="primary">确认设置</el-button>
            <el-button type="info" @click="EventBus.emit('clearSettingValue')">数据清空</el-button>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import EqListComponent from '@/components/DCS/EqListComponent.vue'
import EqSwitchComponent from '@/components/DCS/EqSwitchComponent.vue'
import { EventBus } from '@/utils/eventBus'

const eqList = [
    {
        name: 'M1',
        status: '运行中',
        eqDetail: [{
            //     name: '压缩空气阀门',
            //     value: 100,
            //     type: 'angle',
            // }, {
            name: '温度传感器',
            value: 100,
            type: 'temperature',
        },
        // {
        //     name: 'Z1电动阀',
        //     value: 100,
        //     type: 'angle',
        // },
        // {
        //     name: '电动阀 ',
        //     value: 100,
        //     type: 'speed',
        // },
        {
            name: 'LB18',
            value: 100,
            type: 'angle',
        },

        ]
    }
]

const switchList = ref([{
    title: '电磁蒸气1',
    name: '电磁蒸气1',
    value: false,
}, {
    title: '电磁蒸气2',
    name: '电磁蒸气2',
    value: false,
}, {
    title: '电磁蒸气3',
    name: '电磁蒸气3',
    value: false,
}, {
    title: 'Z1电动阀1',
    name: 'Z1电动阀1',
    value: false,
}, {
    title: '压缩空气阀门1',
    name: '压缩空气阀门1',
    value: false,
}, {
    title: '电动阀1',
    name: '电动阀1',
    value: false,
}
])

</script>
<style scoped lang="scss">
.app_container {
    background: #D4E3EE;
    padding: 20px;
    min-height: inherit;

    .eqList {
        border-radius: 5px;
        background: #F6FBFF;
        min-width: -webkit-fill-available;
        min-height: inherit;
        display: inline-flex;
        padding: 24px 32px;
        align-items: flex-start;
        gap: 60px;
        flex-wrap: wrap;

        .eqList_border {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 6px;
            border-radius: 10px;
            border: 1px solid #CCDBEB;
            background: #E6EEF8;
            box-shadow: 4px 4px 8.6px 0px rgba(203, 213, 224, 0.43);

            .border_header {
                // display: flex;
                // align-items: center;
                // gap: 100px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                align-self: stretch;

                .header_title {
                    display: flex;
                    width: 160px;
                    height: 40px;
                    padding: 9px 44px;
                    justify-content: center;
                    align-items: center;
                    gap: 10px;
                    border-radius: 10px 0px 20px 0px;
                    background: #008BB1;

                    text {
                        color: #FFF;
                        font-family: OPPOSans;
                        font-size: 16px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: normal;
                    }
                }

                .header_text {
                    width: 104px;
                    color: #2AA525;
                    font-family: OPPOSans;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                }
            }

            .border_body {
                display: flex;
                padding: 10px;
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;

                .data_item {
                    display: flex;
                    height: 101px;
                    padding: 8px;
                    align-items: center;
                    align-content: center;
                    gap: 60px 20px;
                    flex-wrap: wrap;
                    border-radius: 10px;
                    background: #EFF7FF;

                    .data_item_box {
                        display: flex;
                        padding: 10px 0px;
                        flex-direction: column;
                        justify-content: center;
                        align-items: flex-start;
                        gap: 10px;

                        .title {
                            display: flex;
                            // justify-content: center;
                            align-items: center;
                            gap: 5px;

                            .title_icon {
                                width: 4px;
                                height: 10px;
                                border-radius: 10px;
                                background: #1465BE;
                            }

                            text {
                                color: #1465BE;
                                font-size: 14px;
                            }
                        }

                        .switchList {
                            display: flex;
                            align-items: flex-start;
                            gap: 10px;
                            // width: 318px;
                            justify-content: space-around;

                            .switch_item {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                gap: 10px;

                                .switch_icon {
                                    :deep(.el-switch) {
                                        .el-switch__label--left {
                                            margin-right: 5px;
                                        }

                                        .el-switch__label--right {
                                            margin-left: 5px;
                                        }
                                    }
                                }

                                .switch_text {
                                    display: flex;
                                    padding: 0px 8px;
                                    justify-content: center;
                                    align-items: center;
                                    gap: 10px;
                                    color: #919EB1;
                                    font-family: OPPOSans;
                                    font-size: 14px;
                                    font-style: normal;
                                    font-weight: 400;
                                    line-height: normal;
                                }
                            }
                        }
                    }
                }
            }
        }

        // 加药机特殊样式
        .eqList_border_special {
            width: 1480px;

            .border_body {
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                flex-wrap: wrap;
                gap: 10px 20px;
            }
        }
    }

    .footer {
        margin-top: 20px;
        gap: 50px;
        display: flex;
        justify-content: center;

        :deep(.el-button>span) {
            color: #FFF !important;
        }
    }
}
</style>