<template>
    <div class="container">
        <CardCount2 class="card-count2 left" :title="props.data.count1.title" :unit="props.data.count1.unit" :value="props.data.count1.value" :percent="props.data.count1.percent" :color="props.data.count1.color" @click="onClick('cz')"/>
        <CardCount2 class="card-count2 right" :title="props.data.count2.title" :unit="props.data.count2.unit" :value="props.data.count2.value" :percent="props.data.count2.percent" :color="props.data.count2.color" @click="onClick('ld')"/>
    </div>    
</template>

<script setup>
import {ref, defineProps, defineEmits} from 'vue';
import CardCount2 from './CardCount2.vue';

const emits = defineEmits(['click']);

const props = defineProps({
    data: {
        type: Object,
        default: {
            count1: {
                value: 0,
                title: '标题',
                unit: '',
                percent: 0,
                color: 'white',
            },
            count2: {
                value: 0,
                title: '标题',
                unit: '',
                percent: 0,
                color: 'white',
            },
        }
    }
})

const onClick = (type) => {
    emits('click', type);
}

</script>

<style lang="stylus" scoped>
.container
    width 360px
    height 180px
    position relative
    .card-count2
        background-image url(/assets/imgs/card/bg12.png)
        background-size 100% 100%
        background-repeat no-repeat
    .left
        width 120px
        position absolute
        top 6px
        left 50px
    .right
        width 120px
        position absolute
        top 6px
        right 50px
</style>