<script lang="ts" setup>
import { CaretTop, Warning } from '@element-plus/icons-vue'
import increaseFun from '@/plugins/increaseFun'
import { reactive, watch } from "vue";


// 接受父组件参数，配置默认值
const props:any = defineProps({
  StatisticData: {
    type: Object,
    default: () => [],
  },
});

let data:any = reactive({
  StatisticValue:[]
})

watch(() => props.StatisticData, async (newData) => {
  data.StatisticValue = await increaseFun(newData)
})
</script>
<template>
  <el-row :gutter="16">
    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-for="(item, index) in data.StatisticValue" :key="index">
      <div class="statistic-card">
        <el-statistic :value="item.value">
          <template #title>
            <div style="display: inline-flex; align-items: center;margin-bottom:10px">
              {{ item.label }}
              <el-tooltip effect="dark" :content="item.content" placement="top">
                <el-icon style="margin-left: 4px" :size="12">
                  <Warning />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </el-statistic>
        <div class="statistic-footer" v-if="item.percent>=0">
          <div class="footer-item">
            <span>同比去年增长</span>
            <span class="green">
              {{ item.percent }}
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
          </div>
        </div>

        <div class="statistic-footer" v-else>
          <div class="footer-item">
            <span>同比去年减少</span>
            <span class="red">
              {{ item.percent }}
              <el-icon>
                <CaretBottom />
              </el-icon>
            </span>
          </div>
        </div>

      </div>
    </el-col>

  </el-row>
</template>
  

  
<style scoped>
:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 10px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}

.red {
  color: var(--el-color-error);
}
</style>
  