<template>
  <div class="app-container" v-loading="loading">
    <el-form :model="form" ref="form">
      <el-form-item label="用例名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入用例名称"/>
      </el-form-item>
    </el-form>
    <el-tabs>
      <el-tab-pane label="用例编排">
        <step @submit="submit"/>
      </el-tab-pane>
<!--      <el-tab-pane label="操作日志">-->
<!--      </el-tab-pane>-->
    </el-tabs>
  </div>
</template>

<script>
import {getCase, updateCase} from "@/api/test/case";
import Step from "@/views/test/case/detail/step.vue";
import {addCaseStep} from "@/api/test/caseStep";

export default {
  name: "test",
  components: {Step},
  created() {
    getCase(this.$route.query.id).then(res => {
      this.form = res.data;
      this.name = res.data.name
    })
  },
  data(){
    return {
      form: {},
      name: "",
      loading: false
    }
  },
  methods: {
    submit(list) {
      this.loading = true;
      if (this.form.name !== this.name) {
        updateCase(this.form).then(res => {
          this.saveStep(list)
        })
      } else {
        this.saveStep(list)
      }
    },
    saveStep(list) {
      let p = []
      list.forEach((item) => {
        item.assertion.pop();
        item.assignment.pop();
        item.requestHeader.pop();
        item.requestParams.pop();
        p.push({
          ...item,
          caseId: this.$route.query.id,
          assertion: JSON.stringify(item.assertion),
          assignment: JSON.stringify(item.assignment),
          requestHeader: JSON.stringify(item.requestHeader),
          requestParams: JSON.stringify(item.requestParams)
        });
      })
      addCaseStep({
        caseId: this.$route.query.id,
        list: p
      }).then(res => {
        this.$message.success("修改成功");
        this.loading = false;
        this.$tab.closeOpenPage({path: "/case"});
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
