<template>
    <div class="box_home_reight">
        <div class="flex_home">
            <HeadlineTag type="right" value="取水井"></HeadlineTag>
            <div class="box_arch">
                <div class="right_content">
                    <div class="title_row">
                        <CustomSwitch v-model="modelValue" :width="120" :height="40" inactive-text="手" active-text="自">
                        </CustomSwitch>
                    </div>
                    <div class="title_row">
                        <CustomSwitch v-model="modelValue1" :width="120" :height="40" inactive-text="远" active-text="本">
                        </CustomSwitch>
                    </div>
                    <div class="title_row">
                        <CustomSwitch v-model="modelValue2" :width="120" :height="40" inactive-text="变" active-text="工">
                        </CustomSwitch>
                    </div>
                    <div class="title_row">
                        <CustomSwitch v-model="modelValue3" :width="120" :height="40" inactive-text="运行"
                            active-text="停止">
                        </CustomSwitch>
                    </div>
                </div>
                <div class="left_content">
                    <div class="item_water_supply" v-for="(item, index) in leftData" :key="index">
                        <div class="left_supply_value">{{ item.value }}</div>
                        <div class="left_supply">{{ item.title }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom_table">
            <running :resultData="MonitorList" style="flex: 1;" />
        </div>
    </div>
</template>

<script setup>
import HeadlineTag from '@/components/HeadlineTag'
import CustomSwitch from './CustomSwitch.vue'
import running from './running.vue'
const props = defineProps({
    resultData: {
        type: Object,
        default: {}
    }
})
const leftData = ref([{
    title: '压力设定值',
    value: '1.3MPa'
}, {
    title: '频率设定值',
    value: '48Hz'
}])
const MonitorList = ref([{
    name: '消防水池高',
    value: '5m',
    State: 0,
}, {
    name: '消防水池低',
    value: '1m',
    State: 0,
}, {
    name: '出水压力低',
    value: '1.6MPa',
    State: 1,
}, {
    name: '出水压力高',
    value: '0.6Mpa',
    State: 0,
}, {
    name: '温度高',
    value: '60℃',
    State: 2,
}, {
    name: '温度低',
    value: '-10℃',
    State: 2,
}, {
    name: '湿度高',
    value: '100%RH',
    State: 0,
}, {
    name: '湿度低',
    value: '10%RH',
    State: 0,
}])
const modelValue = ref(false);
const modelValue1 = ref(false);
const modelValue2 = ref(false);
const modelValue3 = ref(false);
</script>

<style scoped lang="scss">
.box_home_reight {
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.flex_home {
    flex: 1;
    color: #fff;
}

.bottom_table {
    height: 60%;
}

.box_arch {
    display: flex;
    align-items: center;
    height: calc(100% - 40px);
}

.right_content {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.left_content {
    width: 65%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.item_water_supply {
    width: calc(100% - 30px);
    height: 25%;
    margin-right: 30px;
    background: url("@/assets/images/tjimage.png");
    background-size: 100% 100%;
    background-position: right;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-left: 30px;
}

.left_supply {
    margin-top: 4px;
    font-size: 22px;
}

.left_supply_value {
    font-size: 22px;
    color: #f0e064;
}
</style>