<template>
  <vab-card :body-style="{ height: '300px' }" class="chart-card">
    <template #header>
      <div class="card-header">
        <span class="title">
          <vab-icon icon="line-chart-line" class="mr-5" />
          出入人流趋势
        </span>
        <el-tag size="small" type="success" effect="plain">今日实时</el-tag>
      </div>
    </template>
    <vab-chart :option="option" />
  </vab-card>
</template>

<script setup>
import { reactive, watch, onMounted, onBeforeUnmount } from 'vue'
import { graphic } from 'echarts/core'
import { useSettingsStore } from '/@/store/modules/settings'
import { storeToRefs } from 'pinia'

const settingsStore = useSettingsStore()
const { theme } = storeToRefs(settingsStore)

const option = reactive({
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' },
  },
  grid: {
    top: '15%',
    left: '2%',
    right: '4%',
    bottom: '0%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00'],
      axisLine: { show: false },
      axisTick: { show: false },
    },
  ],
  yAxis: [
    {
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#eee',
        },
      },
    },
  ],
  series: [
    {
      name: '进入',
      type: 'line',
      smooth: true,
      showSymbol: false,
      lineStyle: {
        width: 3,
        color: '#409eff',
      },
      areaStyle: {
        color: new graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
          { offset: 1, color: 'rgba(64, 158, 255, 0.05)' },
        ]),
      },
      data: [120, 450, 320, 180, 560, 340, 150],
    },
    {
      name: '外出',
      type: 'line',
      smooth: true,
      showSymbol: false,
      lineStyle: {
        width: 3,
        color: '#67c23a',
      },
      areaStyle: {
        color: new graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(103, 194, 58, 0.3)' },
          { offset: 1, color: 'rgba(103, 194, 58, 0.05)' },
        ]),
      },
      data: [50, 120, 480, 520, 230, 180, 60],
    },
  ],
})

// Optional: Dynamic update simulation
// ...
</script>

<style lang="scss" scoped>
.chart-card {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
    }
    .mr-5 { margin-right: 8px; }
  }
}
</style>