<!--
  图表组件示例页面
  展示所有图表组件的使用方法
-->

<template>
  <div class="charts-example">
    <el-page-header @back="goBack" class="mb-4">
      <template #content>
        <span class="text-large font-600">图表组件示例</span>
      </template>
    </el-page-header>

    <!-- 统计卡片 -->
    <el-card class="mb-4" shadow="never">
      <template #header>
        <span>统计卡片组件</span>
      </template>

      <StatCardGroup :items="statCards" />
    </el-card>

    <!-- 饼图和仪表盘 -->
    <el-row :gutter="16" class="mb-4">
      <el-col :xs="24" :md="12">
        <el-card shadow="never">
          <template #header>
            <span>资产状态分布（饼图）</span>
          </template>
          <PieChart
            :data="pieData"
            title="资产状态分布"
            type="doughnut"
            :show-legend="true"
            height="400px"
            :custom-color="true"
          />
        </el-card>
      </el-col>

      <el-col :xs="24" :md="12">
        <el-card shadow="never">
          <template #header>
            <span>资产利用率（仪表盘）</span>
          </template>
          <GaugeChart
            :value="utilizationRate"
            :min="0"
            :max="100"
            title="资产利用率"
            unit="%"
            height="400px"
          />
        </el-card>
      </el-col>
    </el-row>

    <!-- 柱状图 -->
    <el-card class="mb-4" shadow="never">
      <template #header>
        <span>资产分布统计（柱状图）</span>
      </template>
      <BarChart
        :data="barData"
        title="按机构统计资产数量"
        type="vertical"
        x-axis-label="机构"
        y-axis-label="数量"
        height="400px"
      />
    </el-card>

    <!-- 折线图 -->
    <el-card class="mb-4" shadow="never">
      <template #header>
        <span>资产价值趋势（折线图）</span>
      </template>
      <LineChart
        :data="lineData"
        :series="lineSeries"
        title="近12个月资产价值趋势"
        :area="true"
        :smooth="true"
        x-axis-label="月份"
        y-axis-label="金额（万元）"
        height="400px"
        :show-data-zoom="true"
      />
    </el-card>

    <!-- 漏斗图 -->
    <el-row :gutter="16" class="mb-4">
      <el-col :span="24">
        <el-card shadow="never">
          <template #header>
            <span>资产状态流转（漏斗图）</span>
          </template>
          <FunnelChart
            :data="funnelData"
            title="资产状态流转统计"
            height="400px"
          />
        </el-card>
      </el-col>
    </el-row>

    <!-- 业务图表示例 -->
    <el-card class="mb-4" shadow="never">
      <template #header>
        <span>业务图表组件示例</span>
      </template>

      <el-row :gutter="16">
        <el-col :xs="24" :md="12" class="mb-4">
          <h4>资产状态图表</h4>
          <AssetStatusChart
            :data="assetStatusData"
            @click="handleAssetStatusClick"
          />
        </el-col>

        <el-col :xs="24" :md="12">
          <h4>资产利用率</h4>
          <AssetUtilizationChart
            :total-assets="1000"
            :used-assets="750"
          />
        </el-col>
      </el-row>
    </el-card>

    <!-- 代码示例 -->
    <el-card shadow="never">
      <template #header>
        <span>使用示例</span>
      </template>

      <el-tabs>
        <el-tab-pane label="统计卡片">
          <pre class="code-block"><code>&lt;StatCard
  title="资产总数"
  :value="1000"
  unit="台"
  :icon="Box"
  trend="up"
  :trend-value="12.5"
  color="#475569"
  :clickable="true"
  @click="handleCardClick"
/&gt;</code></pre>
        </el-tab-pane>

        <el-tab-pane label="饼图">
          <pre class="code-block"><code>&lt;PieChart
  :data="[
    { name: '库存中', value: 350 },
    { name: '在用', value: 450 },
    { name: '维修中', value: 50 }
  ]"
  title="资产状态分布"
  type="doughnut"
  height="400px"
/&gt;</code></pre>
        </el-tab-pane>

        <el-tab-pane label="柱状图">
          <pre class="code-block"><code>&lt;BarChart
  :data="[
    { name: '北京', value: 200 },
    { name: '上海', value: 180 },
    { name: '广州', value: 150 }
  ]"
  title="资产分布统计"
  type="vertical"
  height="400px"
/&gt;</code></pre>
        </el-tab-pane>

        <el-tab-pane label="折线图">
          <pre class="code-block"><code>&lt;LineChart
  :data="[
    { name: '1月', value: 850 },
    { name: '2月', value: 920 },
    { name: '3月', value: 980 }
  ]"
  :series="[
    { name: '总价值', data: [850, 920, 980] },
    { name: '净值', data: [700, 750, 800] }
  ]"
  title="资产价值趋势"
  :area="true"
  :smooth="true"
  height="400px"
