<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import axios from 'axios';
import * as echarts from 'echarts';

// 输入框数据
const input1 = ref('');
const input2 = ref('');

// 登录模态框数据
const loginDialogVisible = ref(false);
const isLoggedIn = ref(false);
const username = ref('未记录');
const loginForm = ref({
  username: '',
  password: '',
  loginUrl: 'https://4701268539-esh.qdk63ayw8g.com'
});
const loginLoading = ref(false);
const loginError = ref('');

// 表格数据
const tableData = ref([]);
const tableLoading = ref(false);
const tableError = ref('');

// 折线图数据
const chartLabels = ref();
const chartData1 = ref();
const loading = ref(false);
const error = ref('');

// ECharts实例
const chart1Ref = ref(null);
const chart1 = ref(null);

// 初始化ECharts图表
function initCharts() {
  console.log('开始初始化图表');
  console.log('chart1Ref.value:', chart1Ref.value);
  
  // 初始化图表
  if (chart1Ref.value) {
    console.log('初始化图表');
    chart1.value = echarts.init(chart1Ref.value);
    updateChart1();
  }
  
  console.log('图表初始化完成');
}

// 更新图表1
function updateChart1() {
  console.log('更新图表1');
  console.log('chart1.value:', chart1.value);
  console.log('chartData1.value:', chartData1.value);
  console.log('chartLabels.value:', chartLabels.value);
  
  if (!chart1.value) return;
  
  const option = {
    title: {
      text: '今日盈亏数据',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['数据'],
      bottom: 0
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '30%',
      top: '20%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: chartLabels.value,
      axisLabel: {
        rotate: 45,
        interval: chartLabels.value.length > 12 ? Math.floor(chartLabels.value.length / 12) : 0, // 根据标签数量动态调整间隔，确保至少显示一些标签
        fontSize: 10
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '数据',
        type: 'line',
        smooth: true,
        data: chartData1.value,
        itemStyle: {
          color: '#4CAF50'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(76, 175, 80, 0.3)'
            }, {
              offset: 1,
              color: 'rgba(76, 175, 80, 0.1)'
            }]
          }
        }
      }
    ]
  };
  
  console.log('设置图表1选项');
  chart1.value.setOption(option);
  console.log('图表1更新完成');
}

// 监听窗口大小变化
function handleResize() {
  chart1.value?.resize();
}

// 从后端获取折线图数据
async function fetchChartData() {
  console.log('开始获取图表数据');
  loading.value = true;
  error.value = '';
  
  try {
    // 获取折线图数据
    console.log('获取折线图数据');
    const response = await axios.get('http://localhost:8080/api/charts/line1');
    console.log('折线图数据响应:', response.data);
    if (response.data) {
      // 更新数据
      if (response.data.data) {
        chartData1.value = response.data.data;
      }
      // 更新标签
      if (response.data.labels) {
        chartLabels.value = response.data.labels;
      }
      // 确保数据长度与标签长度一致
      if (chartData1.value.length !== chartLabels.value.length) {
        console.warn('数据长度与标签长度不一致，使用默认数据');
        chartData1.value = generateRandomData(chartLabels.value.length);
      }
    }
    
    console.log('图表数据获取完成');
    console.log('chartData1.value:', chartData1.value);
    console.log('chartLabels.value:', chartLabels.value);
    console.log('标签数量:', chartLabels.value.length);
    
    // 更新图表
    nextTick(() => {
      console.log('更新图表数据');
      updateChart1();
    });
  } catch (err) {
    console.error('获取图表数据失败:', err);
    error.value = '获取图表数据失败，请刷新页面重试';
    // 使用默认数据
    console.log('使用默认数据');
    console.log('默认 chartData1.value:', chartData1.value);
    console.log('默认 chartLabels.value:', chartLabels.value);
    
    // 更新图表
    nextTick(() => {
      console.log('使用默认数据更新图表');
      updateChart1();
    });
  } finally {
    loading.value = false;
  }
}

// 从后端获取表格数据
async function fetchTableData() {
  tableLoading.value = true;
  tableError.value = '';
  
  try {
    const response = await axios.get('http://localhost:8080/api/table');
    if (response.data && Array.isArray(response.data)) {
      tableData.value = response.data;
    }
  } catch (err) {
    tableError.value = '获取表格数据失败，请刷新页面重试';
    console.error('Error fetching table data:', err);
  } finally {
    tableLoading.value = false;
  }
}

