<template>
  <div class="app-container">
    <!-- 顶部导航 -->
    <el-row :gutter="10">
      <el-col :span="24">
        <el-header class="header">
          <div class="head1">
            <span style="font-size: 18px; font-weight: bold; margin-right: 20px;">测试计划</span>
          </div>
          <div class="head2">
            <el-input placeholder="请输入测试计划名称搜索" v-model="query" class="input-with-select" clearable>
              <el-button slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
            </el-input>
            <el-button
              type="primary"
              size="medium"
              style="margin-right: 10px;"
              @click="handleCollapse(!activeNames.includes('1'))"
            >高级筛选
            </el-button>
            <el-button icon="el-icon-plus" type="primary" size="medium" style="margin-left: 10px;" @click="addProjectVue">
              新建计划
            </el-button>
          </div>
        </el-header>
      </el-col>
    </el-row>

    <el-collapse v-model="activeNames">
      <el-collapse-item class="collapse-search" name="1">
        <el-form :inline="true" ref="queryForm" :model="queryParams" label-width="110px">
          <el-row :gutter="10" class="high-search">
            <el-form-item label="状态">
              <el-select v-model="queryParams.status" placeholder="请选择" clearable>
                <simple-options :options="dict.type.status"/>
              </el-select>
            </el-form-item>
            <el-form-item label="负责人">
              <el-select v-model="queryParams.manager" placeholder="请选择" clearable filterable>
                <simple-options :options="managerList"/>
              </el-select>
            </el-form-item>
            <el-form-item label="开始时间范围">
              <el-date-picker
                v-model="queryParams.startTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-row>
          <el-row :gutter="10" class="high-search">
            <el-col :span="12">
              <el-form-item label="截止时间范围">
                <el-date-picker
                  v-model="queryParams.endTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12" style="text-align: right">
              <el-form-item>
                <el-button type="primary" size="mini" icon="el-icon-search" @click="handleAdvancedSearch">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetAdvancedFilter">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse-item>
    </el-collapse>

    <el-row :gutter="10" class="mb8" style="padding-top: 20px">
      <right-toolbar @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 标签页 -->
    <el-tabs v-model="activeTab" @tab-click="handleTabClick" style="margin-top: 10px;">
      <el-Table v-loading="loading" :data="list" @row-click="handleRowClick">
        <el-table-column prop="name" label="计划名称" align="left"/>
        <el-table-column prop="version" label="测试进度" align="left">
          <template slot-scope="scope">
            <el-row :gutter="10">
              <el-col :span="24">
                <el-row :gutter="10" class="label-progress">
                  <el-col :span="10" class="label-text">冒烟测试</el-col>
                  <el-col :span="14">
                    <el-popover
                      placement="top-start"
                      trigger="hover"
                    >
                      <span v-if="scope.row.smokeTest === null">暂无关联用例</span>
                      <div v-else class="custom-content">
                        <el-row :gutter="10">
                          <el-col :span="8">
                            <el-row>
                                <span style="color: #67C23A;">
                                  <i class="el-icon-success"></i> 通过
                                </span>
                            </el-row>
                          </el-col>
                          <el-col :span="6">
                            <span>{{ scope.row.smokeTestPassNum }}</span>
                          </el-col>
                          <el-col :span="10">
                            <span>{{ Number(scope.row.smokeTest).toFixed(0) + '%' }}</span>
                          </el-col>
                        </el-row>
                      </div>
                      <el-progress slot="reference" :percentage="Number(scope.row.smokeTest)" :show-text="false"></el-progress>
                    </el-popover>
                  </el-col>
                </el-row>
                <el-row :gutter="10" class="label-progress">
                  <el-col :span="10" class="label-text">功能测试</el-col>
                  <el-col :span="14">
                    <el-popover
                      placement="top-start"
                      trigger="hover"
                    >
                      <span v-if="scope.row.smokeTest === null">暂无关联用例</span>
                      <div v-else class="custom-content">
                        <el-row :gutter="10">
                          <el-col :span="8">
                            <el-row>
                                <span style="color: #67C23A;">
                                  <i class="el-icon-success"></i> 通过
                                </span>
                            </el-row>
                          </el-col>
                          <el-col :span="6">
                            <span>{{ scope.row.functionTestPassNum }}</span>
                          </el-col>
                          <el-col :span="10">
                            <span>{{ Number(scope.row.functionTest).toFixed(0) + '%' }}</span>
                          </el-col>
                        </el-row>
                      </div>
                    <el-progress slot="reference" :percentage="Number(scope.row.functionTest)" :show-text="false"></el-progress>
                    </el-popover>
                  </el-col>
                </el-row>
                <el-row :gutter="10" class="label-progress">
                  <el-col :span="10" class="label-text">回归测试</el-col>
                  <el-col :span="14">
                    <el-popover
                      placement="top-start"
                      trigger="hover"
                    >
                      <span v-if="scope.row.smokeTest === null">暂无关联用例</span>
                      <div v-else class="custom-content">
                        <el-row :gutter="10">
                          <el-col :span="8">
                            <el-row>
                                <span style="color: #67C23A;">
                                  <i class="el-icon-success"></i> 通过
                                </span>
                            </el-row>
                          </el-col>
                          <el-col :span="6">
                            <span>{{ scope.row.regressionTestPassNum }}</span>
                          </el-col>
                          <el-col :span="10">
                            <span>{{ Number(scope.row.regressionTest).toFixed(0) + '%' }}</span>
                          </el-col>
                        </el-row>
                      </div>
                    <el-progress slot="reference" :percentage="Number(scope.row.regressionTest)" :show-text="false"></el-progress>
                    </el-popover>
                  </el-col>
                </el-row>
                <el-row :gutter="10" class="label-progress">
                  <el-col :span="10" class="label-text">准生产验证</el-col>
                  <el-col :span="14">
                    <el-popover
                      placement="top-start"
                      trigger="hover"
                    >
                      <span v-if="scope.row.smokeTest === null">暂无关联用例</span>
                      <div v-else class="custom-content">
                        <el-row :gutter="10">
                          <el-col :span="8">
                            <el-row>
                                <span style="color: #67C23A;">
                                  <i class="el-icon-success"></i> 通过
                                </span>
                            </el-row>
                          </el-col>
                          <el-col :span="6">
                            <span>{{ scope.row.preProductionTestPassNum }}</span>
                          </el-col>
                          <el-col :span="10">
                            <span>{{ Number(scope.row.preProductionTest).toFixed(0) + '%' }}</span>
                          </el-col>
                        </el-row>
                      </div>
                    <el-progress slot="reference" :percentage="Number(scope.row.preProductionTest)" :show-text="false"></el-progress>
                    </el-popover>
                  </el-col>
                </el-row>
                <el-row :gutter="10" class="label-progress">
                  <el-col :span="10" class="label-text">生产验证</el-col>
                  <el-col :span="14">
                    <el-popover
                      placement="top-start"
                      trigger="hover"
                    >
                      <span v-if="scope.row.smokeTest === null">暂无关联用例</span>
                      <div v-else class="custom-content">
                        <el-row :gutter="10">
                          <el-col :span="8">
                            <el-row>
                                <span style="color: #67C23A;">
                                  <i class="el-icon-success"></i> 通过
                                </span>
                            </el-row>
                          </el-col>
                          <el-col :span="6">
                            <span>{{ scope.row.productionTestPassNum }}</span>
                          </el-col>
                          <el-col :span="10">
                            <span>{{ Number(scope.row.productionTest).toFixed(0) + '%' }}</span>
                          </el-col>
                        </el-row>
                      </div>
                    <el-progress slot="reference" :percentage="Number(scope.row.productionTest)" :show-text="false"></el-progress>
                    </el-popover>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </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="timeStartToEnd" label="起止时间" align="left">
          <template slot-scope="scope">
            <div>
              开始：{{ scope.row.startPlanTime }}
            </div>
            <div>
              截止：{{ scope.row.endPlanTime }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="manager" label="负责人" align="left"/>
        <el-table-column prop="defectNum" label="缺陷数" align="left"/>
        <el-table-column label="操作" align="left" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-delete" @click.native.stop="handleDelete(scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-Table>
    </el-tabs>

    <!-- 操作按钮 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog title="新建计划" :visible.sync="addOpen" width="40%">
      <el-form ref="form" :rules="rules" :model="form" label-width="110px" label-position="right">
        <el-form-item label="测试计划编码" prop="serialNumber">
          <el-input v-model="form.serialNumber" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="计划名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="起止时间" prop="timeStartToEnd">
          <el-date-picker
            v-model="form.timeStartToEnd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="关联需求" prop="projectId">
          <el-select v-model="form.projectId" placeholder="请选择需求" clearable filterable>
            <Simple-options :options="projectList"/>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人" prop="manager">
          <el-select v-model="form.manager" style="width: 50%" placeholder="请选择负责人" clearable filterable>
            <Simple-options :options="managerList"/>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addOpen = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getProjectList, managerList, updateProject} from "@/api/test/project";
import SimpleOptions from "@/components/FormItem/option/SimpleOptions.vue";
import {addTestPlan, delTestPlan, getTestPlanList} from "@/api/test/testPlan";

export default {
  name: 'testplan',
  components: {SimpleOptions},
  dicts: ['priority_level', 'project_source', 'project_type', 'status'],
  data() {
    return {
      query: '',
      rules: {
        serialNumber: [{required: true, message: '请输入需求ID', trigger: 'blur'}],
        name: [{required: true, message: '请输入需求名称', trigger: 'blur'}],
        manager: [{required: true, message: '请选择负责人', trigger: 'blur'}],
        timeStartToEnd: [{required: true, message: '请选择起止时间', trigger: 'blur'}],
        projectId: [{required: true, message: '请选择关联需求', trigger: 'blur'}],
      },
      searchKeyword: '',
      activeTab: 'all',
      total: 0,
      list: [],
      title: '',
      // 遮罩层
      loading: false,
      editSubmitLoading: false,
      submitLoading: false,
      //新增弹窗
      addOpen: false,
      //编辑弹窗
      editOpen: false,
      managerList: [],
      projectList: [],
      queryParams: {
        status: '',
        manager: '',
        name: '',
        startTime: [],
        endTime: [],
        pageNum: 1,
        pageSize: 10,
      },
      activeNames: [], // 控制 collapse 的展开状态
      form: {
        serialNumber: '',
        name: '',
        manager: '',
        projectId: '',
        timeStartToEnd: [],
        version: ''
      },
      editForm: {},
    };
  },
  created() {
    this.getList();
    this.getManagerList();
    this.ProjectList();
  },
  computed: {},
  methods: {
    handleRowClick(row) {
      this.$tab.openPage(`测试计划概览`, "/testplan/overview",
        {id: row.id,
          name: row.name,
          testStatus: row.status,
        });
    },
    handleTabClick(tab) {
      this.activeTab = tab.name;
      this.getList();
    },
    // 获取负责人列表
    getManagerList() {
      managerList()
      .then((list) => {
        this.managerList = (list.rows || []).map((e) => ({value: e.userId, label: e.userName}))
      })
    },
    // 获取需求列表
    ProjectList() {
      getProjectList()
      .then((list) => {
        this.projectList = (list.rows || []).map((e) => ({value: e.id, label: e.name}))
      })
    },
    // 搜索
    handleQuery() {
      this.queryParams.name = this.query;
      this.getList();
    },
    addProjectVue() {
      this.addOpen = true;
      this.reset();
    },
    /** 查询列表 */
    getList() {
      this.loading = true
      const [startPlanTime, endPlanTime] = this.queryParams.startTime || []
      const [startDeadline, endDeadline] = this.queryParams.endTime || []
      const queryParams = {
        ...this.queryParams,
        startPlanTime,
        endPlanTime,
        startDeadline,
        endDeadline,
      }
      getTestPlanList(queryParams).then(list => {
        this.list = list.rows.map(item => ({
          ...item,
          startPlanTime: item.startTime, // 确保字段名正确
          endPlanTime: item.endTime }));
        this.total = list.total;
        this.loading = false
      })
    },
    // 表单重置
    reset() {
      const form = {}
      Object.keys(this.form).forEach((key) => {
        form[key] = ''
      })
      this.form = form
      this.resetForm('form')
    },
    // 展开/折叠
    handleCollapse(val) {
      this.activeNames = val ? ['1'] : [];
    },
    handleAdvancedSearch() {
      // 高级筛选条件搜索
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetAdvancedFilter() {
      // 重置高级筛选条件
      this.resetForm('queryFrom')
      this.handleAdvancedSearch()
    },
    submitForm() {
      const [startTime, endTime] = this.form.timeStartToEnd || []
      const form = {
        ...this.form,
        startTime,
        endTime,
      }
      this.$refs?.form.validate((valid) => {
        if (!valid) {
          return
        }
        this.submitLoading = true
        addTestPlan(form)
        .then(() => {
          this.$message.success('添加成功')
          this.addOpen = false
          this.getList()
        })
        .catch(() => {
          this.$message.error('添加失败')
        })
        .finally(() => {
          this.submitLoading = false
        })
      })
    },
    handleDelete(id) {
      this.$modal.confirm('是否确认删除测试计划？').then(function () {
        return delTestPlan(id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      });
    },
    editSubmitForm() {
      const form = {
        ...this.editForm,
      }
      this.$refs?.editForm.validate((valid) => {
        if (!valid) {
          return
        }
      })
      this.editSubmitLoading = true
      updateProject(form)
      .then(() => {
        this.$message.success('编辑成功')
        this.editSubmitLoading = false
        this.editOpen = false
        this.getList()
      })
      .catch(() => {
        this.$message.error('编辑失败')
        this.editSubmitLoading = false
      })
    },
  }
};
</script>

<style lang="scss" scoped>
.input-with-select {
  background-color: #ffffff;
  width: 300px;
}

.collapse-search {
  ::v-deep .el-collapse-item__header {
    display: none;
  }
}

.high-search {
  padding-top: 40px;
  background-color: rgb(248, 248, 249);
}

.header {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.head1 {
  display: flex;
  align-items: center;
}

.head2 {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
  column-gap: 10px;
}

.el-dialog .el-form {
  width: 100%;
}

.el-dialog .el-form-item {
  margin-bottom: 20px;
}

.el-dialog .el-textarea {
  width: 100%;
}

.basic-information {
  background-color: rgb(248, 248, 249) !important;
}

.label-text {
  display: flex;
  align-items: flex-start;
}

.label-progress {
  display: flex;
  align-items: center;
}

.custom-content {
  width: 200px;
  padding: 10px;
  .el-row {
    align-items: center;
  }
  .el-col {
    display: flex;
    align-items: center;
  }
  .el-icon-check {
    color: #67C23A;
    margin-right: 5px;
  }
  span {
    font-size: 14px;
  }
}
</style>
