<template>
  <view class="work-container">
    <!-- 统计分析标题 -->
    <view class="page-header">
      <view class="header-decorator"></view>
      <text class="header-title">统计分析</text>
    </view>
    
    <!-- 宫格组件 -->
    <view class="grid-body" v-show="auth.hasPermi('health:person:list')">
      <view class="grid-container">
        <view 
          v-for="(item, index) in healthGridList" 
          :key="index" 
          v-show="auth.hasPermi(item.permission)" 
          class="grid-item"
          @click="navigateTo(item.path)"
        >
          <view class="grid-item-content">
            <view class="icon-wrapper" :style="{ background: item.gradient }">
              <uni-icons :type="item.icon" size="32" color="#ffffff"></uni-icons>
            </view>
            <text class="grid-text">{{ item.text }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import auth from "@/plugins/auth";
import { ref } from "vue";

const healthGridList = ref([
  {
    path: '/pages/health/statistic/healthScreen/index',
    text: '健康总览态势',
    icon: 'map-filled',
    permission: 'health:healthRecord:list',
    gradient: 'linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%)'
  },
  {
    path: '/pages/health/statistic/recordScreen/index',
    text: '健康档案态势',
    icon: 'folder-add-filled',
    permission: 'health:healthRecord:list',
    gradient: 'linear-gradient(135deg, #7c3aed 0%, #ec4899 100%)'
  },
  { 
    path: '/pages/health/statistic/healthStatistic/index', 
    text: '档案统计', 
    icon: 'folder-add-filled', 
    permission: 'health:healthRecord:list',
    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
  },
  { 
    path: '/pages/health/statistic/doctorStatistic/index', 
    text: '就医统计', 
    icon: 'stethoscope', 
    permission: 'health:doctorRecord:list',
    gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
  },
  { 
    path: '/pages/health/statistic/marStatistic/index', 
    text: '用药统计', 
    icon: 'color', 
    permission: 'health:marRecord:list',
    gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
  },
  { 
    path: '/pages/health/statistic/temperatureStatistic/index', 
    text: '体温统计', 
    icon: 'fire-filled', 
    permission: 'health:temperatureRecord:list',
    gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)'
  }
]);

function navigateTo(path) {
  uni.navigateTo({
    url: path
  });
}
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f7fa;
  min-height: 100%;
}

.work-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 24rpx;
}

.page-header {
  display: flex;
  align-items: center;
  padding: 32rpx 24rpx 24rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  
  .header-decorator {
    width: 6rpx;
    height: 32rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 3rpx;
    margin-right: 12rpx;
  }
  
  .header-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #2c3e50;
  }
}

.grid-body {
  .grid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24rpx;
  }
  
  .grid-item {
    width: calc(50% - 12rpx);
    background: #ffffff;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    
    &:active {
      transform: translateY(-4rpx);
      box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
    }
  }
  
  .grid-item-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40rpx 20rpx;
    position: relative;
  }
  
  .icon-wrapper {
    width: 96rpx;
    height: 96rpx;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx;
    box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.15);
  }
  
  .grid-text {
    font-size: 28rpx;
    font-weight: 600;
    color: #2c3e50;
    text-align: center;
  }
}
</style>
