<template>
  <el-dialog append-to-body class="debugEnd" @close="closeDialog" :close-on-click-modal="false" :title="title" :visible.sync="dialogFormVisible" :destroy-on-close="true" width="50%">
    <h3>
        请求文档
        <span style="float: right;" @click="isShow('ruleForm1','fileexpand1')">
        {{fileexpand1 ? '收起' : '展开'}}>
        </span>
    </h3>
    <div ref="ruleForm1">
        <pre><xmp><div class="messageinfo" v-text="resData"></div></xmp></pre>
        <!-- <codeEidt :values="resData"  @changes="changeCon" :cmMode="resData" /> -->
    </div>
    <h3>
        响应文档
        <span style="float: right;" @click="isShow('ruleForm','fileexpand')">
        {{fileexpand ? '收起' : '展开'}}>
        </span>
    </h3>
    <div ref="ruleForm">
        <pre><xmp><div class="messageinfo" v-text="reqData"></div></xmp></pre>
        <!-- <codeEidt :values="reqData"  @changes="changeCon1" :cmMode="reqData" /> -->
    </div>
    <div v-if="track">
      <h3>
          跟踪
          <span style="float: right;" @click="isShow('ruleForm1','fileexpand2')">
          {{fileexpand2 ? '收起' : '展开'}}>
          </span>
      </h3>
      <div ref="ruleForm1">
          <div class="messageinfo">
            <el-tree class="autoH" :data="treeData" node-key="id" :props="props">
            </el-tree>
          </div>
          <!-- <pre><xmp><div class="messageinfo" v-text="reqData"></div></xmp></pre> -->
          <!-- <codeEidt :values="reqData"  @changes="changeCon1" :cmMode="reqData" /> -->
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">返 回</el-button>
      <el-button type="primary" @click="closeDialog">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  components: {
  },
  data() {
    return {
      resData: '',
      title: '',
      reqData: '',
      dialogFormVisible: false,
      fileexpand: true,
      fileexpand1: true,
      fileexpand2: true,
      props: {
        children: 'children',
        label: 'operationType'
      },
      treeData: []
    }
  },
  props: {
    row: {
      type: Object,
      default() {
        return {}
      }
    },
    value: {
      type: Boolean,
      default: false
    },
    track: {
      type: Boolean,
      default: false
    },
    titles: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  watch: {
    value(val) {
      if (val) {
        this.title = this.titles.type === 'flowManager' ? `消息流结果-${this.titles.name}` : this.titles.type === 'bsManager' ? `业务服务结果-${this.titles.name}` : `代理服务结果-${this.titles.name}`
        this.dialogFormVisible = val
        this.resData = this.row.requestBody
        try {
          this.reqData = JSON.parse(this.row.responseBody)
        } catch (error) {
          this.reqData = this.row.responseBody
        }
        this.treeData = this.row.views || []
        this.treeData = this.treeData.filter(item => {
          item.children = []
          Object.keys(item).forEach(items => {
            if (items !== 'operationType' && items !== 'children') {
              if (['分配', '转换', '替换', '删除', '插入'].includes(item.operationType)) {
                item[items] && item.children.length < 1 && item.children.push({ operationType: ` ${item.variableName} ：${item.variableValue}` })
                item.convertType && item.children.length < 2 && item.children.unshift({ operationType: item.convertType })
              } else if (['路由请求', '路由响应'].includes(item.operationType)) {
                const obj = {
                  operationType: '',
                  children: []
                }
                if (item[items] instanceof Object) {
                  obj.operationType = '请求头'
                  obj.children.push({ operationType: JSON.stringify(item[items]) })
                } else {
                  obj.operationType = '请求体'
                  obj.children.push({ operationType: item[items] })
                }
                item[items] && item.children.push(obj)
                // item[items] && item.children.push({ operationType: item[items] instanceof Object ? '请求头: ' + JSON.stringify(item[items]) : '请求体: ' + item[items] })
              } else {
                item[items] && item.children.push({ operationType: item[items] instanceof Object ? JSON.stringify(item[items]) : item[items] })
              }
            }
          })
          return item
        })
        console.log(this.treeData)
      }
    }
  },
  methods: {
    changeCon(val) {
      this.resData = val
    },
    changeCon1(val) {
      this.reqData = val
    },
    closeDialog() {
      this.dialogFormVisible = false
      this.$emit('confirm', false)
    },
    isShow(c, el) {
      this[el] = !this[el]
      this.slideToggle(c, this[el])
    },
    slideToggle(c, show) {
      const parent = this.$refs[c]
      if (show) {
        parent.style.overflow = 'hidden'
        parent.style.height = 40 + parent.lastElementChild.offsetHeight + 'px'
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          parent.style.overflow = 'visible'
          parent.style.height = 'visible'
        }, 500)
      } else {
        parent.style.overflow = 'hidden'
        parent.style.height = 40 + parent.lastElementChild.offsetHeight + 'px'
        setTimeout(() => {
          parent.style.overflow = 'hidden'
          parent.style.height = '0'
        }, 10)
      }
    }
  }
}
</script>
<style lang="scss">
.debugEnd .messageinfo{
  width: 100%;
  height: 200px;
  overflow: auto;
  // word-wrap: break-word;
  white-space: normal;
  word-break: break-all;
  font-family: auto;
  &::-webkit-scrollbar-track-piece {
    background-color:transparent;
  }
  &::-webkit-scrollbar {
    width:6px;
    height: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background-color:#dddddd;
    border-radius: 100px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background-color:#bbb;
  }
  .el-tree-node__content {
    height: auto;
  }
  .el-tree-node__label {
    width: 600px;
    white-space: normal;
  }
}
</style>
