<template>
  <div class="bio-dashboard-container">
    <h1 class="page-title">{{ pageTitle }}</h1>
    <el-card class="content-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>模拟节目详情</span>
        </div>
      </template>
      <div class="program-content">
        <p>这里是模拟节目的主要内容区域。</p>
        <p>
          您可以根据需要在此处填充各种图表、数据展示、控制面板等。
        </p>
        <el-row :gutter="20" class="data-section">
          <el-col :span="8">
            <el-statistic title="今日产量" :value="generateRandomNumber(1000, 5000)" />
          </el-col>
          <el-col :span="8">
            <el-statistic title="合格率" :value="generateRandomNumber(90, 99)">
              <template #suffix>%</template>
            </el-statistic>
          </el-col>
          <el-col :span="8">
            <el-statistic title="活跃设备" :value="generateRandomNumber(10, 50)" />
          </el-col>
        </el-row>
        <div class="mock-chart">
          <p>（此处可以放置一个模拟图表）</p>
          <el-progress :percentage="generateRandomNumber(20, 80)" :stroke-width="15" striped striped-flow :duration="10"/>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="BioDashboard">
import { ref } from 'vue';

const pageTitle = ref('生物自动化生产控制台');

const generateRandomNumber = (min: number, max: number) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};
</script>

<style scoped lang="scss">
.bio-dashboard-container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 50px); // 减去顶部导航栏的高度
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 20px;
}

.content-card {
  .card-header {
    font-size: 18px;
    font-weight: 500;
  }

  .program-content {
    font-size: 14px;
    line-height: 1.6;
    color: #606266;

    p {
      margin-bottom: 15px;
    }
  }

  .data-section {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .mock-chart {
    margin-top: 20px;
    padding: 20px;
    border: 1px dashed #dcdfe6;
    border-radius: 4px;
    text-align: center;
    color: #909399;
  }
}
</style>