/&gt;</code></pre>
        </el-tab-pane>

        <el-tab-pane label="仪表盘">
          <pre class="code-block"><code>&lt;GaugeChart
  :value="75"
  :min="0"
  :max="100"
  title="资产利用率"
  unit="%"
  height="300px"
/&gt;</code></pre>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { Box, TrendCharts, ShoppingCart, Warning } from '@element-plus/icons-vue'
import {
  StatCardGroup,
  PieChart,
  BarChart,
  LineChart,
  GaugeChart,
  FunnelChart,
  AssetStatusChart,
  AssetUtilizationChart,
} from '@/components/charts'
import { StatCardConfig } from '@/types/charts'

const router = useRouter()

/** 返回上一页 */
const goBack = () => {
  router.back()
}

/** 统计卡片数据 */
const statCards = ref<StatCardConfig[]>([
  {
    title: '资产总数',
    value: 1000,
    unit: '台',
    icon: Box,
    trend: 'up',
    trendValue: 12.5,
    color: '#475569',
    clickable: true,
    onClick: () => console.log('点击资产总数'),
  },
  {
    title: '在用资产',
    value: 750,
    unit: '台',
    icon: ShoppingCart,
    trend: 'up',
    trendValue: 8.3,
    color: '#10b981',
    clickable: true,
  },
  {
    title: '库存资产',
    value: 200,
    unit: '台',
    icon: TrendCharts,
    trend: 'down',
    trendValue: 5.2,
    color: '#3b82f6',
    clickable: true,
  },
  {
    title: '维修中',
    value: 50,
    unit: '台',
    icon: Warning,
    trend: 'flat',
    trendValue: 0,
    color: '#ef4444',
    clickable: true,
  },
])

/** 饼图数据 */
const pieData = ref([
  { name: '库存中', value: 200, status: 'in_stock' },
  { name: '在用', value: 750, status: 'in_use' },
  { name: '维修中', value: 50, status: 'maintenance' },
])

/** 利用率 */
const utilizationRate = computed(() => {
  return (750 / 1000) * 100
})

/** 柱状图数据 */
const barData = ref([
  { name: '北京分公司', value: 200 },
  { name: '上海分公司', value: 180 },
  { name: '广州分公司', value: 150 },
  { name: '深圳分公司', value: 120 },
  { name: '成都分公司', value: 100 },
  { name: '杭州分公司', value: 80 },
  { name: '南京分公司', value: 70 },
  { name: '武汉分公司', value: 60 },
  { name: '西安分公司', value: 40 },
])

/** 折线图数据 */
const lineData = ref([
  { name: '1月', value: 850 },
  { name: '2月', value: 920 },
  { name: '3月', value: 980 },
  { name: '4月', value: 1050 },
  { name: '5月', value: 1100 },
  { name: '6月', value: 1180 },
  { name: '7月', value: 1250 },
  { name: '8月', value: 1300 },
  { name: '9月', value: 1380 },
  { name: '10月', value: 1450 },
  { name: '11月', value: 1520 },
  { name: '12月', value: 1600 },
])

/** 折线图系列数据 */
const lineSeries = ref([
  {
    name: '总价值',
    data: [850, 920, 980, 1050, 1100, 1180, 1250, 1300, 1380, 1450, 1520, 1600],
    color: '#475569',
  },
  {
    name: '净值',
    data: [700, 750, 800, 850, 900, 950, 1000, 1050, 1100, 1150, 1200, 1250],
    color: '#10b981',
  },
])

/** 漏斗图数据 */
const funnelData = ref([
  { name: '待入账', value: 100 },
  { name: '库存中', value: 200 },
  { name: '在用', value: 750 },
  { name: '维修中', value: 50 },
  { name: '已报废', value: 20 },
])

/** 资产状态数据 */
const assetStatusData = ref([
  { status: 'in_stock', statusName: '库存中', count: 200, percentage: 20, color: '#3b82f6' },
  { status: 'in_use', statusName: '在用', count: 750, percentage: 75, color: '#10b981' },
  { status: 'maintenance', statusName: '维修中', count: 50, percentage: 5, color: '#ef4444' },
])

/** 处理资产状态点击 */
const handleAssetStatusClick = (item: any) => {
  console.log('点击资产状态:', item)
}
</script>

<style scoped lang="scss">
.charts-example {
  padding: 20px;

  .mb-4 {
    margin-bottom: 16px;
  }

  .code-block {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 16px;
    overflow-x: auto;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 13px;
    line-height: 1.6;
    color: #334155;
  }
}
</style>
