<template>
  <div class="app-container">
    <!-- 页面标题 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="24" class="page-header">
        <el-page-header :title="testTitle" @back="goBack">
        </el-page-header>
        <el-dropdown :value="testStatus" trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">{{ dropdownText }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(text, key) in statusMap"
              :key="key"
              :command="key"
              :disabled="key === testStatus">
              {{ text }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1">概览</el-menu-item>
          <el-menu-item index="2">执行</el-menu-item>
          <el-menu-item index="3">报告</el-menu-item>
          <el-menu-item index="4">缺陷</el-menu-item>
          <el-menu-item index="5">设置</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>

    <!-- 测试计划界面 -->
    <probably-view :planId="planId" v-show="activeIndex === '1'"></probably-view>
    <case-execute :planId="planId" :name="testTitle" v-show="activeIndex === '2'"></case-execute>
    <case-report :planId="planId" v-show="activeIndex === '3'"></case-report>
    <test-defects :planId="planId" :name="testTitle" v-show="activeIndex === '4'"></test-defects>
    <test-setting v-show="activeIndex === '5'"></test-setting>
  </div>
</template>

<script>
import router from "@/router";
import {getTestPlanDetail, updateTestPlan} from "@/api/test/testPlan";
import ProbablyView from "@/views/test/testplan/probablyView/probablyView.vue";
import CaseReport from "@/views/test/testplan/caseReport/caseReport.vue";
import caseExecute from "@/views/test/testplan/execute/caseExecute.vue";
import TestDefects from "@/views/test/testplan/defects/testDefects.vue";
import TestSetting from "@/views/test/testplan/setting/testSetting.vue";

export default {
  name: 'overview',
  components: {
    TestSetting,
    TestDefects,
    caseExecute,
    CaseReport,
    ProbablyView,
  },
  data() {
    return {
      editForm: {},
      statusMap: {
        '0': '未开始',
        '1': '进行中',
        '2': '已完成',
        '3': '已终止'
      },
      planId: '',
      testStatus: '',
      testTitle: '',
      activeTab: 'overview',// 默认选中的标签页
      activeIndex: '1',
    };
  },
  computed: {
    dropdownText() {
      return this.statusMap[this.testStatus] || '进行中';
    }
  },
  methods: {
    handleCommand(command) {
      this.$confirm(`确定切换为【${this.statusMap[command]}】状态？`, '操作确认', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.testStatus = command; // 更新选中状态
        this.editForm.status = command;
        const form = {
          ...this.editForm
        }
        updateTestPlan(form)
        .then(() => {
          this.$message.success(`切换成功：${this.statusMap[command]}`);
        })
        // 执行数据刷新等操作
      }).catch(() => {
        // 用户取消操作时的处理（可选）
      });
    },
    goBack() {
      this.$router.back();
      // 关闭当前页面
      this.$tab.closePage(router.currentRoute);
    },
    handleSelect(key) {
      this.activeIndex = key
    },
  },
  created() {
    getTestPlanDetail(this.$route.query.id).then(res => {
      this.editForm = res.data
    })
    this.planId = this.$route.query.id;
    this.testTitle = this.$route.query.name
    this.testStatus = this.$route.query.testStatus
  }
};
</script>


<style lang="scss" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.page-header {
  ::v-deep.el-page-header__title {
    font-size: 20px;
    color: #000000;
    font-weight: bold;
  }

  display: flex;
  align-items: center;
  border-bottom: solid 1px #e6e6e6;
}
</style>
