<template>
  <div>
    <!--    添加任务详情设计-->
    <span v-if="taskInputForm">
      <el-form  label-width="80px" :model="tableInfo" ref="queryForm"  :inline="true" class="demo-form-inline" size="small">
        <el-form-item label="任务id">
          <el-input v-model="tableInfo.taskId" readonly></el-input>
        </el-form-item>

        <el-form-item label="数据库id">
          <el-input v-model="tableInfo.databaseId" readonly></el-input>
        </el-form-item>

        <el-form-item>
          <el-select  v-model="tableInfo.tableName" placeholder="请选择数据库">
            <el-option style="height: 100%" :value="tableInfo.tableName">
              <el-aside width="100%">
                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
              </el-aside>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="表别名">
          <el-input v-model="tableInfo.tableAsName"></el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="taskInputAdd = false">取 消</el-button>
        <el-button type="primary" @click="addTaskInput()">下一步</el-button>
      </div>
    </span>

<!--    所选表内的字段信息-->
    <span v-if="taskInputTable">
      <el-table
        ref="multipleTable"
        :data="tableInfo.structureList"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="100%"></el-table-column>


        <el-table-column label="字段" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.columnName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="注释" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.columnRemark }}</span>
          </template>
        </el-table-column>

        <el-table-column label="是否主键" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.isPrimary }}</span>
          </template>
        </el-table-column>

        <el-table-column label="字段类型" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.columnType }}</span>
          </template>
        </el-table-column>

        <el-table-column label="字段长度" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.columnLength }}</span>
          </template>
        </el-table-column>

        <el-table-column label="小数" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.columnDecimals }}</span>
          </template>
        </el-table-column>

        <el-table-column label="非空" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.isNull }}</span>
          </template>
        </el-table-column>

        <el-table-column label="默认值" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.defaultValue }}</span>
          </template>
        </el-table-column>

        <el-table-column label="是否字典" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.isDictionary }}</span>
          </template>
        </el-table-column>

        <el-table-column label="处理规则" width="200">
          <template slot-scope="scope">
            <el-select v-model="taskInputReq.fieldAsEngineId" multiple placeholder="请选择">
              <el-option value="">请选择</el-option>
              <el-option
                v-for="engine in engineList"
                :key="engine.id"
                :label="engine.name"
                :value="engine.id">
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column
          label="字段别名"
          width="200">
          <template slot-scope="scope">
            <el-input v-model="scope.row.tableAsField = tableInfo.tableAsName+'_'+scope.row.columnName"></el-input>
          </template>
        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelColumn()">上一步</el-button>
        <el-button type="primary" @click="columnAddGood()">确 定</el-button>
      </div>
    </span>
  </div>
</template>

<script>
import { addTaskInput} from '@/api/task/task'
import { findStructureByTableId, findTableInfoList } from '@/api/etl/switch'
import { selectEngineList } from '@/api/engine/engine'
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props:['graph','nodeId','taskInputForm','tableInfo','nodeName'],
  data() {
    //这里存放数据"

    return {

      taskInputJoin:false,
      dialogFormVisible:true,
      //任务设计添加表弹窗
      taskInputAdd:false,
      //选择字段弹窗
      taskInputFieldAdd:false,
      taskInputTable:false,
      taskReq:{

      },
      joinSelect:{},
      taskAddReq:{},
      taskInputReq:{},
      engineReq:{
        pageNum: 1,
        pageSize: 100
      },
      taskList:[],
      //级联选择器
      value:[],

      engineList:[],

      //树状图
      data:[],
      defaultProps:{
        children:"children",
        label:'tableName'
      },

      tableList:[],
      columnList:[],
      structureList:[],
      itemId:0,

    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    //规则引擎下拉框
    selectEngineList(){
      selectEngineList(this.engineReq).then(res=>{
        this.engineList = res.data.list;
        console.log(this.engineList);
      })
    },

    //关闭字段信息
    cancelColumn(){
      this.taskInputTable = false;
      this.taskInputForm = true;

    },

    //确定选择的字段
    columnAddGood(){
      this.taskInputTable = false;
      this.tableInfo.fieldAsEngineId = "[{1,3,4},{1,2,3}]";
      this.$emit('taskInputForm', false);
      addTaskInput({
          "nodeId":this.nodeId,
          "nodeName":this.nodeName,
          "taskId":this.tableInfo.taskId,
          "databaseId":this.tableInfo.parentId,
          "tableName":this.tableInfo.tableName,
          "tableAsName":this.tableInfo.tableAsName,
          "tableField": this.tableInfo.tableField.substring(1),
          "tableAsField":this.tableInfo.tableAsField.substring(1),
          "fieldAsEngineId":this.tableInfo.fieldAsEngineId
        }).then(res=>{

          alert(res.msg);
      })
    },

    //选择完下拉框的表后点击下一步
    addTaskInput(){
      this.taskInputForm = false;
      this.selectEngineList();
      this.taskInputTable = true;
    },

    //选中需要的字段后将需要的值赋在tableInfo中
    handleSelectionChange(val) {
      if(val.length<=0){
        val = this.tableInfo.columnList;
        return;
      }
      this.tableInfo.tableField = "";
      this.tableInfo.tableAsField = "";
      val.forEach(item=>{
        this.tableInfo.tableField +=','+ item.columnName;
        this.tableInfo.tableAsField +=','+ item.tableAsField;
      })

      console.log(this.tableInfo.tableField);
    },

    //根据树状下拉的选择赋值字段信息
    handleNodeClick(data) {
      this.tableInfo = data;
      findStructureByTableId(data.id).then((res)=>{
        this.tableInfo.structureList=res.data;
      })
      this.tableInfo.taskId = this.$route.params.id;
      const cellById = this.graph.getCellById(this.nodeId)
      cellById.setData(this.tableInfo);
    },

    //弹出选择表界面给树状下拉框赋值
    findTAbleInfoList(){
      findTableInfoList().then(res=>{
        this.data=res.data;
      })
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.findTAbleInfoList();
    this.tableInfo.taskId = this.$route.params.id;
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>

</style>
