<template>
    <div class="app_container">
        <div class="eqList">
            <!-- Y1流程 -->
            <div class="eqList_border">
                <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">
                    <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>
                    <EqListComponent :value="eqList[0].eqDetail[2].value" :type="eqList[0].eqDetail[2].type"
                        :title="eqList[0].eqDetail[2].name"></EqListComponent>
                </div>

            </div>
            <div class="eqList_border">
                <div class="border_header">
                    <div class="header_title">
                        <text>{{ eqList[1].name }}</text>
                    </div>
                    <div class="header_text">
                        {{ eqList[1].status }}
                    </div>
                </div>
                <div class="border_body">
                    <EqListComponent :value="eqList[1].eqDetail[0].value" :type="eqList[1].eqDetail[0].type"
                        :title="eqList[1].eqDetail[0].name"></EqListComponent>
                    <EqListComponent :value="eqList[1].eqDetail[1].value" :type="eqList[1].eqDetail[1].type"
                        :title="eqList[1].eqDetail[1].name"></EqListComponent>
                    <EqListComponent :value="eqList[1].eqDetail[2].value" :type="eqList[1].eqDetail[2].type"
                        :title="eqList[1].eqDetail[2].name"></EqListComponent>
                </div>

            </div>
            <div class="eqList_border">
                <div class="border_header">
                    <div class="header_title">
                        <text>{{ eqList[2].name }}</text>
                    </div>
                    <div class="header_text">
                        {{ eqList[2].status }}
                    </div>
                </div>
                <div class="border_body">
                    <EqListComponent :value="eqList[2].eqDetail[0].value" :type="eqList[2].eqDetail[0].type"
                        :title="eqList[2].eqDetail[0].name"></EqListComponent>
                    <EqListComponent :value="eqList[2].eqDetail[1].value" :type="eqList[2].eqDetail[1].type"
                        :title="eqList[2].eqDetail[1].name"></EqListComponent>
                    <EqListComponent :value="eqList[2].eqDetail[2].value" :type="eqList[2].eqDetail[2].type"
                        :title="eqList[2].eqDetail[2].name"></EqListComponent>
                </div>
            </div>

            <div class="eqList_border">
                <div class="border_header">
                    <div class="header_title">
                        <text>{{ eqList[3].name }}</text>
                    </div>
                    <div class="header_text">
                        {{ eqList[3].status }}
                    </div>
                </div>
                <div class="border_body">
                    <EqListComponent :value="eqList[3].eqDetail[0].value" :type="eqList[3].eqDetail[0].type"
                        :title="eqList[3].eqDetail[0].name"></EqListComponent>
                    <EqListComponent :value="eqList[3].eqDetail[1].value" :type="eqList[3].eqDetail[1].type"
                        :title="eqList[3].eqDetail[1].name"></EqListComponent>
                    <EqListComponent :value="eqList[3].eqDetail[2].value" :type="eqList[3].eqDetail[2].type"
                        :title="eqList[3].eqDetail[2].name"></EqListComponent>
                </div>

            </div>
            <!-- 加药机 -->
            <div class="eqList_border">
                <div class="border_header">
                    <div class="header_title">
                        <text>{{ eqList[4].name }}</text>
                    </div>
                    <div class="header_text">
                        {{ eqList[4].status }}
                    </div>
                </div>
                <div class="border_body">
                    <EqListComponent :value="eqList[4].eqDetail[0].value" :type="eqList[4].eqDetail[0].type"
                        :title="eqList[4].eqDetail[0].name"></EqListComponent>
                    <EqListComponent :value="eqList[4].eqDetail[1].value" :type="eqList[4].eqDetail[1].type"
                        :title="eqList[4].eqDetail[1].name"></EqListComponent>
                    <EqListComponent :value="eqList[4].eqDetail[2].value" :type="eqList[4].eqDetail[2].type"
                        :title="eqList[4].eqDetail[2].name"></EqListComponent>
                </div>
            </div>
            <!-- F1罐体 -->
            <div class="eqList_border eqList_border_special">
                <div class="border_header">
                    <div class="header_title">
                        <text>{{ eqList[5].name }}</text>
                    </div>
                    <div class="header_text">
                        {{ eqList[5].status }}
                    </div>
                </div>
                <div class="border_body">
                    <EqListComponent :value="eqList[5].eqDetail[0].value" :type="eqList[5].eqDetail[0].type"
                        :title="eqList[5].eqDetail[0].name"></EqListComponent>
                    <EqListComponent :value="eqList[5].eqDetail[1].value" :type="eqList[5].eqDetail[1].type"
                        :title="eqList[5].eqDetail[1].name"></EqListComponent>
                    <EqListComponent :value="eqList[5].eqDetail[2].value" :type="eqList[5].eqDetail[2].type"
                        :title="eqList[5].eqDetail[2].name"></EqListComponent>
                    <EqListComponent :value="eqList[5].eqDetail[3].value" :type="eqList[5].eqDetail[3].type"
                        :title="eqList[5].eqDetail[3].name"></EqListComponent>
                    <EqListComponent :value="eqList[5].eqDetail[4].value" :type="eqList[5].eqDetail[4].type"
                        :title="eqList[5].eqDetail[4].name"></EqListComponent>

                    <EqSwitchComponent :title="switchList[0].title" :name="switchList[0].name"
                        :switchValue="switchList[0].value"></EqSwitchComponent>
                    <EqSwitchComponent :title="switchList[1].title" :name="switchList[1].name"
                        :switchValue="switchList[1].value"></EqSwitchComponent>
                </div>

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

