<template>
    <div style="height: 145px" class="box1">
        <div class="boxDiv hexagon">
            <div class="text-style" @click="change('')">{{ props.params.allNum }}</div>
            <!-- <div class="hexagon"></div> -->
            <div class="mt10 divBot">总数</div>
        </div>
        <div class="boxDiv hexagon hexagon1">
            <div class="text-style" @click="change('运行')">{{ props.params.runNum }}</div>
            <!-- <div class="hexagon"></div> -->
            <div class="mt10 divBot">在运</div>
        </div>
        <div class="boxDiv hexagon hexagon2">
            <div class="text-style" @click="change('调试')">{{ props.params.checkNum }}</div>
            <!-- <div class="hexagon"></div> -->
            <div class="mt10 divBot">调试</div>
        </div>
        <div class="boxDiv hexagon hexagon3">
            <div class="text-style" @click="change('停运')">{{ props.params.stopRunNum }}</div>
            <!-- <div class="hexagon"></div> -->
            <div class="mt10 divBot">停运</div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { mainHeight } from '@/utils/layout'
import { color } from '@/components/echarts/color'
const emit=defineEmits(['change'])
const height = mainHeight(330, 3)
const props = defineProps({
    params: {
        type: Object,
        default: () => {}
    }
})
const change = (e: string) => {
    emit('change',e)
}
const info = () => {}
onMounted(() => {
    info()
})
</script>
<style lang="scss" scoped>
.box1 {
    display: flex;
    align-items: center;
    .boxDiv {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        margin: 0 5px;

        div:nth-child(1) {
            position: absolute;
            font-size: 30px;
            top: -10px;
            font-weight: 700;
        }
        .divBot {
            font-size: 16px;
            position: absolute;
            top: 20px;
        }
        color: #fff;
    }
}
.hexagon {
    position: relative;
    width: 100%;
    height: 55px;
    background-color: #19a094;
    margin: 50px auto;
    &::before {
        border-bottom: 27.5px solid #19a094;
    }
    &::after {
        border-top: 27.5px solid #19a094;
    }
}

.hexagon::before,
.hexagon::after {
    content: '';
    position: absolute;
    width: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

.hexagon::before {
    bottom: 100%;
}

.hexagon::after {
    top: 100%;
}
.hexagon1 {
    background-color: #2e8b57;
    &::before {
        border-bottom: 27.5px solid #2e8b57;
    }
    &::after {
        border-top: 27.5px solid #2e8b57;
    }
}
.hexagon2 {
    background-color: #ffbf00;
    &::before {
        border-bottom: 27.5px solid #ffbf00;
    }
    &::after {
        border-top: 27.5px solid #ffbf00;
    }
}
.hexagon3 {
    background-color: #a52a2a;
    &::before {
        border-bottom: 27.5px solid #a52a2a;
    }
    &::after {
        border-top: 27.5px solid #a52a2a;
    }
}
.text-style {
    cursor: pointer;
    text-decoration: underline;
    color: #fff;
}
</style>
