<template>
  <div class="content">
    <div class="header">
      <div class="back" @click="backList">
        <span><i class="el-icon-arrow-left"></i></span>
        <span>返回列表</span>
      </div>
      <div class="task">
        <span class="collect"><i class="el-icon-star-off"></i></span>
        <span class="name">任务名称</span>
        <el-input v-model="form.name" size="mini"/>
      </div>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="任务详情" name="first">
        <taskDetails :task="form" :caseList="caseList" @submit="submit" @getData="getData"/>
      </el-tab-pane>
      <el-tab-pane label="执行记录" name="second">
        <executionRecord />
      </el-tab-pane>
      <el-tab-pane label="操作记录" name="third">
        <operationRecords />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import taskDetails from "./taskDetails.vue";
import executionRecord from "./executionRecord.vue";
import operationRecords from "./operationRecords.vue";
import {getTask, updateTask} from "@/api/test/task";

export default {
  components: { taskDetails, executionRecord, operationRecords },
  data() {
    return {
      form: {},
      caseList: [],
      activeName: "first",
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.caseList=[]
      getTask(this.$route.query.id).then(res => {
        this.form = res.data.task;
        if (res.data.caseList && res.data.caseList.length) {
          res.data.caseList.forEach(item => {
            this.caseList.push({
              ...item.testCase,
              sort: item.sort,
            });
          })
        }
      })
    },
    backList() {
      this.$tab.closeOpenPage({path: "/task"});
    },
    submit(data) {
      updateTask({
        ...data,
        status: data.status ? 0 : 2,
        retry: data.retry ? 0 : 2
      }).then(res => {
        this.$message.success("修改成功");
        this.backList();
      })
    }
  },
};
</script>

<style scoped lang="scss">
.header {
  background-color: #fef9f1;
  background-image: url(../../../../assets/images/header.png);
  background-position-x: right;
  background-position-y: top;
  background-repeat: no-repeat;
  background-size: auto 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 100px 16px 24px;
  .back {
    cursor: pointer;
  }
}
.back span {
  color: rgb(50, 114, 254);
  font-size: 12px;
  font-weight: 400;
}
.task {
  color: #4f597f;
  font-size: 12px;
  display: flex;
  align-items: center;
  margin: 8px 8px 0 0;
  .collect {
    margin-right: 10px;
  }
  .name {
    margin-right: 10px;
  }
  .el-input {
    flex: 1;
  }
}
::v-deep .red {
  .el-input__inner {
    background: transparent;
    border: none;
  }
  .el-input__suffix {
    color: red;
    display: none !important;
  }
}
::v-deep .black {
  .el-input__inner {
    background: #fff;
  }
  .el-input__suffix {
    display: inline-flex;
  }
}
/* 修改 tab 标签的字体大小 */
::v-deep .el-tabs__nav-wrap::after {
  width: 100%;
  height: 1px;
  background-color: #e0e5f0;
  border: none; /* 去掉默认的边框 */
  padding: 0;
}

.el-tabs {
  padding: 0 24px;
}

::v-deep .el-tabs__item {
  font-size: 12px; /* 字体大小为 12px */
  font-weight: 500;
}
</style>
