<template>
  <div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <span v-if="reqDispData && reqDispData.dbTableName">输入表信息:
          <span v-for="item in reqDispData.dbTableName">{{ item }} &nbsp; &nbsp; </span>
        </span>
        <span v-else>无输入表</span>
      </el-col>
    </el-row>
    <span>
          <el-table ref="table" :data="reqDispData.fields" height="300px"
                    @row-click="clickRow" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column :show-overflow-tooltip="true" label="字段名称" prop="fieldName" />
            <el-table-column :show-overflow-tooltip="true" label="字段描述" prop="fieldComment" />
            <el-table-column :show-overflow-tooltip="true" label="字段类型" prop="fieldType" />
          </el-table>
    </span>
    <br><br>
    <div align="center">
      <el-button type="primary" @click="toSelectResp">确 定</el-button>
      <el-button @click="disp.updFlag = false">取 消</el-button>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
// 例如：import 《组件名称》 from '《组件路径》,
import {listDisposition} from "@/api/quest/disposition";

export default {
  // import引入的组件需要注入到对象中才能使用"
  name: 'exporUpd',
  props: {
    data: {},
    node: {},
    disp: {
      nodeCode: undefined,
      nodeType: undefined,
      findFlag: false,
      updFlag: false,
      formData: {
        db: {},
        fields: []
      }
    },

  },
  data() {
    // 这里存放数据"
    return {
      // 上一级节点编码
      preNodeId: [],
      // 上一级节点配置信息
      preNodeDisp: [],
      // 最终选择的配置
      selectDisp: [],
      // 上一级节点配置信息整合
      reqDispData: {
        dbTableName: [],
        fields: []
      },
      respDispData: {
        dbTableName: [],
        fields: []
      }
    }
  },
  // 计算属性 类似于data概念",
  computed: {},
  // 生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.init()
  },
  // 方法集合",
  methods: {
    init() {
      /** 1.查询该节点的上一级节点*/
      this.data.lineList.forEach(line => {
        if (line.to === this.node.id){
          this.preNodeId.push(line.from)
        }
      })
      this.preNodeId = [...new Set(this.preNodeId)]
      console.log(1,this.preNodeId)
      /** 2.获取上一级节点的配置参数*/
      if (this.preNodeId){
        this.preNodeId.forEach(id => {
          this.findDisp(id)
        })
      }
      setTimeout(() => {
        this.init2()
      },1000)
    },
    init2() {
      console.log(2,this.preNodeDisp)
      this.preNodeDisp.forEach(nodeDisp => {
        console.log(3, nodeDisp)
        let dbTableName = nodeDisp.db.dbName + '.' +
          nodeDisp.db.tableName + '(' + nodeDisp.db.tableComment + ')';
        this.reqDispData.dbTableName.push(dbTableName)
        nodeDisp.fields.forEach(field => this.reqDispData.fields.push(field))
      })
      console.log(4, this.reqDispData)
    },
    findDisp(nodeCode) {
      listDisposition({nodeCode: nodeCode}).then(res => {
        this.preNodeDisp.push(this.getVueDisp(res.data.rows))
      })
    },
    // 选择多选
    clickRow(row) {
      this.$refs.table.toggleRowSelection(row);
    },
    // 输入表多选框选中数据
    handleSelectionChange(selection) {
      this.selectDisp.formFields = selection.map(item => {
        return {
          fieldName: item.fieldName,
          fieldType: item.fieldComment,
          fieldComment: item.fieldType
        };
      });
    },
    // 选择完成输入表字段
    toSelectResp() {
      console.log(this.selectDisp)
    },
    /** 类型转换 mysql -> vue */
    getVueDisp(dispList) {
      const db = {}
      const fields = []
      dispList.forEach(disp => {
        if (disp.dispKey === 'db') {
          db.dbName = disp.dispValue
        }
        if (disp.dispKey === 'table') {
          db.tableName = disp.dispValue
          db.tableComment = disp.dispLabel
        }
        if (disp.dispKey === 'fields') {
          fields.push({
            fieldName: disp.dispValue,
            fieldType: disp.dispType,
            fieldComment: disp.dispLabel
          })
        }
      })
      return {db, fields}
    }
  }
}
</script>
<style scoped>

</style>
