import { defineComponent } from 'vue';
import { Card, Col, Row, Statistic } from 'ant-design-vue';
import styles from './index.module.less';

interface StatItem {
  title: string;
  value: number;
  suffix: string;
  precision?: number;
}

/**
 * 工作台 / 仪表盘
 */
export default defineComponent({
  name: 'Dashboard',
  setup() {
    const stats: StatItem[] = [
      { title: '今日访问', value: 1280, suffix: '次' },
      { title: '活跃用户', value: 368, suffix: '人' },
      { title: '订单总数', value: 9920, suffix: '单' },
      { title: '处理率', value: 96.8, suffix: '%', precision: 1 },
    ];

    return () => (
      <div class={styles.dashboardMain}>
        <h2 class={styles.title}>工作台</h2>

        <Row gutter={[16, 16]}>
          {stats.map((item) => (
            <Col key={item.title} xs={24} sm={12} lg={6}>
              <Card>
                <Statistic
                  title={item.title}
                  value={item.value}
                  suffix={item.suffix}
                  precision={item.precision}
                />
              </Card>
            </Col>
          ))}
        </Row>

        <Card class={styles.panel} title="项目说明">
          <p>
            欢迎使用 CPMS 运营平台。这是一个基于 Vue 3 + Vite + TypeScript + Ant Design Vue
            搭建的中后台管理项目骨架,采用 TSX 写法,你可以在此基础上继续开发业务功能。
          </p>
          <ul>
            <li>
              开发命令:<code>npm run dev</code>
            </li>
            <li>
              构建(测试环境):<code>npm run build:test</code>
            </li>
            <li>
              构建(生产环境):<code>npm run build:prod</code>
            </li>
            <li>
              代码检查:<code>npm run lint</code>
            </li>
          </ul>
        </Card>
      </div>
    );
  },
});