// 从后端获取用户设置数据（用户名、止盈点、止亏点）
async function fetchUserSettings() {
  console.log('开始获取用户设置数据');
  
  try {
    // 获取用户设置数据
    console.log('获取用户设置数据');
    const response = await axios.get('http://localhost:8080/api/ocr/userSettings');
    console.log('用户设置数据响应:', response.data);
    if (response.data) {
      // 更新用户名
      if (response.data.username) {
        username.value = response.data.username;
        isLoggedIn.value = true;
      }
      // 更新止盈点
      if (response.data.winNum) {
        input1.value = response.data.winNum;
      }
      // 更新止亏点
      if (response.data.loseNum) {
        input2.value = response.data.loseNum;
      }
    }
    
    console.log('用户设置数据获取完成');
    console.log('username.value:', username.value);
    console.log('input1.value:', input1.value);
    console.log('input2.value:', input2.value);
  } catch (err) {
    console.error('获取用户设置数据失败:', err);
    // 失败时不显示错误，使用默认值
  }
}

onMounted(() => {
  console.log('组件挂载完成');
  
  // 从后端获取数据
  fetchChartData();
  fetchTableData();
  fetchUserSettings();
  
  // 初始化图表（延迟一点时间，确保DOM完全渲染）
  setTimeout(() => {
    console.log('延迟初始化图表');
    nextTick(() => {
      console.log('nextTick后初始化图表');
      initCharts();
    });
  }, 100);
  
  // 监听窗口大小变化
  window.addEventListener('resize', handleResize);
});

// 处理登录
async function handleLogin() {
  loginError.value = '';
  loginLoading.value = true;
  
  try {
    console.log('登录信息:', loginForm.value);
    
    // 验证表单
    if (!loginForm.value.username || !loginForm.value.password || !loginForm.value.loginUrl) {
      loginError.value = '请填写完整登录信息';
      return;
    }
    
    // 构建登录API地址
    const loginApiUrl = `http://localhost:8080/api/ocr/saveUserInfo`;
    console.log('登录API地址:', loginApiUrl);
    
    // 调用登录API
    const response = await axios.post(loginApiUrl, {
      username: loginForm.value.username,
      password: loginForm.value.password
    });
    
    // 处理登录结果
    if (response.data && response.code !== 500) {
      // 登录成功
      loginLoading.value = false;
      loginDialogVisible.value = false;
      isLoggedIn.value = true;
      
      // 更新用户名
      username.value = loginForm.value.username;
      
      // 重置表单
      loginForm.value = {
        username: '',
        password: '',
        loginUrl: 'https://4701268539-esh.qdk63ayw8g.com'
      };
      
      console.log('登录成功:', response.data);
    } else {
      // 登录失败
      loginError.value = response.data.message || '登录失败，请检查输入信息';
      console.error('登录失败:', response.data);
    }
    
  } catch (err) {
    loginError.value = '登录失败，请检查网络连接或登录地址';
    console.error('登录失败:', err);
  } finally {
    loginLoading.value = false;
  }
}

// 处理退出登录
function handleLogout() {
  console.log('退出登录');
  isLoggedIn.value = false;
  // 重置用户名和账户余额
  username.value = '用户名';
  // 清除登录状态
  localStorage.removeItem('token');
  // 这里可以添加其他清理逻辑
  // 1. 清除用户信息
  // 2. 重置相关数据
  // 3. 调用退出登录API（可选）
}

// 处理确认按钮点击
async function handleConfirm() {
  console.log('确认按钮点击，止盈点:', input1.value, '止亏点:', input2.value);
  
  // 验证输入
  if (!input1.value || !input2.value) {
    alert('请填写完整的止盈止亏点');
    return;
  }
  
  try {
    // 构建提交数据
    const submitData = {
      winNum: input1.value,
      loseNum: input2.value
    };
    
    console.log('提交数据:', submitData);
    
    // 调用后端API
    const response = await axios.post('http://localhost:8080/api/ocr/saveUserInfo', submitData);
    
    // 处理响应结果
    if (response.data && response.code !== 500) {
      console.log('提交成功:', response.data);
      alert('设置保存成功');
    } else {
      console.error('提交失败:', response.data);
      alert('设置保存失败: ' + (response.data.message || '未知错误'));
    }
    
  } catch (err) {
    console.error('提交失败:', err);
    alert('设置保存失败，请检查网络连接');
  }
}

