<template>
  <view class="work-container">

    <!-- 健康管理 -->
    <view class="section-header" v-show="auth.hasPermi('health:person:list')">
      <text class="section-title">健康管理</text>
    </view>
    <view class="grid-body" v-show="auth.hasPermi('health:person:list')">
      <view class="grid-wrapper">
        <view 
          v-for="(item, index) in healthGridList" 
          :key="index" 
          v-show="auth.hasPermi(item.permission)" 
          @click="navigateTo(item.path)"
          class="grid-item">
          <view class="item-icon" :style="{ background: item.color }">
            <uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
          </view>
          <text class="item-text">{{ item.text }}</text>
        </view>
      </view>
    </view>

    <!-- 慢性疾病管理 -->
    <view class="section-header" v-show="auth.hasPermi('health:chronicDisease:list')">
      <text class="section-title">慢性疾病管理</text>
    </view>
    <view class="grid-body" v-show="auth.hasPermi('health:chronicDisease:list')">
      <view class="grid-wrapper">
        <view 
          v-for="(item, index) in chronicDiseaseGridList" 
          :key="index" 
          v-show="auth.hasPermi(item.permission)" 
          @click="navigateTo(item.path)"
          class="grid-item">
          <view class="item-icon" :style="{ background: item.color }">
            <uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
          </view>
          <text class="item-text">{{ item.text }}</text>
        </view>
      </view>
    </view>

    <!-- 婴幼儿管理 -->
    <view class="section-header" v-show="auth.hasPermi('health:milkPowderRecord:list')">
      <text class="section-title">婴幼儿管理</text>
    </view>
    <view class="grid-body" v-show="auth.hasPermi('health:milkPowderRecord:list')">
      <view class="grid-wrapper">
        <view 
          v-for="(item, index) in babycareGridList" 
          :key="index" 
          v-show="auth.hasPermi(item.permission)" 
          @click="navigateTo(item.path)"
          class="grid-item">
          <view class="item-icon" :style="{ background: item.color }">
            <uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
          </view>
          <text class="item-text">{{ item.text }}</text>
        </view>
      </view>
    </view>

    <!-- 统计分析 -->
    <view class="section-header" v-show="auth.hasPermi('health:person:list')">
      <text class="section-title">统计分析</text>
    </view>
    <view class="grid-body" v-show="auth.hasPermi('health:person:list')">
      <view class="grid-wrapper">
        <view 
          v-for="(item, index) in healthStaticGridList" 
          :key="index" 
          v-show="auth.hasPermi(item.permission)" 
          @click="navigateTo(item.path)"
          class="grid-item">
          <view class="item-icon" :style="{ background: item.color }">
            <uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
          </view>
          <text class="item-text">{{ item.text }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import auth from "@/plugins/auth"; // 建议使用auth进行鉴权操作

// 也可以使用下面的方式
	import { ref } from "vue";

  const healthGridList = ref([
    { path: '/pages/health/person/list', text: '成员管理', icon: 'person-filled', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', permission: 'health:person:list' },
    { path: '/pages/health/healthRecord/list', text: '健康档案', icon: 'folder-add-filled', color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', permission: 'health:healthRecord:list' },
    { path: '/pages/health/processRecord/list', text: '过程记录', icon: 'compose', color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)', permission: 'health:processRecord:list' },
    { path: '/pages/health/doctorRecord/list', text: '就医记录', icon: 'heart-filled', color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', permission: 'health:doctorRecord:list' },
    { path: '/pages/health/marRecord/list', text: '用药记录', icon: 'color', color: 'linear-gradient(135deg, #d38cff 0%, #9d50bb 100%)', permission: 'health:marRecord:list' },
    { path: '/pages/health/temperatureRecord/list', text: '体温记录', icon: 'fire-filled', color: 'linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%)', permission: 'health:temperatureRecord:list' },
    { path: '/pages/health/heightWeightRecord/list', text: '身高体重记录', icon: 'staff', color: 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)', permission: 'health:heightWeightRecord:list' },
    { path: '/pages/health/activity/list', text: '活动记录', icon: 'flag-filled', color: 'linear-gradient(135deg, #f6d365 0%, #fda085 100%)', permission: 'health:activity:list' },
    { path: '/pages/health/medicineBasic/list', text: '药品基础信息', icon: 'locked', color: 'linear-gradient(135deg, #5f72bd 0%, #9b23ea 100%)', permission: 'health:medicineBasic:list' },
    { path: '/pages/health/medicineStockIn/list', text: '药品入库清单', icon: 'download-filled', color: 'linear-gradient(135deg, #17c0eb 0%, #f368e0 100%)', permission: 'health:medicineStockIn:list' },
    { path: '/pages/health/medicineStock/list', text: '药品实时库存', icon: 'shop', color: 'linear-gradient(135deg, #0be881 0%, #0fbcf9 100%)', permission: 'health:medicineStockIn:list' }
  ])

  const chronicDiseaseGridList = ref([
    { path: '/pages/health/chronicDisease/list', text: '慢性疾病', icon: 'heart', color: 'linear-gradient(135deg, #e74c3c 0%, #c0392b 100%)', permission: 'health:chronicDisease:list' },
    { path: '/pages/health/medicationPlan/list', text: '用药计划', icon: 'calendar-filled', color: 'linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%)', permission: 'health:medicationPlan:list' },
    { path: '/pages/health/medicationTask/list', text: '服药任务', icon: 'checkbox-filled', color: 'linear-gradient(135deg, #00b894 0%, #55efc4 100%)', permission: 'health:medicationTask:list' }
  ])
  
  const babycareGridList = ref([
    { path: '/pages/health/milkPowderRecord/list', text: '吃奶记录', icon: 'gift-filled', color: 'linear-gradient(135deg, #fa8231 0%, #f7971e 100%)', permission: 'health:milkPowderRecord:list' },
    { path: '/pages/health/statistic/milkPowderStatistic/index', text: '吃奶量统计', icon: 'bars', color: 'linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%)', permission: 'health:milkPowderStatistic:list' }
  ])

  const healthStaticGridList = ref([
    { path: '/pages/health/statistic/healthScreen/index', text: '健康总览态势', icon: 'map-filled', color: 'linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%)', permission: 'health:healthRecord:list' },
    { path: '/pages/health/statistic/recordScreen/index', text: '健康档案态势', icon: 'folder-add-filled', color: 'linear-gradient(135deg, #7c3aed 0%, #ec4899 100%)', permission: 'health:healthRecord:list' },
    { path: '/pages/health/statistic/healthStatistic/index', text: '档案统计', icon: 'paperplane-filled', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', permission: 'health:healthRecord:list' },
    { path: '/pages/health/statistic/doctorStatistic/index', text: '就医统计', icon: 'home-filled', color: 'linear-gradient(135deg, #fc5c65 0%, #fd79a8 100%)', permission: 'health:doctorRecord:list' },
    { path: '/pages/health/statistic/marStatistic/index', text: '用药统计', icon: 'wallet-filled', color: 'linear-gradient(135deg, #fd79a8 0%, #e84393 100%)', permission: 'health:marRecord:list' },
    { path: '/pages/health/statistic/temperatureStatistic/index', text: '体温统计', icon: 'loop', color: 'linear-gradient(135deg, #f6d365 0%, #fda085 100%)', permission: 'health:temperatureRecord:list' }
  ])
	function navigateTo(path) {
    uni.navigateTo({
        url: path
      });
	}
</script>

<style lang="scss">
  /* #ifndef APP-NVUE */
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #f5f7fa;
    min-height: 100%;
    height: auto;
  }

  /* #endif */

  .work-container {
    padding: 120rpx 0 12rpx 0;
  }

  .section-header {
    padding: 12rpx 24rpx 8rpx;
  }

  .section-title {
    font-size: 28rpx;
    font-weight: 700;
    color: #333;
    position: relative;
    padding-left: 16rpx;
  }

  .section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6rpx;
    height: 28rpx;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 3rpx;
  }

  .grid-body {
    padding: 0 16rpx;
  }

  .grid-wrapper {
    display: flex;
    flex-wrap: wrap;
  }

  .grid-item {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16rpx 8rpx;
    box-sizing: border-box;
  }

  .item-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
  }

  .grid-item:active .item-icon {
    transform: scale(0.95);
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
  }

  .item-text {
    text-align: center;
    font-size: 22rpx;
    color: #333;
    font-weight: 500;
    line-height: 1.3;
  }
</style>
