<template>
  <el-dialog
    title="配置"
    id="addFieldDialog"
    :visible.sync="configdialogVisible"
    v-loading="load"
    top="5vh"
    width="60%"
    append-to-body
  >
    <el-row>
      <el-tabs v-model="activeName">
        <el-tab-pane label="字段映射" name="first"> </el-tab-pane>
        <!-- <el-tab-pane label="响应参数" name="second"> </el-tab-pane> -->
      </el-tabs>
      <div>
        <div
          style="overflow: hidden;"
          :style="{ height: activeName === 'first' ? 'auto' : '0px' }"
        >
          <plumb
            v-if="activeName == 'first'"
            type="request"
            :leftList="leftList"
            :rightList="rightList"
            :connectData="ConnectionsList"
            @confirm="handleRequest"
          />
        </div>
        <!-- <div
          style="overflow: hidden;"
          :style="{ height: activeName === 'second' ? 'auto' : '0px' }"
        >
          <plumb
            v-if="activeName == 'second'"
            type="response"
            :leftList="leftList2"
            :rightList="rightList2"
            :connectData="responseConnectionsList"
            @confirm="handleResponse"
          />
        </div> -->
      </div>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">关闭</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import Plumb from './Plumb.vue'
export default {
  components: {
    Plumb
  },
  data() {
    return {
      requestRelation: [],
      ConnectionsList: [],
      responseConnectionsList: [],
      activeName: 'first',
      leftList: [],
      leftList2: [],
      rightList2: [],
      load: false,
      configdialogVisible: this.value
    }
  },
  props: {
    relation: {
      type: Array,
      default: () => {
        return []
      }
    },
    rightList: {
      type: Array,
      default: () => {
        return []
      }
    },
    datalist: {
      type: Object,
      default: ''
    },
    value: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    value(val) {
      this.configdialogVisible = val
      if (val == true) {
        console.log(this.datalist, 'this.datalist')
        this.forEachNodeData(this.datalist)
        if (this.relation) {
          this.ConnectionsList = []
          this.relation.forEach(item => {
            this.ConnectionsList.push({
              LeftName:
                item.processfieldname +
                '&' +
                item.processfieldpath +
                '&' +
                'String',
              RightName:
                item.subprocessfieldname +
                '&' +
                item.subprocessfieldpath +
                '&' +
                'String'
            })
          })
        }
      }
    },
    configdialogVisible(val) {
      this.$emit('input', val)
    }
  },
  methods: {
    forEachNodeData(node, list) {
      if (node.nodeTabLists) {
        node.nodeTabLists.forEach(tab => {
          this.forEachNodeData(tab, this.leftList)
        })
      }
      if (node.nodeTableLists) {
        node.nodeTableLists.forEach((table, index) => {
          if (table.inputType === 'subtable') {
            let child = table.nodeTableLists.map(el => {
              return {
                fieldName: el.fieldName,
                fieldShowName: el.fieldShowName,
                id: el.fieldName + '-' + el.id,
                type: 'source',
                fieldType: 'String'
              }
            })
            let child2 = table.nodeTableLists.map(el => {
              return {
                fieldName: el.fieldName,
                fieldShowName: el.fieldShowName,
                id: el.fieldName + '-' + el.id + '-2',
                type: 'source',
                fieldType: 'String'
              }
            })
            this.leftList.push({
              fieldName: table.fieldName,
              fieldShowName: table.fieldShowName,
              id: table.fieldName + '-' + table.id,
              type: 'source',
              fieldType: 'Array',
              child: child,
              isPlumb: false
            })
            this.leftList2.push({
              fieldName: table.fieldName,
              fieldShowName: table.fieldShowName,
              id: table.fieldName + '-' + table.id + '-2',
              type: 'source',
              fieldType: 'Array',
              child: child2,
              isPlumb: false
            })
          } else {
            this.leftList.push({
              fieldName: table.fieldName,
              fieldShowName: table.fieldShowName,
              id: table.fieldName + '-' + table.id,
              type: 'source',
              fieldType: 'String'
            })
            this.leftList2.push({
              fieldName: table.fieldName,
              fieldShowName: table.fieldShowName,
              id: table.fieldName + '-' + table.id + '-2',
              type: 'source',
              fieldType: 'String'
            })
            this.forEachNodeData(table, list)
          }
        })
      }
    },
    handleRequest(val) {
      this.requestRelation = []
      this.ConnectionsList = val
      this.ConnectionsList.forEach((item, index) => {
        let o = {
          processfieldname: item.LeftName.split('&')[0],
          processfieldtype: item.LeftName.split('&')[2],
          processfieldpath: item.LeftName.split('&')[1],
          subprocessfieldname: item.RightName.split('&')[0],
          subprocessfieldtype: item.RightName.split('&')[2],
          subprocessfieldpath: item.RightName.split('&')[1]
        }
        this.requestRelation.push(o)
      })
    },
    handleResponse() {},
    submit() {
      console.log(this.requestRelation, this.ConnectionsList)
      this.configdialogVisible = false
      this.$emit('confim', this.requestRelation)
    },
    cancel() {
      this.configdialogVisible = false
    }
  },
  created() {}
}
</script>

<style></style>