// 处理停止按钮点击
async function handleStop() {
  console.log('停止按钮点击');
  
  try {
    // 调用后端停止API
    const response = await axios.post('http://localhost:8080/api/ocr/saveUserInfo', {
      onOff: 0
    });
    
    // 处理响应结果
    if (response.data && response.code !== 500) {
      console.log('停止成功:', response.data);
      alert('停止成功');
    } else {
      console.error('停止失败:', response.data);
      alert('停止失败: ' + (response.data.message || '未知错误'));
    }
    
  } catch (err) {
    console.error('停止失败:', err);
    alert('停止操作失败，请检查网络连接');
  }
}

onUnmounted(() => {
  // 销毁图表
  chart1.value?.dispose();
  
  // 移除事件监听器
  window.removeEventListener('resize', handleResize);
});
</script>

<template>
  <div class="main-container">
    <!-- 左边区域 -->
    <div class="left-section">
      <!-- 账号信息面板 -->
      <div class="account-info">
        <div class="account-avatar">👤</div>
        <div class="account-details">
          <div class="account-name">{{ username }}</div>
        </div>
        <div class="account-actions">
          <button type="button" class="login-button" @click="loginDialogVisible = true">账号信息</button>
        </div>
      </div>
      
      <!-- 登录模态框 -->
      <div v-if="loginDialogVisible" class="modal-overlay">
        <div class="modal-content" @click.stop>
          <div class="modal-header">
            <h3>登录</h3>
            <button type="button" class="modal-close" @click="loginDialogVisible = false">×</button>
          </div>
          <div class="modal-body">
            <div v-if="loginError" class="modal-error">
              {{ loginError }}
            </div>
            <form @submit.prevent="handleLogin">
              <div class="form-group">
                <label for="username">账号</label>
                <input type="text" id="username" v-model="loginForm.username" placeholder="请输入账号" required>
              </div>
              <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" v-model="loginForm.password" placeholder="请输入密码" required>
              </div>
              <div class="form-group">
                <label for="loginUrl">登录地址</label>
                <input type="url" id="loginUrl" v-model="loginForm.loginUrl" placeholder="请输入登录地址" required>
              </div>
              <div class="form-actions">
                <button type="button" class="cancel-button" @click="loginDialogVisible = false">取消</button>
                <button type="submit" class="submit-button" :disabled="loginLoading">
                  <span v-if="loginLoading">保存中...</span>
                  <span v-else>保存</span>
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
      
      <!-- 顶部输入框区域 -->
      <div class="top-inputs">
        <div class="input-group">
          <div class="input-with-button">
            <input type="text" id="input1" v-model="input1" placeholder="请输入止盈点">
          </div>
        </div>
        <div class="input-group">
          <div class="input-with-button">
            <input type="text" id="input2" v-model="input2" placeholder="请输入止亏点">
            <div class="button-group">
              <button type="button" class="confirm-button" @click="handleConfirm">确认</button>
              <button type="button" class="stop-button" @click="handleStop">停止</button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 表格错误提示 -->
      <div v-if="tableError" class="error-message">
        {{ tableError }}
        <button class="retry-button" @click="fetchTableData">重试</button>
      </div>
      
      <!-- 主体表格区域 -->
      <div class="table-container">
        <div v-if="tableLoading" class="table-loading">
          加载中...
        </div>
        <table v-else class="data-table">
          <thead>
            <tr>
              <th>ID</th>
              <th>期数</th>
              <th>开奖时间</th>
              <th>开奖号码</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in tableData" :key="item.id">
              <td>{{ item.id }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.time }}</td>
              <td>{{ item.result }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 右边折线图区域 -->
    <div class="right-section">
      <!-- 错误提示 -->
      <div v-if="error" class="error-message">
        {{ error }}
        <button class="retry-button" @click="fetchChartData">重试</button>
      </div>
      
      <div class="chart-container">
        <div v-if="loading" class="chart-loading">
          加载中...
        </div>
        <div v-else ref="chart1Ref" class="echart-container" style="width: 100%; height: 100%; border: 1px solid #ddd;"></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.main-container {
  display: flex;
  gap: 20px;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  align-items: stretch;
}

.left-section {
  flex: 1;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

/* 账号信息面板 */
.account-info {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  flex-shrink: 0;
}

.account-avatar {
  font-size: 2.5rem;
  line-height: 1;
}

.account-details {
  flex: 1;
}

.account-name {
  font-weight: 700;
  color: #333;
  font-size: 1rem;
  margin-bottom: 4px;
}

.account-role {
  font-size: 0.85rem;
  color: #666;
}

.account-actions {
  display: flex;
  gap: 8px;
}

.login-button {
  padding: 6px 12px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.login-button:hover {
  background-color: #1976D2;
}

.login-button:active {
  background-color: #1565C0;
  transform: translateY(1px);
}

.logout-button {
  padding: 6px 12px;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.logout-button:hover {
  background-color: #5a6268;
}

.logout-button:active {
  background-color: #495057;
  transform: translateY(1px);
}

/* 顶部输入框区域 */
.top-inputs {
  display: flex;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}

.input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-with-button {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.input-with-button input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.input-with-button input:focus {
  outline: none;
  border-color: #2196F3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}

.confirm-button {
  padding: 10px 16px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}

.confirm-button:hover {
  background-color: #1976D2;
}

.confirm-button:active {
  background-color: #1565C0;
  transform: translateY(1px);
}

/* 按钮组 */
.button-group {
  display: flex;
  gap: 8px;
}

/* 停止按钮 */
.stop-button {
  padding: 10px 16px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}

.stop-button:hover {
  background-color: #d32f2f;
}

.stop-button:active {
  background-color: #b71c1c;
  transform: translateY(1px);
}

/* 表格区域 */
.table-container {
  flex: 1;
  overflow: auto;
  min-height: 0;
  max-height: 600px;
}

.right-section {
  flex: 2;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  box-sizing: border-box;
}

/* 图表区域 */
.chart-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-height: 0;
}

.input-group label {
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

/* 表格区域 */
.table-container {
  flex: 1;
  overflow: auto;
}

.table-container h3 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th,
.data-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

.data-table th {
  background-color: #f5f5f5;
  font-weight: 600;
  color: #333;
  position: sticky;
  top: 0;
  z-index: 1;
}

.data-table tr:hover {
  background-color: #f9f9f9;
}

/* 状态标签 */
.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-normal {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.status-warning {
  background-color: #fff3e0;
  color: #ef6c00;
}

.status-error {
  background-color: #ffebee;
  color: #c62828;
}

/* 错误提示 */
.error-message {
  background-color: #ffebee;
  color: #c62828;
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.retry-button {
  padding: 4px 12px;
  background-color: #c62828;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.retry-button:hover {
  background-color: #b71c1c;
}

/* 加载状态 */
.chart-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 250px;
  font-size: 14px;
  color: #666;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.table-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  font-size: 14px;
  color: #666;
  background-color: #f5f5f5;
  border-radius: 4px;
  margin-top: 15px;
}

/* 图表区域 */
.chart-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.chart-container h3 {
  margin: 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.echart-container {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
}

/* 登录模态框 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 450px;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.modal-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background-color: #f5f5f5;
  color: #666;
}

.modal-body {
  padding: 20px;
}

.modal-error {
  background-color: #ffebee;
  color: #c62828;
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 14px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.form-group input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.form-group input:focus {
  outline: none;
  border-color: #2196F3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

.cancel-button {
  padding: 10px 20px;
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-button:hover {
  background-color: #e0e0e0;
}

.submit-button {
  padding: 10px 20px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.submit-button:hover:not(:disabled) {
  background-color: #1976D2;
}

.submit-button:active:not(:disabled) {
  background-color: #1565C0;
  transform: translateY(1px);
}

.submit-button:disabled {
  background-color: #bdbdbd;
  cursor: not-allowed;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .main-container {
    flex-direction: column;
  }
  
  .top-inputs {
    flex-direction: column;
  }
  
  .right-section {
    flex-direction: column;
  }
  
  .chart-container {
    min-height: 300px;
  }
  
  .modal-content {
    width: 95%;
    margin: 20px;
  }
}
</style>