<template>
  <el-collapse v-model="activeName" accordion>
    <el-collapse-item :name="index" v-for="(item, index) in list" :key="index" v-if="!item.parentId">
      <template slot="title">
        <el-button size="mini" plain type="warning" icon="el-icon-rank" circle style="margin-right: 12px" class="drag-handle"/>
        <el-tag effect="plain" style="width: 70px;text-align: center;margin-right: 12px;" class="drag-handle">{{ 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" class="drag-handle">{{ item.name }}</el-tag>
        <el-tag v-if="item.datasourceId" effect="plain" style="width: 240px;text-align: center;margin-right: 12px;" type="info" class="drag-handle">{{ 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" class="drag-handle">{{ item.requestUrl }}</el-tag>
        <el-tag effect="plain" style="text-align: center;margin-right: 12px;" class="drag-handle">{{ index + 1 }}</el-tag>
      </template>
      <el-tabs v-model="tabsActiveName" v-if="item.type == 2 || item.type == 1">
        <el-tab-pane v-if="item.type == 1" label="Headers" name="Headers">
          <el-table :data="form.requestHeader">
            <el-table-column label="参数名">
              <template slot-scope="scope">
                <el-input placeholder="请输入参数名" v-model="form.requestHeader[scope.$index].key" @input="e => handleTableEdit(e, 'header', scope)" clearable/>
              </template>
            </el-table-column>
            <el-table-column label="示例值">
              <template slot-scope="scope">
                <el-input placeholder="请输入参数名" v-model="form.requestHeader[scope.$index].value" @input="e => handleTableEdit(e, 'header', scope)" clearable/>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="60">
              <template slot-scope="scope">
                <el-button v-if="form.requestHeader.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete('header', scope)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane v-if="item.type == 1" label="Params" name="Params">
          <el-table :data="form.requestParams">
            <el-table-column label="参数名">
              <template slot-scope="scope">
                <el-input placeholder="请输入参数名" v-model="form.requestParams[scope.$index].key" @input="e => handleTableEdit(e, 'param', scope)" clearable/>
              </template>
            </el-table-column>
            <el-table-column label="示例值">
              <template slot-scope="scope">
                <el-input placeholder="请输入示例值" v-model="form.requestParams[scope.$index].value" @input="e => handleTableEdit(e, 'param', scope)" clearable/>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="60">
              <template slot-scope="scope">
                <el-button v-if="form.requestParams.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete('param', scope)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane v-if="item.type == 1" label="Body" name="Body">
          <JsonEditorVue mode="text" v-model="form.requestBody" class="jse-theme-dark"/>
        </el-tab-pane>
        <el-tab-pane v-if="item.type == 2" label="SQL指令" name="sql">
          <codemirror v-model="form.sqlCommand" :options="editorOptions" />
        </el-tab-pane>
        <el-tab-pane label="提取" name="assignment">
          <el-table :data="form.assignment">
            <el-table-column label="变量名">
              <template slot-scope="scope">
                <el-input placeholder="请输入变量名" v-model="form.assignment[scope.$index].name" @input="e => handleTableEdit(e, 'assignment', scope)" clearable/>
              </template>
            </el-table-column>
            <el-table-column label="提取方式">
              <template slot-scope="scope">
                <el-input placeholder="请输入提取方式" v-model="form.assignment[scope.$index].type" @input="e => handleTableEdit(e, 'assignment', scope)" clearable/>
              </template>
            </el-table-column>
            <el-table-column label="提取对象">
              <template slot-scope="scope">
                <el-input placeholder="请输入提取对象" v-model="form.assignment[scope.$index].content" @input="e => handleTableEdit(e, 'assignment', scope)" clearable/>
              </template>
            </el-table-column>
            <el-table-column label="提取表达式">
              <template slot-scope="scope">
                <el-input placeholder="请输入提取表达式" v-model="form.assignment[scope.$index].path" @input="e => handleTableEdit(e, 'assignment', scope)" clearable/>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="60">
              <template slot-scope="scope">
                <el-button v-if="form.assignment.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete('assignment', scope)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="校验" name="assertion">
          <el-table :data="form.assertion">
            <el-table-column label="描述">
              <template slot-scope="scope">
                <el-input placeholder="请输入描述" v-model="form.assertion[scope.$index].name" @input="e => handleTableEdit(e, 'assertion', scope)" clearable/>
              </template>
            </el-table-column>
            <el-table-column label="对象">
              <template slot-scope="scope">
                <el-input placeholder="请输入对象" v-model="form.assertion[scope.$index].source" @input="e => handleTableEdit(e, 'assertion', scope)" clearable/>
              </template>
            </el-table-column>
            <el-table-column label="条件">
              <template slot-scope="scope">
                <el-input placeholder="请输入条件" v-model="form.assertion[scope.$index].fn" @input="e => handleTableEdit(e, 'assertion', scope)" clearable/>
              </template>
            </el-table-column>
            <el-table-column label="内容">
              <template slot-scope="scope">
                <el-input placeholder="请输入内容" v-model="form.assertion[scope.$index].target" @input="e => handleTableEdit(e, 'assertion', scope)" clearable/>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="60">
              <template slot-scope="scope">
                <el-button v-if="form.assertion.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete('assertion', scope)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div v-if="item.type == 3 || item.type == 4">
        <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" class="drag-handle"/>
            <el-tag effect="plain" style="width: 70px;text-align: center;margin-right: 12px;" class="drag-handle">{{ 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" class="drag-handle">{{ item.name }}</el-tag>
            <el-tag v-if="item.datasourceId" effect="plain" style="width: 240px;text-align: center;margin-right: 12px;" type="info" class="drag-handle">{{ 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" class="drag-handle">{{ item.requestUrl }}</el-tag>
            <el-tag effect="plain" style="text-align: center;margin-right: 12px;" class="drag-handle">{{ index + 1 }}</el-tag>
          </template>
          <el-tabs v-model="childrenTabsActiveName" v-if="item.type == 2 || item.type == 1">
            <el-tab-pane v-if="item.type == 1" label="Headers" name="Headers">
              <el-table :data="form.requestHeader">
                <el-table-column label="参数名">
                  <template slot-scope="scope">
                    <el-input placeholder="请输入参数名" v-model="form.requestHeader[scope.$index].key" @input="e => handleTableEdit(e, 'header', scope)" clearable/>
                  </template>
                </el-table-column>
                <el-table-column label="示例值">
                  <template slot-scope="scope">
                    <el-input placeholder="请输入参数名" v-model="form.requestHeader[scope.$index].value" @input="e => handleTableEdit(e, 'header', scope)" clearable/>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="60">
                  <template slot-scope="scope">
                    <el-button v-if="form.requestHeader.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete('header', scope)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane v-if="item.type == 1" label="Params" name="Params">
              <el-table :data="form.requestParams">
                <el-table-column label="参数名">
                  <template slot-scope="scope">
                    <el-input placeholder="请输入参数名" v-model="form.requestParams[scope.$index].key" @input="e => handleTableEdit(e, 'param', scope)" clearable/>
                  </template>
                </el-table-column>
                <el-table-column label="示例值">
                  <template slot-scope="scope">
                    <el-input placeholder="请输入示例值" v-model="form.requestParams[scope.$index].value" @input="e => handleTableEdit(e, 'param', scope)" clearable/>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="60">
                  <template slot-scope="scope">
                    <el-button v-if="form.requestParams.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete('param', scope)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane v-if="item.type == 1" label="Body" name="Body">
              <JsonEditorVue mode="text" v-model="form.requestBody" class="jse-theme-dark"/>
            </el-tab-pane>
            <el-tab-pane v-if="item.type == 2" label="SQL指令" name="sql">
              <codemirror v-model="form.sqlCommand" :options="editorOptions" />
            </el-tab-pane>
            <el-tab-pane label="提取" name="assignment">
              <el-table :data="form.assignment">
                <el-table-column label="变量名">
                  <template slot-scope="scope">
                    <el-input placeholder="请输入变量名" v-model="form.assignment[scope.$index].name" @input="e => handleTableEdit(e, 'assignment', scope)" clearable/>
                  </template>
                </el-table-column>
                <el-table-column label="提取方式">
                  <template slot-scope="scope">
                    <el-input placeholder="请输入提取方式" v-model="form.assignment[scope.$index].type" @input="e => handleTableEdit(e, 'assignment', scope)" clearable/>
                  </template>
                </el-table-column>
                <el-table-column label="提取对象">
                  <template slot-scope="scope">
                    <el-input placeholder="请输入提取对象" v-model="form.assignment[scope.$index].content" @input="e => handleTableEdit(e, 'assignment', scope)" clearable/>
                  </template>
                </el-table-column>
                <el-table-column label="提取表达式">
                  <template slot-scope="scope">
                    <el-input placeholder="请输入提取表达式" v-model="form.assignment[scope.$index].path" @input="e => handleTableEdit(e, 'assignment', scope)" clearable/>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="60">
                  <template slot-scope="scope">
                    <el-button v-if="form.assignment.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete('assignment', scope)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="校验" name="assertion">
              <el-table :data="form.assertion">
                <el-table-column label="描述">
                  <template slot-scope="scope">
                    <el-input placeholder="请输入描述" v-model="form.assertion[scope.$index].name" @input="e => handleTableEdit(e, 'assertion', scope)" clearable/>
                  </template>
                </el-table-column>
                <el-table-column label="对象">
                  <template slot-scope="scope">
                    <el-input placeholder="请输入对象" v-model="form.assertion[scope.$index].source" @input="e => handleTableEdit(e, 'assertion', scope)" clearable/>
                  </template>
                </el-table-column>
                <el-table-column label="条件">
                  <template slot-scope="scope">
                    <el-input placeholder="请输入条件" v-model="form.assertion[scope.$index].fn" @input="e => handleTableEdit(e, 'assertion', scope)" clearable/>
                  </template>
                </el-table-column>
                <el-table-column label="内容">
                  <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-model="form.assertion[scope.$index].target" @input="e => handleTableEdit(e, 'assertion', scope)" clearable/>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="60">
                  <template slot-scope="scope">
                    <el-button v-if="form.assertion.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete('assertion', scope)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-collapse-item>
      </div>
    </el-collapse-item>
  </el-collapse>
</template>

<script>

import JsonEditorVue from "json-editor-vue";

export default {
  components: {JsonEditorVue},
  data() {
    return {
      form: {},
      activeName: '',
      tabsActiveName: '',
      childrenTabsActiveName: '',
      list: []
    }
  }
}
</script>

<style scoped lang="scss">

</style>
