<template>
    <div class="hac-progress-chart-box">
        <div class="hac-left-progress">
            <div class="title" v-if="left_title">{{left_title}}</div>
            <div class="progress">
                <el-progress :text-inside="true" :stroke-width="32" :percentage="left_ratio" />
            </div>
        </div>
        <div class="hac-title-box">
            <div class="title">{{titles}}</div>
        </div>
        <div class="hac-right-progress">
            <div class="title" v-if="right_title">{{right_title}}</div>
            <div class="progress">
                <el-progress :text-inside="true" :stroke-width="32" :percentage="right_ratio" :format="format"/>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, watch} from 'vue'
const props = defineProps({
    leftTitle: {
        type: String,
        default: ''
    },
    title: {
        type: String,
        default: ''
    },
    rightTitle: {
        type: String,
        default: ''
    },
    leftRatio: {
        type: [Number,String],
        default: 0
    },
    rightRatio: {
        type: [Number,String],
        default: 0
    },
    rightText: {
        type: [Number,String],
        default: 0
    }
})

//变量
const left_title = ref(props.leftTitle)
const titles = ref(props.title)
const right_title = ref(props.rightTitle)
const left_ratio = ref(Number(props.leftRatio))
const right_ratio = ref(Number(props.rightRatio))
const right_text = ref(props.rightText)

//监听
watch(() => [
    props.leftTitle,
    props.title,
    props.rightTitle,
    props.leftRatio,
    props.rightRatio,
    props.rightText,
], ([leftTitle, title, rightTitle, leftRatio, rightRatio, rightText]) => {
    left_title.value = leftTitle
    titles.value = title
    right_title.value = rightTitle
    left_ratio.value = Number(leftRatio)
    right_ratio.value = Number(rightRatio)
    right_text.value = rightText
})

const format = () => (right_text.value)

</script>

<style scoped lang="scss">
.hac-progress-chart-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 0;
    .hac-left-progress, .hac-right-progress {
        position: relative;
        flex: 1;
        .title {
            position: absolute;
            top: -27px;
            font-size: 14px;
        }
        .progress {
            position: relative;
        }
    }
    .hac-left-progress .title {
        right: 0;
        color: #0066FF;
    }
    .hac-title-box {
        position: relative;
        width: 168px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 6px;
        .title {
            position: relative;
            font-size: 12px;
            background: #003366;
            border: 1px solid #0066FF;
            border-radius: 5px;
            color: white;
            padding: 6px 10px;
            width: 142px;
            text-align: center;
        }
        &:before {
            content: "";
            position: absolute;
            top: -11px;
            background: #BBD1FF;
            width: 100%;
            height: 50px;
            border: 1px solid #00CCFF;
            border-top-color: #BBD1FF;
            border-bottom-color: #BBD1FF;
        }
    }
    .hac-right-progress .title {
        left: 0;
        color: #FE6E22;
    }
}
</style>

<style lang="scss">
.hac-progress-chart-box {
    .hac-left-progress .progress .el-progress .el-progress-bar .el-progress-bar__outer {
        background-color: #BBD1FF;
        .el-progress-bar__inner {
            right: 0;
            left: initial;
            text-align: left;
            background: linear-gradient(90deg, rgba(25,86,249,1) -0.6%,rgba(53,210,233,1) 100.6%);
        }
    }
    .hac-right-progress .progress .el-progress .el-progress-bar .el-progress-bar__outer {
        background-color: #FFE3D6;
        .el-progress-bar__inner {
            background: linear-gradient(90deg, rgba(254,110,34,1) -0.6%,rgba(189,49,36,1) 100.6%);
        }
    }
    &:first-child {
        .hac-title-box:before {
            border-top-color:#00CCFF;
            border-radius: 3px 3px 0 0;
        }
    }
    &:last-child {
        .hac-title-box:before {
            border-bottom-color:#00CCFF;
            border-radius: 0 0 3px 3px;
        }
    }
}
</style>
