<template>
  <div class="task-message-page">
    <s-header :name="$t('taskMessage.taskMessage')" :noback="false"></s-header>
    
    <div class="task-message-container">
      <div class="task-list">
        <!-- 设备初始化审批 -->
        <div 
          class="task-card" 
          :class="{'glow-effect': hoverIndex === 0}"
          @mouseover="hoverIndex = 0"
          @mouseleave="hoverIndex = -1"
          @click="pushPageList('/taskEquipment')"
        >
          <div class="card-content">
            <div class="icon-container" :style="{ backgroundColor: lightenColor('#4d6add', 80) }">
              <van-icon name="setting" class="task-icon" color="#4d6add" />
            </div>
            <div class="task-info">
              <div class="task-title">{{ $t('taskMessage.equipmentInitializationApproval') }}</div>

            </div>
            <div class="badge-icon">
              <van-icon name="arrow" color="#4d6add" size="18" />
            </div>
          </div>
          <div class="task-progress" :style="{ width: '100%' }"></div>
        </div>
        
        <!-- 分销申请审批 -->
        <div 
          v-if="user.ifForeign != '1'" 
          class="task-card" 
          :class="{'glow-effect': hoverIndex === 1}"
          @mouseover="hoverIndex = 1"
          @mouseleave="hoverIndex = -1"
          @click="pushPageList('/taskProportion')"
        >
          <div class="card-content">
            <div class="icon-container" :style="{ backgroundColor: lightenColor('#4d6add', 80) }">
              <van-icon name="cluster" class="task-icon" color="#4d6add" />
            </div>
            <div class="task-info">
              <div class="task-title">{{ $t('taskMessage.distributionApplicationApproval') }}</div>
            </div>
            <div class="badge-icon">
              <van-icon name="arrow" color="#4d6add" size="18" />
            </div>
          </div>
          <div class="task-progress" :style="{ width: '100%' }"></div>
        </div>
        
        <!-- 退款提醒 -->
        <div 
          v-if="user.type < 2" 
          class="task-card" 
          :class="{'glow-effect': hoverIndex === 2}"
          @mouseover="hoverIndex = 2"
          @mouseleave="hoverIndex = -1"
          @click="pushPageList('/refundReminder')"
        >
          <div class="card-content">
            <div class="icon-container" :style="{ backgroundColor: lightenColor('#4d6add', 80) }">
              <van-icon name="balance-list" class="task-icon" color="#4d6add" />
            </div>
            <div class="task-info">
              <div class="task-title">{{ $t('taskMessage.refundRemind') }}</div>
            </div>
            <div class="badge-icon">
              <van-icon name="arrow" color="#4d6add" size="18" />
            </div>
          </div>
          <div class="task-progress" :style="{ width: '100%' }"></div>
        </div>
        
        <!-- 今日糖单 -->
        <div 
          v-if="user.type == 0 || user.type == 2 || user.type == 3" 
          class="task-card" 
          :class="{'glow-effect': hoverIndex === 3}"
          @mouseover="hoverIndex = 3"
          @mouseleave="hoverIndex = -1"
          @click="pushPageList('/toDaySugarList')"
        >
          <div class="card-content">
            <div class="icon-container" :style="{ backgroundColor: lightenColor('#4d6add', 80) }">
              <van-icon name="notes" class="task-icon" color="#4d6add" />
            </div>
            <div class="task-info">
              <div class="task-title">{{ $t('device.todaysSugarList') }}</div>
            </div>
            <div class="badge-icon">
              <van-icon name="arrow" color="#4d6add" size="18" />
            </div>
          </div>
          <div class="task-progress" :style="{ width: '100%' }"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import sHeader from "@/components/SimpleHeader";
import { useRouter } from "vue-router";
import { getLoginUser } from "../../common/js/utils";

export default {
  components: { sHeader },
  setup() {
    const router = useRouter();
    const user = getLoginUser();
    // 状态控制
    const hoverIndex = ref(-1);
    // 初始化页面获取列表
    onMounted(async () => {
    });
    const lightenColor = (hex, percent) => {
      console.log(hex, percent);
      return '#e6f0ff';
    };
    const pushPageList = (url) => {
      router.push(url);
    };
    return { pushPageList, user, hoverIndex, lightenColor };
  },
};
</script>

<style lang="less" scoped>
@theme-color: #4d6add;
@light-bg: #f5f8ff;
@card-shadow: 0 4px 12px rgba(77, 106, 221, 0.15);
@hover-shadow: 0 8px 24px rgba(77, 106, 221, 0.25);
@transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
@text-dark: #333;
@text-light: #666;
@card-radius: 16px;

.task-message-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: @light-bg;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  
  .task-message-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
    overflow-y: auto;
    
    .task-list {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 20px;
    }
  }
}

/* 任务卡片样式 */
.task-card {
  background: white;
  border-radius: @card-radius;
  box-shadow: @card-shadow;
  padding: 18px 16px;
  position: relative;
  overflow: hidden;
  transition: @transition;
  cursor: pointer;
  border: 1px solid rgba(77, 106, 221, 0.1);
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: @hover-shadow;
    border-color: rgba(77, 106, 221, 0.3);
    
    .badge-icon {
      transform: translateX(5px);
    }
  }
  
  &.glow-effect {
    border-color: rgba(77, 106, 221, 0.5);
    background-color: rgba(77, 106, 221, 0.03);
  }
  
  .card-content {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
  }
  
  .icon-container {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: @transition;
    
    .task-icon {
      font-size: 24px;
    }
  }
  
  .task-info {
    flex: 1;
    margin-left: 16px;
    margin-right: 10px;
    overflow: hidden;
    
    .task-title {
      font-size: 17px;
      font-weight: 600;
      color: @text-dark;
      margin-bottom: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  
  }
  
  .badge-icon {
    width: 30px;
    height: 30px;
    background-color: fade(@theme-color, 10%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: @transition;
  }
  
  .task-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, @theme-color, lighten(@theme-color, 20%));
    border-bottom-left-radius: @card-radius;
    transition: all 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

/* 动画效果 */
@keyframes cardEntry {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.task-card {
  animation: cardEntry 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  opacity: 0;
  
  &:nth-child(1) { animation-delay: 0.1s; }
  &:nth-child(2) { animation-delay: 0.2s; }
  &:nth-child(3) { animation-delay: 0.3s; }
  &:nth-child(4) { animation-delay: 0.4s; }
}

/* 响应式设计 */
@media (max-width: 480px) {
  .task-message-container {
    padding: 12px;
  }
  
  .task-card {
    padding: 16px 14px;
    
    .icon-container {
      width: 50px;
      height: 50px;
      
      .task-icon {
        font-size: 22px;
      }
    }
    
    .task-info {
      .task-title {
        font-size: 16px;
      }
    }
  }

}
</style>
