<template>
  <div class="progress-container">
    <div class="text-label">
        <div class="label-left">{{ prop.mdoelValue1.date }}</div>
        <div class="label-right"><i class="value">{{ prop.mdoelValue1.rate }}</i> %</div>
    </div>
    <div class="progress">
        <el-progress :percentage="percentage" stroke-width="8" :color="checkCb(prop.mdoelValue1)" :show-text="false"/>
    </div>
  </div>
</template>

<script setup>
import { ref,computed } from 'vue';

const prop = defineProps({
    mdoelValue1:{
        type: Object,
        default: () => {
            return {
                date: '',
                rate: 10,
            }
        }
    }
    
})
const percentage = computed(() => {
    console.log(prop.mdoelValue1.data);
    
    return prop.mdoelValue1.rate > 100 ? 100 : prop.mdoelValue1.rate;
})

//检测是否超标
function checkCb(item) {
   if (item.data > 85) {
    return '#FF0000'
  } else {
    return '#469DE9'
  }
}
</script>

<style lang="scss" scoped>
.progress-container {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    .text-label {
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        color: #2affff;
        box-sizing: border-box;
        .label-right {
            .value {
                color: #fff;
            }
        }
    }
}
</style>
