<template>
  <div class="floating-todo" :class="{ 'expanded': isExpanded }">
    <!-- 悬浮按钮 -->
    <div class="floating-btn" @click="toggleExpanded">
      <i class="icon-calendar">📅</i>
      <span class="todo-count" v-if="!isExpanded">{{ todayTodos.length }}</span>
    </div>
    
    <!-- 展开的内容面板 -->
    <div class="todo-panel" v-show="isExpanded">
      <div class="panel-header">
        <h3>今日待办</h3>
        <button class="close-btn" @click="toggleExpanded">×</button>
      </div>
      
      <div class="panel-content">
        <!-- 今日待办列表 -->
        <div class="todo-section">
          <h4>待办事项 ({{ todayTodos.length }})</h4>
          <div class="todo-list">
            <div 
              v-for="todo in todayTodos" 
              :key="todo.id" 
              class="todo-item"
              :class="{ 'completed': todo.completed }"
            >
              <input 
                type="checkbox" 
                v-model="todo.completed" 
                @change="updateTodo(todo)"
              >
              <span class="todo-text">{{ todo.text }}</span>
              <span class="todo-time">{{ todo.time }}</span>
            </div>
          </div>
        </div>
        
        <!-- 添加新待办 -->
        <div class="add-todo-section">
          <h4>添加待办</h4>
          <div class="add-todo-form">
            <input 
              v-model="newTodoText" 
              type="text" 
              placeholder="输入待办事项..."
              @keyup.enter="addTodo"
              class="todo-input"
            >
            <input 
              v-model="newTodoTime" 
              type="time" 
              class="time-input"
            >
            <button @click="addTodo" class="add-btn">添加</button>
          </div>
        </div>
        
        <!-- 快捷操作 -->
        <div class="quick-actions">
          <button @click="addQuickTodo('回访重点客户')" class="quick-btn">回访重点客户</button>
          <button @click="addQuickTodo('整理客户资料')" class="quick-btn">整理客户资料</button>
          <button @click="addQuickTodo('准备明日计划')" class="quick-btn">准备明日计划</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';

// 状态管理
const isExpanded = ref(false);
const newTodoText = ref('');
const newTodoTime = ref('');

// 待办事项数据
const todos = reactive([
  {
    id: 1,
    text: '回访王女士 - 付定金阶段',
    time: '10:00',
    completed: false,
    date: new Date().toDateString()
  },
  {
    id: 2,
    text: '联系李先生 - 课程咨询',
    time: '14:00',
    completed: false,
    date: new Date().toDateString()
  },
  {
    id: 3,
    text: '准备张总的合同材料',
    time: '16:00',
    completed: true,
    date: new Date().toDateString()
  },
  {
    id: 4,
    text: '整理本周客户跟进报告',
    time: '18:00',
    completed: false,
    date: new Date().toDateString()
  }
]);

// 计算今日待办
const todayTodos = computed(() => {
  const today = new Date().toDateString();
  return todos.filter(todo => todo.date === today);
});

// 方法
const toggleExpanded = () => {
  isExpanded.value = !isExpanded.value;
};

const updateTodo = (todo) => {
  // 这里可以添加保存到本地存储或发送到服务器的逻辑
  console.log('Todo updated:', todo);
};

const addTodo = () => {
  if (newTodoText.value.trim()) {
    const newTodo = {
      id: Date.now(),
      text: newTodoText.value,
      time: newTodoTime.value || '09:00',
      completed: false,
      date: new Date().toDateString()
    };
    todos.push(newTodo);
    newTodoText.value = '';
    newTodoTime.value = '';
  }
};

const addQuickTodo = (text) => {
  const newTodo = {
    id: Date.now(),
    text: text,
    time: '09:00',
    completed: false,
    date: new Date().toDateString()
  };
  todos.push(newTodo);
};

// 初始化
onMounted(() => {
  // 可以从本地存储加载数据
  const savedTodos = localStorage.getItem('floating-todos');
  if (savedTodos) {
    const parsed = JSON.parse(savedTodos);
    todos.splice(0, todos.length, ...parsed);
  }
});

// 监听数据变化，保存到本地存储
const saveTodos = () => {
  localStorage.setItem('floating-todos', JSON.stringify(todos));
};
</script>

