<template>
  <div class="content" v-loading="tableLoading">
    <el-card shadow="never">
      <el-row>
        <el-col :span="24" align="right">
          <el-button class="icon-button" type="text" @click="submit">保存</el-button>
        </el-col>
      </el-row>
      <el-tabs type="border-card">
        <el-tab-pane label="请求">
          <el-button class="icon-button" type="text" @click="append('', '添加')">添加字段</el-button>
          <el-tree
            :data="tableData"
            node-key="id"
            :props="defaultProps"
            default-expand-all
            :expand-on-click-node="false"
            ref="tree">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span>
                <el-button
                  @click="append(data, '添加')"
                  v-if="data.type === 'object'"
                  type="text"
                  title="添加字段"
                  icon="el-icon-circle-plus"></el-button>
                <el-button @click="append(data, '编辑', node)" type="text" title="编辑字段" icon="el-icon-edit-outline">
                </el-button>
                <el-button @click="remove(node, data)" title="删除字段" type="text" icon="el-icon-delete"></el-button>
              </span>
            </span>
          </el-tree>
          <el-radio-group v-model="radio">
            <el-radio :label="3">XML</el-radio>
            <el-radio :label="6">JSON</el-radio>
          </el-radio-group>
        </el-tab-pane>
        <el-tab-pane label="响应">
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <AddField v-model="dialogVisible" :checkItems="checkItems" :type="type" @confirm="getNodeData" />
  </div>
</template>

<script>
import AddField from './AddField'
import { queryServer, deleteServer } from '@/api/esb_service'

export default {
  components: {
    AddField
  },
  data() {
    return {
      options: [
        { name: '文本', value: 'text' },
        { name: '对象', value: 'object' }
      ],
      radio: '',
      // 高级搜索框
      searchForm: {},
      tableLoading: false,
      tableList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      tableData: [
        {
          id: 1,
          name: '字段0',
          type: 'text'
        }, {
          id: 2,
          name: '字段1',
          type: 'text'
        }, {
          id: 3,
          name: '字段2',
          type: 'object',
          children: [{
            id: 31,
            name: '字段2-0',
            type: '文本'
          }, {
            id: 32,
            name: '字段2-1',
            type: '文本'
          }]
        }, {
          id: 4,
          name: '字段3',
          type: 'text'
        }
      ],
      dialogVisible: false,
      checkItem: {},
      nodeData: {},
      checkItems: {},
      type: ''
    }
  },
  mounted() {
    // this.requestData()
  },
  methods: {
    append(data, type, node) {
      this.type = type
      this.checkItem = data
      this.nodeData = node
      this.checkItems = Object.assign({}, data)
      this.dialogVisible = true
    },
    remove(node, data) {
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const parent = node.parent
        const children = parent.data.children || parent.data
        const index = children.findIndex(d => d.name === data.name)
        children.splice(index, 1)
      }).catch(() => {
      })
    },
    getNodeData(data) {
      if (this.checkItem) {
        if (this.type === '添加') {
          if (!this.checkItem.children) {
            this.$set(this.checkItem, 'children', [])
          }
          this.checkItem.children.push(data)
        } else {
          this.$set(this.nodeData, 'data', data)
        }
      } else {
        this.tableData.push(data)
      }
    },
    submit() {
    },
    requestData() {
      this.tableLoading = true
      queryServer({
        filters: [
          {
            key: 'name',
            opt: 'LIKE',
            type: 'S',
            value: this.searchForm.subject
          }
        ],
        orderby: 'createon',
        sort: 'desc',
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize
      }).then((rt) => {
        this.tableList = rt.data.list || []
        this.page.total = rt.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .content {
    /deep/ .el-table__indent {
      display: none;
    }
  }
</style>
