<template>

    <div class="input-box">
        <el-row :gutter="24" type="flex">
            <el-col :span="5">
                <div class="item bg1">
                    <div class="left">
                        <span class="title">{{ dataValue?.totalOrderAmt  }}</span>
                        <span class="money">月成交金额(元)</span>
                        <div class="box1-bottom">
                            <span class="rate" style="color: #fff">月环比：{{ dataValue?.amountGrowthRate || 0 }}%</span>
                        </div>
                    </div>

                </div>
            </el-col>
            <el-col :span="5">
                <div class="item bg2">
                    <div class="left">
                        <span class="title">{{ dataValue?.totalOrderCount || 0 }}</span>
                        <span class="money">月成交订单数</span>
                        <div class="box1-bottom">
                            <span class="rate" style="color: #fff">月环比：{{ dataValue?.orderGrowthRate || 0 }}%</span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="item bg3">
                    <div class="left">
                        <span class="title">{{ dataValue?.totalBusinessCount || 0 }}</span>
                        <span class="money">月新增商机</span>
                        <div class="box1-bottom">
                            <span class="rate" style="color: #fff">月环比：{{ dataValue?.businessGrowthRate || 0 }}%</span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="item bg4">
                    <div class="left">
                        <span class="title">{{ dataValue?.followUpCount || 0 }}</span>
                        <span class="money">月跟进次数</span>
                        <div class="box1-bottom">
                            <span class="rate" style="color: #fff">月环比：{{ dataValue?.followUpGrowthRate || 0 }}%</span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="item bg5">
                    <div class="left">
                        <span class="title">{{ uesrAllProgressValue?.progress || 0 }}%</span>
                        <span class="money">业绩目标完成度</span>
<!--                        <div class="box1-bottom">-->
<!--                            <span class="rate" style="color: #fff">月环比：{{ uesrAllProgressValue?.progres | 0 }}%</span>-->
<!--                        </div>-->
                    </div>

                </div>
            </el-col>
        </el-row>
    </div>


</template>


<script setup name="Index" lang="ts">
import * as echarts from 'echarts';
import { EChartsOption } from 'echarts'

import {getMonthlyOrderCount, uesrAllProgress} from '@/api/home/index'

const props = defineProps({
    data: {
        type: Object,
        default: () => {
            return {}
        }
    }
})



const percentage = ref(80)
const resize = ref(true)
const dynamicWidth = ref(80)
const progressContainer = ref()
// 动态计算宽度的函数
const updateWidth = () => {
    if (progressContainer.value) {
        dynamicWidth.value = progressContainer.value.clientWidth - 50 ; // 可根据需要调整公式
        if(dynamicWidth.value < 80){
            dynamicWidth.value = 80

        }
    }
};
interface DataValue {
    totalOrderCount: number;
    totalOrderAmt: number;
    totalBusinessCount: number;
    followUpCount: number;
    totalProgress: number;

    amountGrowthRate: number;
    orderGrowthRate: number;
    businessGrowthRate: number;
    followUpGrowthRate: number;
}
const dataValue = ref<DataValue>()
const getMonthlyOrderCountData = async () => {
    getMonthlyOrderCount({ isMySelf: 1}).then(res => {
        dataValue.value = res.result
    })
}

const uesrAllProgressValue = ref({
    validMetricsCount: 0,
    progres: "0.00",
    progress: '0.00'

})
const uesrAllProgressData = async () => {
    uesrAllProgress({ isMySelf: 1}).then(res => {
        uesrAllProgressValue.value = res.result
    })
}



// 监听窗口变化
const handleResize = () => {
    updateWidth();
};
onMounted(async () => {
    getMonthlyOrderCountData()
    uesrAllProgressData();
    window.addEventListener('resize', updateWidth);
});
onBeforeUnmount(() => {
    window.removeEventListener('resize', handleResize);
});
</script>

<style lang="scss">
.input-box{
    @media screen and (min-width: 769px){
        .el-col-5 {
            max-width: 20%;
            width: 20%;
            flex: 0 0 20%;
        }
    }
    @media screen and (min-width: 569px) and (max-width: 768px) {
        .el-col-5 {
            max-width: 50%;
            width: 50%;
            flex: 0 0 50%;
        }
    }
    @media only screen and (max-width: 568px){
        .el-col-5 {
            max-width: 100%;
            width: 100%;
            flex: 0 0 100%;
        }
    }
}

</style>

<style scoped lang="scss">
.card-box {
    //width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .item {
        background: #fff;
        border-radius: 10px;
        width: 100%;
        height: 170px;
        padding: 24px 16px;
        display: flex;
        margin-bottom: 15px;

        .left {
            display: flex;
            flex-direction: column;
            .title{
                font-size: 36px;
                color: #262626;
            }
            .money {
                margin: 15px 0;

                color: #262626;
                line-height: 46px;
            }
        }
    }

}
.item {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    height: 170px;
    padding: 24px 16px;
    display: flex;
    margin-bottom: 15px;
    position: relative;

    &.bg2{
        background: url("@/assets/images/home/home1.png") no-repeat;
        background-size: cover;
    }
    &.bg3{
        background: url("@/assets/images/home/home2.png") no-repeat;
        background-size: cover;
    }
    &.bg4{
        background: url("@/assets/images/home/home3.png") no-repeat;
        background-size: cover;
    }
    &.bg5{
        background: url("@/assets/images/home/home4.png") no-repeat;
        background-size: cover;
    }
    &.bg1{
        background: url("@/assets/images/home/home5.png") no-repeat;
        background-size: cover;
    }

    .left {
        display: flex;
        flex-direction: column;
        width: 100%;
        .title{
            font-size: 32px;
            color: #fff;
        }
        .money {
            color: #fff;

        }
        .box1-bottom{
            bottom: 20px;
            display: flex;
            margin-top: 45px;
            justify-content: flex-end;
        }
    }
    .right{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
}

</style>
