<template>
  <div class="app-container">
    <!-- 页面标题 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="24" class="page-header">
        <h3 style="font-size: 20px;color: #000000">测试计划概览</h3>
      </el-col>
    </el-row>

    <!-- 测试计划详情 -->
    <el-row :gutter="10">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-row>
              <span style="font-size: 18px;color: #3A71A8">测试计划详情</span>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="5">
                <!--                <span>起止时间：{{ startToEndTime }}</span>-->
                <span>起止时间：2020-04-01 ~ 2020-04-30</span>
              </el-col>
              <el-col :span="7">
                <span>当前测试计划已经开始 3 天,距离截止时间还有 52 天</span>
              </el-col>
              <el-col :span="5">
                <span>负责人：{{  }}</span>
              </el-col>
            </el-row>
          </div>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-card shadow="hover">
                <div class="progress-content">
                  <div id="executionProgressChart" style="width: 70%; height: 200px;"></div>
                  <div class="progress-text">
                    <p style="font-size: 40px;margin: auto">100%</p>
                    <p>执行进度</p>
                    <p>用例总数 1</p>
                    <p><span style="color: #409EFF">●</span> 已执行用例 1</p>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover">
                <div class="progress-content">
                  <el-row :gutter="10">
                    <el-col class="rate-content" :span="12">
                      <p>100%</p>
                      <el-progress :percentage="100" status="success"></el-progress>
                      <p>执行用例通过率</p>
                    </el-col>
                    <el-col class="rate-content" :span="12">
                      <p>100%</p>
                      <el-progress :percentage="100" status="success"></el-progress>
                      <p>总体用例通过率</p>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover">
                <div class="progress-content">
                  <div class="defect-content">
                    <p>0</p>
                    <p>缺陷数</p>
                    <el-row>
                      <el-col :span="4">0</el-col>
                      <el-col :span="4">0</el-col>
                      <el-col :span="4">0</el-col>
                      <el-col :span="4">0</el-col>
                      <el-col :span="4">0</el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="4">待确认</el-col>
                      <el-col :span="4">修复中</el-col>
                      <el-col :span="4">待验证</el-col>
                      <el-col :span="4">无效缺陷</el-col>
                      <el-col :span="4">挂起</el-col>
                    </el-row>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 测试用例 -->
    <el-row :gutter="10">
      <el-col :span="10">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>用例执行分布</span>
          </div>
          <el-card shadow="hover">
            <div class="distribution-content">
              <el-progress type="circle" :percentage="100" color="#67C23A"></el-progress>
              <div class="distribution-text">
                <p><span style="background-color: #67C23A; display: inline-block; width: 10px; height: 10px;"></span> 通过 1</p>
                <p><span style="background-color: #F56C6C; display: inline-block; width: 10px; height: 10px;"></span> 失败 0</p>
                <p><span style="background-color: #E6A23C; display: inline-block; width: 10px; height: 10px;"></span> 阻塞 0</p>
                <p><span style="background-color: #F56C6C; display: inline-block; width: 10px; height: 10px;"></span> 跳过 0</p>
                <p><span style="background-color: #909399; display: inline-block; width: 10px; height: 10px;"></span> 未执行 0</p>
              </div>
            </div>
          </el-card>
        </el-card>
      </el-col>
      <el-col :span="14">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>用例执行情况趋势</span>
          </div>
          <el-card shadow="hover">
            <div class="distribution-text" style="height: 200px">
              <line-chart :data="trendData" :chart-data="trendData"></line-chart>
            </div>
          </el-card>
        </el-card>
      </el-col>
    </el-row>
    <el-card class="box-card">
      <div>
        关联需求信息
        <!-- 标签页 -->
        <el-tabs style="margin-top: 10px;">
          <el-Table v-loading="loading" :data="list">
            <el-table-column prop="serialNumber" label="ID" align="center"/>
            <el-table-column prop="version" label="版本" align="center"/>
            <el-table-column prop="outline" label="概要" align="center"/>
            <el-table-column prop="priority" label="优先级" align="center">
              <template slot-scope="scope">
                <el-tag :type="priorityColor[scope.row.priority]">{{ scope.row.priority }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center">
              <template #default="{ row }">
                <dict-tag :options="dict.type.status" :value="row.status"/>
              </template>
            </el-table-column>
            <el-table-column prop="manager" label="负责人" align="center"/>
            <el-table-column prop="createTime" label="创建时间" align="center"/>
          </el-Table>
        </el-tabs>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import LineChart from '@/views/dashboard/LineChart';
import * as echarts from 'echarts';
import {getTestPlanProjectList} from "@/api/test/testPlan";

export default {
  name: 'probablyView',
  components: {
    LineChart,
  },
  props: {
    planId: {
      type: String,
      default: '',
    },
  },
  dicts: ['priority_level', 'project_source', 'project_type', 'status'],
  mounted() {
    this.initExecutionProgressChart();
  },
  data() {
    return {
      priorityColor: {
        P0: 'danger',  // 红色
        P1: 'warning', // 黄色
        P2: 'info',    // 蓝色
        P3: 'success', // 绿色
        p4: 'success'
      },
      total: 0,
      list: [],
      loading: false,
      myChart: null,
      startToEndTime: '',
      defectSlider: 0,
      queryParams: {
        planId: '',
        pageNum: 1,
        pageSize: 10,
      },
      trendData: {
        labels: ['2025-04-01', '2025-04-02', '2025-04-03'],
        datasets: [
          {
            label: '通过',
            backgroundColor: '#67C23A',
            data: [0, 0.5, 1],
          },
          {
            label: '失败',
            backgroundColor: '#F56C6C',
            data: [0, 0, 0],
          },
          {
            label: '跳过',
            backgroundColor: '#E6A23C',
            data: [0, 0, 0],
          },
          {
            label: '阻塞',
            backgroundColor: '#909399',
            data: [0, 0, 0],
          },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      this.queryParams.planId = this.planId;
      getTestPlanProjectList(this.queryParams.planId).then(response => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
      })
    },
    // 初始化执行进度饼图
    initExecutionProgressChart() {
      const chartDom = document.getElementById('executionProgressChart');
      const myChart = echarts.init(chartDom);

      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 1},
            ]
          }
        ]
      };

      myChart.setOption(option);
      // 监听窗口大小变化，自动调整图表大小
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  .page-header {
    margin-bottom: 20px;
  }

  .box-card {
    margin-bottom: 20px;
  }

  .progress-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;

    .progress-text {
      margin-left: 20px;
    }
  }

  .rate-content {

  }

  .defect-content {
    text-align: center;
    width: 400px;
  }

  .distribution-content {
    display: flex;
    align-items: center;

    .distribution-text {
      margin-left: 20px;
    }
  }

  .trend-content {
  }
}
</style>

