<template>
    <div class="home_page">
        <div class="car_container">
            <div class="car_item">
                <div>图标</div>
                <div>
                    <div class="title">测试任务总数</div>
                    <div class="number">1248</div>
                    <div class="compare">较昨日 +128 ↑</div>
                </div>
            </div>
            <div class="car_item">
                <div>图标</div>
                <div>
                    <div class="title">今日执行任务</div>
                    <div class="number">86</div>
                    <div class="compare">较昨日 +16 ↑</div>
                </div>
            </div>
            <div class="car_item">
                <div>图标</div>
                <div>
                    <div class="title">在线设备数</div>
                    <div class="number">128</div>
                    <div class="compare">较昨日 +8 ↑</div>
                </div>
            </div>
            <div class="car_item">
                <div>图标</div>
                <div>
                    <div class="title">异常告警数</div>
                    <div class="number">23</div>
                    <div class="compare">较昨日 -5 ↓</div>
                </div>
            </div>
            <div class="car_item">
                <div>图标</div>
                <div>
                    <div class="title">测试通过率</div>
                    <div class="number">96.37%</div>
                    <div class="compare">较昨日 +1.28% ↑</div>
                </div>
            </div>
            <div class="car_item">
                <div>图标</div>
                <div>
                    <div class="title">本周执行时长</div>
                    <div class="number">268.5h</div>
                    <div class="compare">较昨日 +23.6h ↑</div>
                </div>
            </div>
        </div>
        <div class="chart_container">
            <div class="lineChart-box">
                <LineChart :series="lineSeries" />
            </div>
            <div class="barChart-box"><BarChart :series="barSeries" /></div>
            <div class="info-box">
                <div class="info-item">
                    <div class="item-title">待处理事项</div>
                    <div class="item-context">
                        <div>待审核用例</div>
                        <div>待处理异常</div>
                        <div>待分配任务</div>
                        <div>待生成报告</div>
                    </div>
                </div>
                <div class="info-item">
                    <div class="item-title">告警信息</div>
                    <div class="item-context">
                        <div class="item" v-for="alarm in alarmList">
                            <div class="status-box">
                                <div class="status" :class="alarm.status">{{ statusList[alarm.status] }}</div>
                                <div class="context">{{ alarm.context }}</div>
                            </div>
                            <div class="time">{{ alarm.time }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="table_container">
            <div>最近测试任务</div>
            <el-table
                v-loading="loading"
                :data="tableList"
                row-key="id"
            >
                <el-table-column prop="deptName" label="任务名称"></el-table-column>
                <el-table-column prop="orderNum" label="执行对象"></el-table-column>
                <el-table-column prop="orderNum" label="测试类型"></el-table-column>
                <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                    <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
                    </template>
                </el-table-column>
                <el-table-column prop="orderNum" label="合格率"></el-table-column>
                <el-table-column label="创建时间" align="center" prop="createTime" width="200">
                    <template #default="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script setup>
import LineChart from './components/LineChart.vue';
import BarChart from './components/BarChart.vue';
import * as echarts from 'echarts';

const lineSeries = ref([
    {
      name: '执行任务数',
      type: 'line',
      color: '#3e95d8',
      data: [120, 122, 101, 114, 90, 130, 110],
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#3e95d8'
          },
          {
            offset: 0.2,
            color: '#d1efed'
          },
          {
            offset: 1,
            color: '#fff'
          }
        ])
      },
    },
    {
      name: '通过率',
      type: 'line',
      color: '#5becde',
      data: [96.5, 97.3, 92.8, 95.8, 98.7, 96.8, 97.9],
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#5becde'
          },
          {
            offset: 0.3,
            color: '#d1efed'
          },
          {
            offset: 1,
            color: '#fff'
          }
        ])
      },
    }
])

const barSeries = ref([
    {
      name: '已完成',
      type: 'bar',
      stack: 'Ad',
      color: '#53dbca',
      emphasis: {
        focus: 'series'
      },
      data: [30, 32, 30, 34, 39, 30, 30]
    },
    {
      name: '运行中',
      type: 'bar',
      stack: 'Ad',
      color: '#5becde',
      emphasis: {
        focus: 'series'
      },
      data: [27, 32, 30, 34, 39, 30, 30]
    },
    {
      name: '暂停中',
      type: 'bar',
      stack: 'Ad',
      color: '#d1efed',
      emphasis: {
        focus: 'series'
      },
      data: [10, 32, 30, 34, 39, 30, 30]
    },
    {
      name: '异常',
      type: 'bar',
      stack: 'Ad',
      color: '#3e95d8',
      emphasis: {
        focus: 'series'
      },
      data: [5, 32, 30, 34, 39, 30, 30]
    }
])

const statusList = {
    'urgent': '紧急',
    'important': '重要',
    'ordinary': '一般'
}

const alarmList = ref([
    {
        status: 'urgent',
        context: '手机设备AIMA-TEST-015离线',
        time: '10:32'
    }, {
        status: 'important',
        context: '测试任务AIMA-00123执行异常',
        time: '10:15'
    }, {
        status: 'ordinary',
        context: '存储空间使用率超过80%',
        time: '10:15'
    }
])

const tableList = ref([])
</script>
<style lang="scss" scoped>
.home_page {
    width: 100%;
    height: 100%;

    .car_container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;

        .car_item {
            flex: 1;
            box-shadow: 0 0 0 1px #dddddd;
            border-radius: 8px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            background: #fff;

            .title {
                font-size: 16px;
                margin-bottom: 4px;
            }

            .number {
                font-size: 30px;
                font-weight: bold;
            }

            .compare {
                font-size: 14px;
                color: #999;
            }
        }
    }

    .chart_container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
        gap: 20px;

        .lineChart-box {
            flex: 1;
            height: 300px;
            box-shadow: 0 0 0 1px #dddddd;
            border-radius: 10px;
        }

        .barChart-box {
            flex: 1;
            height: 300px;
            box-shadow: 0 0 0 1px #dddddd;
            border-radius: 10px;
        }

        .info-box {
            flex: 1;
            height: 300px;
            display: flex;
            flex-direction: column;
            gap: 20px;

            .info-item {
                box-shadow: 0 0 0 1px #dddddd;
                border-radius: 10px;
                padding: 10px;
                flex: 1;
                

                .item-title {
                    font-size: 20px;
                    font-weight: bold;
                }

                .item-context {
                    padding: 0 20px;

                    .item {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-bottom: 8px;

                        .status-box {
                            display: flex;
                            align-items: center;

                            .status {
                                padding: 2px 10px;
                                border-radius: 5px;
                                margin-right: 10px;
                            }

                            .urgent {
                                background: #51dcbe;
                            }

                            .important {
                                background: #51dcb9;
                            }

                            .ordinary {
                                background: #4595dc;
                            }
                        }
                    }
                }
            }
        }
    }

    .table_container {
        margin-top: 20px;
    }
}
</style>