<template>
  <div class="app-container">
    <el-form :model="form" ref="form">
      <el-form-item label="轮询次数" prop="count">
        <el-input v-model="form.count" placeholder="请输入循环次数"/>
      </el-form-item>
      <el-form-item label="轮询间隔" prop="interval">
        <el-input v-model="form.interval" placeholder="请输入轮询间隔"/>
      </el-form-item>
      <el-form-item label="轮询失败原因" prop="breakError">
        <JsonEditorVue mode="text" v-model="form.breakError" class="jse-theme-dark"/>
      </el-form-item>
    </el-form>
    <div v-loading="loading">
      <div style="margin-bottom:20px;">
        <el-dropdown trigger="click" @command="handleAdd">
          <el-button type="primary" plain icon="el-icon-plus" size="mini">添加步骤</el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">HTTP接口</el-dropdown-item>
            <el-dropdown-item command="2">数据库源</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item :name="index" v-for="(item, index) in list" :key="index" v-if="item.parentId && item.parentId === form.id">
          <template slot="title">
            <el-button size="mini" plain type="warning" icon="el-icon-rank" circle style="margin-right: 12px"/>
            <el-tag effect="plain" style="width: 70px;text-align: center;margin-right: 12px;">{{ dict.type.step_type.findLast(t => t.value == item.type).label }}</el-tag>
            <el-tag v-if="item.name" effect="plain" style="width: 240px;text-align: center;margin-right: 12px;" type="info">{{ item.name }}</el-tag>
            <el-tag v-if="item.datasourceId" effect="plain" style="width: 240px;text-align: center;margin-right: 12px;" type="info">{{ datasourceList.findLast(t => t.id === item.datasourceId).name }}</el-tag>
            <el-tag v-if="item.requestUrl" effect="plain" style="text-align: center;margin-right: 12px;" type="success">{{ item.requestUrl }}</el-tag>
          </template>
          <el-button size="mini" type="text" @click="handleDel(index)" style="float: right">删除</el-button>
          <page1 v-if="item.type == 1" :form="item" :hosts="hosts"/>
          <page2 v-if="item.type == 2" :form="item" :datasourceList="datasourceList"/>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import JsonEditorVue from "json-editor-vue";
import page1 from "@/views/test/case/detail/page1.vue";
import page2 from "@/views/test/case/detail/page2.vue";

export default {
  components: {page1, page2, JsonEditorVue},
  props: {
    form: {
      type: Object
    },
    hosts: {
      type: Array
    },
    datasourceList: {
      type: Array
    },
    list: {
      type: Array
    },
    quoteList: {
      type: Array
    }
  },
  data() {
    return {
      loading: false,
      activeName: null,
    }
  },
  methods: {
    handleAdd(type) {
      if (!this.form.id) {
        this.$modal.msgError("请先保存轮询主步骤再新增子步骤!");
        return;
      }
      this.list.push({
        name: "",
        parentId: this.form.id,
        type: type,
        requestMethod: 'POST',
        requestUrl: "",
        apiHttpId: null,
        requestHeader: [{
          key: "",
          value: "",
        }],
        requestParams: [{
          key: "",
          value: "",
        }],
        assignment:[{
          name: "",
          type: "",
          content: "",
          path: "",
        }],
        assertion:[{
          name: "",
          source: "",
          fn: "",
          target: ""
        }],
        requestBody: "",
      });
    },
    handleDel(index) {
      this.list.splice(index, 1)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
