<template>
  <div class="data-statistics">
    <el-row :gutter="20">
      <el-col :span="8" v-for="(stat, index) in statistics" :key="index">
        <div class="stat-card floating-card">
          <div class="stat-icon-wrapper">
            <div class="stat-icon-bg" :style="{ backgroundColor: stat.color + '15' }">
              <i 
                v-if="stat.icon && (stat.icon.startsWith('fa ') || stat.icon.startsWith('fa-'))" 
                :class="stat.icon" 
                :style="{ color: stat.color }">
              </i>
              <el-icon v-else :size="20" :color="stat.color"><component :is="stat.icon" /></el-icon>
            </div>
          </div>
          <div class="stat-content">
            <div class="stat-title">{{ stat.title }}</div>
            <div class="stat-value">{{ stat.value }}</div>
            <div class="stat-desc" :class="{'stat-desc-up': stat.desc.startsWith('+'),
                                            'stat-desc-down': stat.desc.startsWith('-'),
                                            'stat-desc-same': !stat.desc.startsWith('+') && !stat.desc.startsWith('-')}">
              {{ stat.desc }}
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getStatistics } from '@/api/system/dashboard'

export default {
  name: 'DataStatistics',
  props: {
    postType: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      iconList: [
          // postType == 2 的情况
          [
              {icon: "fa fa-calendar-check-o", color: "#165dff", bgcolor: "#e7eeff"},
              {icon: "fa fa-exclamation-triangle", color: "#faad14", bgcolor: "#fef7e7"},
              {icon: "fa fa-clock-o", color: "#4e5969", bgcolor: "#edeef0"},
              {icon: "fa fa-line-chart", color: "#67C23A", bgcolor: "#edf9e8"},
              {icon: "fa fa-minus-circle", color: "#ff4d4f", bgcolor: "#ffeded"},
              {icon: "fa fa-users", color: "#36cfc9", bgcolor: "#ebfaf9"}
          ],
          // postType == 1 的情况
          [
              {icon: "fa fa-calendar", color: "#165dff", bgcolor: "#e7eeff"},
              {icon: "fa fa-calendar-times-o", color: "#faad14", bgcolor: "#fef7e7"},
              {icon: "fa fa-calendar-check-o", color: "#67C23A", bgcolor: "#edf9e8"},
              {icon: "fa fa-exclamation-triangle", color: "#ff4d4f", bgcolor: "#ffeded"},
              {icon: "fa fa-calendar-plus-o", color: "#4e5969", bgcolor: "#edeef0"},
              {icon: "fa fa-exclamation-circle", color: "#36cfc9", bgcolor: "#ebfaf9"}
          ],
          // 其他情况 (else)
          [
              {icon: "fa fa-calendar", color: "#165dff", bgcolor: "#e7eeff"},
              {icon: "fa fa-exclamation-triangle", color: "#faad14", bgcolor: "#fef7e7"},
              {icon: "fa fa-calendar-check-o", color: "#67C23A", bgcolor: "#edf9e8"},
              {icon: "fa fa-exclamation-circle", color: "#ff4d4f", bgcolor: "#ffeded"},
              {icon: "fa fa-star", color: "#36cfc9", bgcolor: "#ebfaf9"},
              {icon: "fa fa-minus-circle", color: "#4e5969", bgcolor: "#edeef0"}
          ]
      ],
      colorList: {
        blue:{color: '#165dff', bgcolor: '#e7eeff'},
        cyan:{color: '#36cfc9', bgcolor: '#ebfaf9'},
        orange:{color: '#faad14', bgcolor: '#fef7e7'},
        gray:{color: '#4e5969', bgcolor: '#edeef0'},
        red:{color: '#ff4d4f', bgcolor: '#ffeded'},
        green:{color: '#67C23A', bgcolor: '#edf9e8'},
      },
      // 数据统计
      statistics: []
    }
  },
  watch: {
    postType: {
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
          // 当 postType 变化时重新获取数据
          this.fetchStatistics()
        }
      },
      immediate: true
    }
  },
  created() {
    this.fetchStatistics()
  },
  methods: {
    // 获取数据统计
    async fetchStatistics() {
      try {
        const response = await getStatistics()
        // 根据返回的数据结构处理 statistics
        this.statistics = response.statistics.map((item, index) => {
          // 根据 postType 选择对应的图标配置
          let iconConfig = null
          if (this.postType === 2) {
            iconConfig = this.iconList[0][index] || this.iconList[0][0]
          } else if (this.postType === 1) {
            iconConfig = this.iconList[1][index] || this.iconList[1][0]
          } else {
            iconConfig = this.iconList[2][index] || this.iconList[2][0]
          }
          
          return {
            title: item.title,
            value: item.value,
            desc: item.desc,
            icon: iconConfig.icon,
            color: iconConfig.color
          }
        })
      } catch (error) {
        console.error('获取数据统计失败:', error)
        // 如果获取失败，使用默认数据
        this.statistics = [
          { 
            title: '计划工单总数', 
            value: '1,234', 
            desc: '+12% 较上月', 
          },
          { 
            title: '非计划工单总数', 
            value: '567', 
            desc: '-5% 较上月', 
          },
          { 
            title: '总工时', 
            value: '8,765', 
            desc: '0 较上月', 
          },
          { 
            title: '平均工单完成率', 
            value: '92.5%', 
            desc: '+2% 较上月', 
          },
          { 
            title: '扣分工单数量', 
            value: '45', 
            desc: '-3% 较上月', 
          },
          { 
            title: '班组总数', 
            value: '12', 
            desc: '0 较上月', 
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
/* 悬浮卡片通用样式 */
.floating-card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.floating-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.stat-card {
  height: 120px;
  display: flex;
  background-color: rgba(245, 247, 250, 0.7);
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
  margin-top: 20px;
  backdrop-filter: blur(5px);
  position: relative;
}

.stat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.stat-icon-wrapper {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 1; /* 确保图标在最上层 */
}

.stat-icon-bg {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(245, 247, 250, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.stat-title {
  font-size: 14px;
  color: #6B7280;
  margin-bottom: 5px;
  align-self: flex-start;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #000;
  margin-bottom: 5px;
  align-self: flex-start;
}

.stat-desc {
  font-size: 14px;
  align-self: flex-start;
}

.stat-desc-up {
  color: #67C23A; /* 绿色 */
}

.stat-desc-down {
  color: #F56C6C; /* 红色 */
}

.stat-desc-same {
  color: #909399; /* 灰色 */
}
</style>