<script setup>
import EqListComponent from '@/components/DCS/EqListComponent.vue'
import EqSwitchComponent from '@/components/DCS/EqSwitchComponent.vue';
import { ref } from 'vue'

import { EventBus } from "@/utils/eventBus";


const eqList = ref([
    {
        name: 'Y1',
        status: '运行中',
        eqDetail: [{
            name: '搅拌机',
            value: 100,
            type: 'speed',
        }, {
            name: '加料电机',
            value: 100,
            type: 'speed',
        },
        {
            name: '称重传感器',
            value: 100,
            type: 'weight',
        }]
    }, {
        name: 'Y2',
        status: '运行中',
        eqDetail: [{
            name: '搅拌机',
            value: 100,
            type: 'speed',
        }, {
            name: '加料电机',
            value: 100,
            type: 'speed',
        },
        {
            name: '称重传感器',
            value: 100,
            type: 'weight',
        }]
    }, {
        name: 'Y3',
        status: '运行中',
        eqDetail: [{
            name: '搅拌机',
            value: 100,
            type: 'speed',
        }, {
            name: '加料电机',
            value: 100,
            type: 'speed',
        },
        {
            name: '称重传感器',
            value: 100,
            type: 'weight',
        }]
    }, {
        name: 'Y4',
        status: '运行中',
        eqDetail: [{
            name: '搅拌机',
            value: 100,
            type: 'speed',
        }, {
            name: '加料电机',
            value: 100,
            type: 'speed',
        },
        {
            name: '称重传感器',
            value: 100,
            type: 'weight',
        }]
    }, {
        name: '加药机',
        status: '运行中',
        eqDetail: [{
            name: '搅拌机',
            value: 100,
            type: 'speed',
        }, {
            name: '电动隔膜泵',
            value: 100,
            type: 'speed',
        },
        {
            name: '称重传感器',
            value: 100,
            type: 'weight',
        }]
    }, {
        name: 'F1罐体',
        status: '运行中',
        eqDetail: [{
            name: 'LB17',
            value: 100,
            type: 'speed',
        },
        {
            name: '搅拌机',
            value: 100,
            type: 'speed',
        },
        {
            name: '搅拌机',
            value: 100,
            type: 'time',
        },
        {
            name: '称重传感器',
            value: 100,
            type: 'weight',
        },
        {
            name: '输出LB2',
            value: 100,
            type: 'speed',
        },
        ]
    }
])

const switchList = ref([{
    title: '加水电动阀',
    name: '阀门',
    value: false
},
{
    title: '输出电动阀',
    name: '阀门',
    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 24px;
        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;
            }
        }

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

            .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>