<template>
  <div class="workbench-page">
    <div class="title">总体情况</div>
    <div class="content">
      <!-- 统计卡片区域 -->
      <div class="stats-cards">
        <div class="stat-card">
          <div class="stat-icon blue">
            <el-icon><House /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-label">企业总数量</div>
            <div class="stat-value">100</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon purple">
            <el-icon><User /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-label">注册总数量</div>
            <div class="stat-value">1050</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon orange">
            <el-icon><Star /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-label">游客访问量</div>
            <div class="stat-value">1136</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon green">
            <el-icon><Document /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-label">最近3个月加盟</div>
            <div class="stat-value">8</div>
          </div>
        </div>
      </div>

      <!-- 图表和公告区域 -->
      <div class="chart-section">
        <div class="chart-container">
          <div class="chart-title">近3个月加盟量趋势</div>
          <v-chart :style="{ height: '300px' }" class="chart" :option="chartOption" />
        </div>
        <div class="notice-section">
          <div class="notice-item">
            <div class="notice-title">公告（企业端）</div>
            <div
              v-if="!announcementEditing"
              class="notice-content"
              @dblclick="handleAnnouncementEdit"
            >
              {{ announcement || '暂无公告内容，双击编辑' }}
            </div>
            <el-input
              v-else
              v-model="announcement"
              placeholder="请输入公告内容"
              type="textarea"
              :rows="3"
              class="notice-input"
              @blur="handleAnnouncementSave"
              @keyup.enter.ctrl="handleAnnouncementSave"
              ref="announcementInputRef"
            />
          </div>
          <div class="notice-item">
            <div class="notice-title">备忘录</div>
            <div v-if="!memoEditing" class="notice-content" @dblclick="handleMemoEdit">
              {{ memo || '暂无备忘录内容，双击编辑' }}
            </div>
            <el-input
              v-else
              v-model="memo"
              placeholder="请输入备忘录内容"
              type="textarea"
              :rows="3"
              class="notice-input"
              @blur="handleMemoSave"
              @keyup.enter.ctrl="handleMemoSave"
              ref="memoInputRef"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { LineChart } from 'echarts/charts'
import {
  GridComponent,
  TitleComponent,
  LegendComponent,
  TooltipComponent,
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import { House, User, Star, Document } from '@element-plus/icons-vue'

use([GridComponent, TitleComponent, LegendComponent, TooltipComponent, LineChart, CanvasRenderer])

const announcement = ref('这是一条企业端公告示例内容')
const memo = ref('这是一条备忘录示例内容')

// 编辑状态
const announcementEditing = ref(false)
const memoEditing = ref(false)

// 输入框引用
const announcementInputRef = ref(null)
const memoInputRef = ref(null)

// 模拟管理员权限检查
const isAdmin = ref(true) // 实际项目中应该从用户状态或权限系统获取

// 公告编辑处理
const handleAnnouncementEdit = () => {
  if (!isAdmin.value) {
    ElMessage.warning('您没有编辑权限')
    return
  }
  announcementEditing.value = true
  nextTick(() => {
    announcementInputRef.value?.focus()
  })
}

const handleAnnouncementSave = () => {
  announcementEditing.value = false
  // 这里可以添加保存到后端的逻辑
  ElMessage.success('公告保存成功')
}

// 备忘录编辑处理
const handleMemoEdit = () => {
  if (!isAdmin.value) {
    ElMessage.warning('您没有编辑权限')
    return
  }
  memoEditing.value = true
  nextTick(() => {
    memoInputRef.value?.focus()
  })
}

const handleMemoSave = () => {
  memoEditing.value = false
  // 这里可以添加保存到后端的逻辑
  ElMessage.success('备忘录保存成功')
}

// 图表数据
const chartData = [
  { name: '07-01', value: 12 },
  { name: '07-02', value: 48 },
  { name: '07-03', value: 46 },
  { name: '07-04', value: 28 },
  { name: '07-05', value: 42 },
  { name: '07-06', value: 43 },
  { name: '07-07', value: 27 },
]

const chartOption = computed(() => {
  return {
    tooltip: {
      trigger: 'axis',
      //   formatter: '{b}: {c}件',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: chartData.map((item) => item.name),
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: '#f0f0f0',
        },
      },
    },
    series: [
      {
        data: chartData.map((item) => item.value),
        type: 'line',
        name: '加盟量',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          color: '#409EFF',
          width: 2,
        },
        itemStyle: {
          color: '#409EFF',
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(64, 158, 255, 0.3)',
              },
              {
                offset: 1,
                color: 'rgba(64, 158, 255, 0.1)',
              },
            ],
          },
        },
      },
    ],
  }
})
</script>

<style lang="scss" scoped>
.workbench-page {
  padding: 20px;
}

.title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}

.content {
  .stats-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;

    .stat-card {
      background: white;
      border-radius: 8px;
      padding: 20px;
      display: flex;
      align-items: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

      .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;

        .el-icon {
          font-size: 24px;
          color: white;
        }

        &.blue {
          background: #409eff;
        }

        &.purple {
          background: #9c27b0;
        }

        &.orange {
          background: #ff9800;
        }

        &.green {
          background: #4caf50;
        }
      }

      .stat-info {
        .stat-label {
          font-size: 14px;
          color: #666;
          margin-bottom: 5px;
        }

        .stat-value {
          font-size: 28px;
          font-weight: 700;
          color: #333;
        }
      }
    }
  }

  .chart-section {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;

    .chart-container {
      background: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

      .chart-title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 20px;
        color: #333;
      }

      .chart {
        width: 100%;
        height: 300px;
      }
    }

    .notice-section {
      display: flex;
      flex-direction: column;
      gap: 20px;

      .notice-item {
        background: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        .notice-title {
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 15px;
          color: #333;
        }

        .notice-content {
          min-height: 80px;
          padding: 10px;
          border: 1px solid #e4e7ed;
          border-radius: 4px;
          background-color: #fafafa;
          color: #666;
          line-height: 1.5;
          cursor: pointer;
          transition: all 0.3s ease;

          &:hover {
            border-color: #409eff;
            background-color: #f0f8ff;
          }

          &:empty::before {
            content: attr(placeholder);
            color: #c0c4cc;
          }
        }

        .notice-input {
          :deep(.el-textarea__inner) {
            border: 1px solid #e4e7ed;
            border-radius: 4px;
            resize: none;
          }
        }
      }
    }
  }
}

@media (max-width: 1200px) {
  .content {
    .stats-cards {
      grid-template-columns: repeat(2, 1fr);
    }

    .chart-section {
      grid-template-columns: 1fr;
    }
  }
}

@media (max-width: 768px) {
  .content {
    .stats-cards {
      grid-template-columns: 1fr;
    }
  }
}
</style>