<template>
  <div class="app-container" v-loading="loading">
    <el-form :model="form" ref="form">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用例名称" prop="name">
            <el-input v-model="name" placeholder="请输入用例名称" :disabled="isDisabled"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用例状态" prop="status">
            <el-select v-model="status" placeholder="请选择用例状态" :disabled="isDisabled">
              <el-option
                v-for="item in caseStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-tabs>
      <el-tab-pane label="接口编排">
        <step @data-from-child="handleChildData" @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
      this.status = res.data.status
    })
  },
  data(){
    return {
      form: {},
      name: "",
      status: "",
      isDisabled: true,
      caseStatusOptions: [{
        value: 1,
        label: '草稿'
      }, {
        value: 2,
        label: '通过'
      }, {
        value: 3,
        label: '不通过'
      }],
      loading: false
    }
  },
  methods: {
    handleChildData(data) {
      this.isDisabled = data;
    },
    submit(list) {
      this.loading = true;
      if (this.form.name !== this.name || this.form.status !== this.status) {
        this.form.name = this.name;
        this.form.status = this.status;
        updateCase(this.form).then(res => {
          this.saveStep(list)
        })
      } else {
        this.saveStep(list)
      }
    },
    saveStep(list) {
      let p = []
      let index = 1;
      list.forEach((item) => {
        item.assertion.pop();
        item.assignment.pop();
        item.requestHeader.pop();
        item.requestParams.pop();
        if (item.stepNum) {
          item.stepNum = index;
        }
        index ++;
        let childrenList = item.childrenList;
        if (childrenList) {
          item.childrenList = null;
          let cindex = 1;
          childrenList.forEach((children) => {
            children.assertion.pop();
            children.assignment.pop();
            children.requestHeader.pop();
            children.requestParams.pop();
            p.push({
              ...children,
              caseId: this.$route.query.id,
              stepNum: cindex,
              assertion: JSON.stringify(children.assertion),
              assignment: JSON.stringify(children.assignment),
              requestHeader: JSON.stringify(children.requestHeader),
              requestParams: JSON.stringify(children.requestParams)
            });
            cindex ++;
          });
        }
        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)
        });
      })
      console.log(p)
      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>
