<template>
  <div class="ant-tabs-tabpane">
    <el-tabs default-active-key="1" @change="callback">
      <el-tab-pane key="1" label="条件节点设置">
        <el-form :layout="formLayout">
          <el-form-item name="nodeName" label=" 条件节点名称">
            <el-input
              placeholder="请输入节点名称"
              v-model="nodeName"
            ></el-input>
          </el-form-item>
          <el-form-item label="参数列表" size="mini">
            <el-table :data="conditionForm.sourcedatalist" style="width: 100%" border>
              <!-- 此处的sourcedatalist  为   下方this.sourcedatalist -->
              <el-table-column prop="paraname" label="名称(参数)" width="100">
              </el-table-column>
              <el-table-column prop="from" label="来源及引用方式" width="180">
              </el-table-column>
            </el-table>
            <el-table :data="conditionForm.sourceartilist" style="width: 100%" border>
              <el-table-column prop="paraname" label="名称(文件)" width="100">
              </el-table-column>
              <el-table-column prop="from" label="来源及引用方式" width="180">
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item
            label="输入条件"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <el-input
              placeholder="请输入条件"
              v-model="conditionForm.inputcondition"
            ></el-input>
          </el-form-item>
          <el-form-item :wrapper-col="buttonItemLayout.wrapperCol">
            <el-button type="primary" @click="primary"> 保存 </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      // 获取所有类别列表
      categoryList: [],
      nodeName: "",
      sourcedatalist: [],
      sourceartilist: [],
      //conditionForm  为了传参方便   传一个参数
      conditionForm: {
        inputcondition: "",
        sourcedatalist: [],
        sourceartilist: [],
      },
      cell: null,

      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
    };
  },
  //   mounted(){
  //     this.init([],"");
  //   },
  methods: {
    handleFormLayoutChange(e) {
      this.formLayout = e.target.value;
    },
    callback(key) {
      console.log(key);
    },
    init(sourcedatalist,sourceartilist, inputcondition, cell) {
      this.visible = true;
      // this.conditionForm.sourcedatalist =sourcedatalist;
      this.conditionForm.sourcedatalist = sourcedatalist;
      this.conditionForm.sourceartilist = sourceartilist;
      this.conditionForm.inputcondition = inputcondition;
      this.cell = cell;
      console.log(sourcedatalist);
      console.log("sourcedatalist");
      console.log(this.conditionForm.sourcedatalist);
      console.log("design-connode-config  init");
      console.log(this.cell.getData());
      this.nodeName = cell.getData().nodeName;
    },
    primary() {
      //条件节点设置只会改变inputcondition
      this.cell.setData({ inputcondition: this.conditionForm.inputcondition });
      this.cell.setData({nodeName:this.nodeName});
      this.$emit("primaryclick", this.conditionForm, this.cell);
    },
    changeSourcedata(celldata, cell) {

      // this.sourcedatalist = celldata.sourcedatalist;
      this.conditionForm.sourcedatalist = celldata.sourcedatalist;
      this.conditionForm.sourceartilist = celldata.sourceartilist;
      console.log("design-connode-config  sourcedatalist ");
      this.cell.setData({ sourcedatalist: this.sourcedatalist });
      this.cell.setData({ sourceartilist: this.sourceartilist });
    },
  },
  computed: {
    formItemLayout() {
      const { formLayout } = this;
      return formLayout === "horizontal"
        ? {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
          }
        : {};
    },
    buttonItemLayout() {
      const { formLayout } = this;
      return formLayout === "horizontal"
        ? {
            wrapperCol: { span: 14, offset: 4 },
          }
        : {};
    },
  },
};
</script>
<style>
.ant-tabs-tabpane {
  background: #fff;
  padding: 5px;
  width: 100%;
  height: 100%;
}
.ant-tabs-tab {
  flex: 1 0 50px;
  padding: 7px 16px;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}
</style>