<template>
    <div class="box_home_left">
        <div class="flex_home">
            <HeadlineTag type="left" value="给水站"></HeadlineTag>
            <div class="box_arch">
                <div class="left_content">
                    <div class="item_water_supply" v-for="(item, index) in leftData" :key="index">
                        <div class="left_supply">{{ item.title }}</div>
                        <div class="left_supply_value">{{ item.value }}</div>
                    </div>
                </div>
                <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>
        </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: 'PH:',
    value: '7PH'
}, {
    title: 'EC:',
    value: '15mS/cm'
}, {
    title: '液氮:',
    value: '23mg/L'
}, {
    title: '温度:',
    value: '27°C'
}, {
    title: '湿度:',
    value: '56NTu'
}])
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: 'PH压力高',
    value: '9',
    State: 2,
}, {
    name: 'PH压力低',
    value: '3',
    State: 2,
}, {
    name: 'EC压力高',
    value: '3',
    State: 0,
}, {
    name: 'EC压力低',
    value: '3',
    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_left {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 2,
}

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

.bottom_table {
    height: 60%;
}

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

.arch_icon {
    width: 45%;
    height: 45%;
    margin-bottom: 5%;
}

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

.item_water_supply {
    width: 100%;
    height: 19%;
    background: url("@/assets/images/rights.png");
    background-size: 100% 100%;
    background-position: right;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    padding-left: 55px;
    margin-left: 30px;
}

.item_water_supply:nth-of-type(2n+1) {
    background: url("@/assets/images/lefts.png");
    background-size: 100% 100%;
    background-position: left;
    background-repeat: no-repeat;
    margin-left: 0px;
    padding-left: 80px;
}

.left_supply {
    font-size: 20px;
}

.left_supply_value {
    font-size: 20px;
    color: #9bf06f;
    padding-left: 10px;
}

.right_content {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

.title_row {
    display: flex;
    align-items: center;
}
</style>