<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) ? 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 && item.type < 3" effect="plain" style="width: 240px;text-align: center;margin-right: 12px;" type="info" class="drag-handle">{{ datasourceList.findLast(t => t.id === item.datasourceId) ? 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="item.requestHeader">
            <el-table-column label="参数名" prop="key" />
            <el-table-column label="值" prop="value" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane v-if="item.type == 1" label="Params" name="Params">
          <el-table :data="item.requestParams">
            <el-table-column label="参数名" prop="key" />
            <el-table-column label="值" prop="value" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane v-if="item.type == 1" label="Body" name="Body">
          <JsonEditorVue mode="text" v-model="item.requestBody" class="jse-theme-dark"/>
        </el-tab-pane>
        <el-tab-pane v-if="item.type == 2" label="SQL指令" name="sql">
          <div>{{item.sqlCommand}}</div>
        </el-tab-pane>
        <el-tab-pane v-if="item.type == 2" label="结果" name="sql">
          <JsonEditorVue mode="text" v-model="item.sqlResult" class="jse-theme-dark"/>
        </el-tab-pane>
        <el-tab-pane v-if="item.type == 1" label="提取" name="assignment">
          <el-table :data="item.assignment">
            <el-table-column label="变量名" prop="name" />
            <el-table-column label="提取方式" prop="type" />
            <el-table-column label="提取对象" prop="content" />
            <el-table-column label="提取表达式" prop="path" />
            <el-table-column label="提取结果" prop="value" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="校验" name="assertion">
          <el-table :data="item.assertion">
            <el-table-column label="描述" prop="name" />
            <el-table-column label="对象" prop="source" />
            <el-table-column label="条件" prop="fn" />
            <el-table-column label="内容" prop="target" />
            <el-table-column label="实际值" prop="value" />
            <el-table-column label="结果" prop="result" />
          </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="item.requestHeader">
                <el-table-column label="参数名" prop="key" />
                <el-table-column label="值" prop="value" />
              </el-table>
            </el-tab-pane>
            <el-tab-pane v-if="item.type == 1" label="Params" name="Params">
              <el-table :data="item.requestParams">
                <el-table-column label="参数名" prop="key" />
                <el-table-column label="值" prop="value" />
              </el-table>
            </el-tab-pane>
            <el-tab-pane v-if="item.type == 1" label="Body" name="Body">
              <JsonEditorVue mode="text" v-model="item.requestBody" class="jse-theme-dark"/>
            </el-tab-pane>
            <el-tab-pane v-if="item.type == 2" label="SQL指令" name="sql">
              <div>{{item.sqlCommand}}</div>
            </el-tab-pane>
            <el-tab-pane v-if="item.type == 2" label="结果" name="sql">
              <JsonEditorVue mode="text" v-model="item.sqlResult" class="jse-theme-dark"/>
            </el-tab-pane>
            <el-tab-pane v-if="item.type == 1" label="提取" name="assignment">
              <el-table :data="item.assignment">
                <el-table-column label="变量名" prop="name" />
                <el-table-column label="提取方式" prop="type" />
                <el-table-column label="提取对象" prop="content" />
                <el-table-column label="提取表达式" prop="path" />
                <el-table-column label="提取结果" prop="value" />
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="校验" name="assertion">
              <el-table :data="item.assertion">
                <el-table-column label="描述" prop="name" />
                <el-table-column label="对象" prop="source" />
                <el-table-column label="条件" prop="fn" />
                <el-table-column label="内容" prop="target" />
                <el-table-column label="实际值" prop="value" />
                <el-table-column label="结果" prop="result" />
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-collapse-item>
      </div>
    </el-collapse-item>
  </el-collapse>
</template>

<script>

import JsonEditorVue from "json-editor-vue";
import {getCaseResult} from "@/api/test/caseStep";
import {listDatasource} from "@/api/test/database";

export default {
  components: {JsonEditorVue},
  props: ["sid"],
  dicts: ['step_type'],
  data() {
    return {
      form: {},
      activeName: '',
      tabsActiveName: '',
      childrenTabsActiveName: '',
      list: [],
      datasourceList: [],
    }
  },
  mounted() {
    listDatasource().then(res => {
      this.datasourceList = res.data;
    })
    getCaseResult(this.sid).then(res => {
      res.data.forEach(item => {
        this.list.push({
          ...item.step,
          ...item.result,
        })
      })
      this.list.forEach(item => {
        item = {
          ...item,
          assertion: item.assertion ? JSON.parse(item.assertion) : [],
          assignment: item.assignment ? JSON.parse(item.assignment) : [],
          requestHeader: item.requestHeader ? JSON.parse(item.requestHeader) : [],
          requestParams: item.requestParams ? JSON.parse(item.requestParams) : [],
          sqlResult: item.requestParams ? JSON.parse(item.requestParams) : [],
        }
      })
      console.log(this.list)
    })
  }
}
</script>

<style scoped lang="scss">

</style>