<style lang="scss" scoped>
.floating-todo {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1000;
  
  .floating-btn {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
    position: relative;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 25px rgba(102, 126, 234, 0.5);
    }
    
    .icon-calendar {
      font-size: 24px;
      color: white;
    }
    
    .todo-count {
      position: absolute;
      top: -5px;
      right: -5px;
      background: #ff4757;
      color: white;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: bold;
    }
  }
  
  .todo-panel {
    position: absolute;
    top: 70px;
    left: 0;
    width: 350px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    animation: slideDown 0.3s ease;
    
    .panel-header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
      }
      
      .close-btn {
        background: none;
        border: none;
        color: white;
        font-size: 20px;
        cursor: pointer;
        padding: 0;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: background 0.2s;
        
        &:hover {
          background: rgba(255, 255, 255, 0.2);
        }
      }
    }
    
    .panel-content {
      padding: 20px;
      max-height: 400px;
      overflow-y: auto;
      
      .todo-section {
        margin-bottom: 20px;
        
        h4 {
          margin: 0 0 10px 0;
          font-size: 14px;
          color: #333;
          font-weight: 600;
        }
        
        .todo-list {
          .todo-item {
            display: flex;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid #f0f0f0;
            
            &:last-child {
              border-bottom: none;
            }
            
            &.completed {
              opacity: 0.6;
              
              .todo-text {
                text-decoration: line-through;
              }
            }
            
            input[type="checkbox"] {
              margin-right: 10px;
              width: 16px;
              height: 16px;
            }
            
            .todo-text {
              flex: 1;
              font-size: 13px;
              color: #333;
            }
            
            .todo-time {
              font-size: 12px;
              color: #666;
              background: #f5f5f5;
              padding: 2px 6px;
              border-radius: 4px;
            }
          }
        }
      }
      
      .add-todo-section {
        margin-bottom: 20px;
        
        h4 {
          margin: 0 0 10px 0;
          font-size: 14px;
          color: #333;
          font-weight: 600;
        }
        
        .add-todo-form {
          display: flex;
          gap: 8px;
          flex-wrap: wrap;
          
          .todo-input {
            flex: 1;
            min-width: 150px;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 13px;
            
            &:focus {
              outline: none;
              border-color: #667eea;
            }
          }
          
          .time-input {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 13px;
            
            &:focus {
              outline: none;
              border-color: #667eea;
            }
          }
          
          .add-btn {
            padding: 8px 16px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 13px;
            cursor: pointer;
            transition: background 0.2s;
            
            &:hover {
              background: #5a6fd8;
            }
          }
        }
      }
      
      .quick-actions {
        .quick-btn {
          display: block;
          width: 100%;
          margin-bottom: 8px;
          padding: 8px 12px;
          background: #f8f9fa;
          border: 1px solid #e9ecef;
          border-radius: 6px;
          font-size: 13px;
          color: #495057;
          cursor: pointer;
          transition: all 0.2s;
          text-align: left;
          
          &:hover {
            background: #e9ecef;
            border-color: #dee2e6;
          }
          
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
  
  &.expanded {
    .floating-btn {
      background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    }
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 移动端优化 */
@media (max-width: 768px) {
  .floating-todo {
    top: 15px;
    left: 15px;
    
    .floating-btn {
      width: 50px;
      height: 50px;
      
      .icon-calendar {
        font-size: 20px;
      }
      
      .todo-count {
        width: 18px;
        height: 18px;
        font-size: 11px;
        top: -3px;
        right: -3px;
      }
    }
    
    .todo-panel {
      width: 300px;
      top: 60px;
      
      .panel-header {
        padding: 12px 15px;
        
        h3 {
          font-size: 14px;
        }
      }
      
      .panel-content {
        padding: 15px;
        
        h4 {
          font-size: 13px;
        }
      }
      
      .todo-item {
        padding: 8px 0;
        
        .todo-text {
          font-size: 13px;
        }
        
        .todo-time {
          font-size: 11px;
        }
      }
      
      .todo-input {
        font-size: 13px;
        padding: 8px;
      }
      
      .time-input {
        font-size: 13px;
        padding: 8px;
      }
      
      .add-btn, .quick-btn {
        font-size: 12px;
        padding: 8px 12px;
      }
    }
  }
}

/* 小屏幕优化 */
@media (max-width: 480px) {
  .floating-todo {
    top: 10px;
    left: 10px;
    
    .floating-btn {
      width: 45px;
      height: 45px;
      
      .icon-calendar {
        font-size: 18px;
      }
      
      .todo-count {
        width: 16px;
        height: 16px;
        font-size: 10px;
      }
    }
    
    .todo-panel {
      width: 280px;
      top: 55px;
      
      .panel-header {
        padding: 10px 12px;
        
        h3 {
          font-size: 13px;
        }
      }
      
      .panel-content {
        padding: 12px;
        
        h4 {
          font-size: 12px;
        }
      }
      
      .todo-item {
        padding: 6px 0;
        
        .todo-text {
          font-size: 12px;
          line-height: 1.3;
        }
        
        .todo-time {
          font-size: 10px;
        }
      }
      
      .add-todo-form {
        flex-direction: column;
        gap: 8px;
        
        .todo-input, .time-input {
          width: 100%;
          font-size: 12px;
          padding: 6px;
        }
        
        .add-btn {
          width: 100%;
        }
      }
      
      .quick-actions {
        flex-direction: column;
        gap: 6px;
        
        .quick-btn {
          width: 100%;
          font-size: 11px;
          padding: 6px 10px;
        }
      }
    }
  }
}

</style>