<template>

    <div class="layout-padding">
        <div class="layout-padding-auto layout-padding-view to-flex" style="background-color:#e9e9e9">
            <el-row class="to-flex" style="height: 100%;width: 100%; ">
                <el-card class="to-left">
                    <el-row class="to-left-top">
                        <h2>油枪列表</h2>
                        <el-row class="to-flex">
                            <h1 style="margin-right: 20px;">油枪号</h1>
                            <h1 style="color: #C00000;">1-54</h1>
                        </el-row>
                    </el-row>
                    <el-scrollbar :height="mainsHeight">
                        <el-row :gutter="10" class="to-flex" style="width: 100%;">
                            <el-col :span="4" class="to-flex to-left-bottom" v-for="i in 5" :key="i">
                                <el-row class="to-flex to-first-con">
                                    <p>{{ i + 1 }}</p>
                                    <p>0#</p>
                                    <p>7.15</p>
                                </el-row>
                                <el-row style="height: 33%;width: 100%;">
                                    <el-row class="to-flex to-second-con">
                                        <p>0.00元</p>
                                    </el-row>
                                    <p class="to-second-tip">离线
                                    </p>
                                </el-row>

                                <el-row class="to-flex to-third-con">
                                    <p>0.00升</p>
                                </el-row>
                            </el-col>
                        </el-row>
                    </el-scrollbar>
                </el-card>
                <el-card class="to-right">
                    <el-row class="to-right-nav">
                        <el-row class="to-rNav">
                            <div class="to-rNav-text" :class="isRed ? 'to-rNav-color' : 'to-none'"
                                style="margin-right: 20px;" @click="onclick(0)">
                                未结算
                            </div>
                            <div class="to-rNav-text" :class="!isRed ? 'to-rNav-color' : 'to-none'" @click="onclick(1)">
                                已结算
                            </div>
                        </el-row>
                        <p class="to-right-flushed">
                            刷新</p>
                    </el-row>
                    <el-row class="to-right-con">
                        <el-row class="to-flex to-con-title">
                            <div class="to-title-first">
                                <span style="font-size: 20px;">1</span>
                                <span>/0#</span>
                            </div>
                            <div class="to-title-second">
                                <span v-if="isRed">未</span><span v-else>已</span>结算
                            </div>
                        </el-row>

                        <!-- ！！！通过v-for循环，将数据展示即可 ！！！ -->
                        <el-row class="to-flex to-con-title" v-for="i in 5" :key="i">
                            <el-row class="to-flex">
                                <div style="margin-right: 10px;font-weight: 600;">0元 </div>
                                <div>5.98升</div>
                            </el-row>
                            <div>16:13:42</div>
                        </el-row>
                    </el-row>
                </el-card>
            </el-row>
        </div>
    </div>

</template>
<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue';

const isRed = ref(true)
const onclick = (data) => {
    if (data == 0) {
        isRed.value = true
    } else {
        isRed.value = false
    }
}
const mainsHeight = ref(0)
onMounted(() => {
    mainsHeight.value = document.documentElement.clientHeight - 170
})




</script>

<style>
.to-left {
    flex: 3;
}

.to-left-top {
    width: 100%;
    height: 40px;
    align-items: center;
    justify-content: space-between;
}

.to-left-bottom {
    height: 150px;
    background-color: #F0F0F0;
    border-radius: 8px;
    margin-bottom: 15px;
}

.to-first-con {
    justify-content: space-around;
    align-items: center;
    height: 33%;
    background-color: #C00000;
    border-radius: 8px 8px 0 0;
    color: #fff;
}

.to-second-con {
    justify-content: space-around;
    align-items: center;
    width: 100%;
}

.to-second-tip {
    font-size: 12px;
    position: absolute;
    right: 0;
    top: 16px;
    color: #C00000;
}

.to-third-con {
    justify-content: space-around;
    align-items: center;
    height: 33%;
}

.to-right {
    margin-left: 10px;
    flex: 1;
}

.to-right-nav {
    width: 95%;
}

.to-rNav {
    height: 28px;
    text-align: center;
}

.to-rNav-text {
    flex: 1;
    font-weight: 600;
    font-size: 18px;
    color: #808080;
}

.to-rNav-color {
    color: #000;
    border-bottom: 2px solid #C00000;
}

.to-none {
    border-bottom: 0;
}

.to-right-flushed {
    width: 40px;
    text-align: center;
    position: absolute;
    right: 0;
    bottom: 5;
    font-size: 12px;
    border: 1px solid #ccc;
    padding: 3px;
    color: #C00000;
}

.to-right-con {
    width: 95%;
    margin-top: 20px;
    background-color: #F8F8F8;
    padding: 0 10px;
    color: #808080;
}

.to-con-title {
    width: 100%;
    height: 40px;
    justify-content: space-between;
    align-items: center;
}

.to-title-first {
    color: #0000FF;
    display: inline-block;
    width: 50%;
}

.to-title-second {
    color: #C00000;
}
</style>