<template>
  <div class="ant-tabs-tabpane">
    <el-tabs default-active-key="1" :stretch="true">
      <el-tab-pane key="1" label="条件节点设置">
        <el-form label-position="top" label-width="auto">
          <el-form-item label="条件节点名称" class="form">
            <el-input placeholder="请输入节点名称" v-model="nodeName"></el-input>
          </el-form-item>
          <el-form-item label="参数列表" class="form">
            <el-table :data="conditionForm.sourcedatalist" 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="文件列表" class="form">
            <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="输入条件" class="form">
            <el-input placeholder="请输入条件" v-model="conditionForm.inputcondition"></el-input>
          </el-form-item>
          <el-form-item class="form" style="margin-top: 20px">
            <el-button type="primary" @click="primary">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { Message } from "element-ui";
export default {
  data() {
    return {
      // 获取所有类别列表
      nodeName: "",
      conditionForm: {
        inputcondition: "",
        sourcedatalist: [],
        sourceartilist: []
      },
      cell: null
    };
  },
  methods: {
    init(cell) {
      this.cell = cell;
      const data = cell.getData();
      this.conditionForm.sourcedatalist = data.sourcedatalist || [];
      this.conditionForm.sourceartilist = data.sourceartilist || [];
      this.conditionForm.inputcondition = data.inputcondition || true;
      this.nodeName = data.nodeName;
    },
    primary() {
      // 条件节点设置只会改变inputcondition
      if (["", null, undefined].includes(this.nodeName)) {
        Message.error("条件节点名称不能为空");
        this.nodeName = this.cell.getData().nodeName;
        return;
      }
      if (["", null, undefined].includes(this.conditionForm.inputcondition)) {
        Message.error("输入条件不能为空");
        this.conditionForm.inputcondition = this.cell.getData().inputcondition || true;
        return;
      }
      this.cell.setData({
        nodeName: this.nodeName,
        inputcondition: this.conditionForm.inputcondition
      });
      Message.success("保存成功");
    }
  }
};
</script>
<style scope lang="scss">
.form {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.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>
