<template>
    <div class="ps-card-item" :style="{'backgroundColor': card.color || 'rgba(33, 204, 255, 0.08)'}">
       
        <template v-if="card.type == 2">
            <div class="ps-card-item-2">
                <div class="ps-card-item-2-l">
                    <div v-if="card.icon" class="ps-card-item-icon" :class="card.icon"></div>
                    <div v-else class="ps-card-item-icon">
                        <img class="ps-card-item-icon" :src="card.statistics.imageUrl" alt="">
                    </div>
                    <div class="ps-card-item-2-desc">
                        <div class="ps-card-item-label">{{card.statistics.label}}</div>
                        <div class="ps-card-item-value">{{card.statistics.value}}</div>
                    </div>
                </div>
                <div class="ps-card-item-2-r">
                    <div class="ps-card-item-2-r-column" v-for="(item,index) in card.columns" :key="index">
                        <div class="column-item" v-for="(column,index2) in item" :key="index2">
                            <div class="column-label">{{column.label}}</div>
                            <div class="column-value">{{column.value}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <template v-else-if="card.type == 3">
            <div class="ps-card-item-3">
                <div class="column-item" v-for="(item,index) in card.columns" :key="index" :style="{'width': `calc(100% / ${card.columns.length})`}">
                    <div class="column-item-1" v-for="(column,index2) in item" :key="index2">
                        <div class="column-label">{{column.label}}</div>
                        <div class="column-value">{{column.value}}</div>
                    </div>
                </div>
            </div>
        </template>
         <template v-else>
            <div class="ps-card-item-statistics">
                <div class="ps-card-item-desc">
                    <div class="ps-card-item-label">{{card.statistics.label}}</div>
                    <div class="ps-card-item-value">{{card.statistics.value}}</div>
                </div>
                <div v-if="card.icon" class="ps-card-item-icon" :class="card.icon"></div>
                <div v-else class="ps-card-item-icon">
                    <img class="ps-card-item-icon" :src="card.statistics.imageUrl" alt="">
                </div>
            </div>
            <div class="ps-card-item-average" v-if="card.average && card.average.length">
                <div class="ps-card-item-average-i" v-for="(item,index) in card.average" :key="index">
                    <div class="ps-card-item-average-label">{{item.label}}</div>
                    <div class="ps-card-item-average-value">{{item.value}}</div>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
export default {
    name: 'PsCardItem',
    props: {
        card: {
            type: Object,
            default () {
                return {
                    type: 1,
                    color: 'rgba(33, 204, 255, 0.08)',
                    icon: '',
                    statistics: {
                        label: '',
                        value: '',
                        imageUrl: ''
                    },
                    average: [
                        {
                            label: '',
                            value: ''
                        }
                    ]
                }
            }
        }
    }
}
</script>

<style>
</style>