<template>
  <div>
    <el-tabs size="small" v-model="activeKey">
      <el-tab-pane name="flow-attr">
        <span slot="label">
          <i class="el-icon-data-analysis"></i>
          流程属性
        </span>
        <el-form label-width="60px">
          <el-form-item label="流程id">
            <el-input
              sizi="mini"
              style="width: 80%"
              :value="flowData.attr.id"
              disabled
            />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane name="node-attr">
        <span slot="label">
          <i class="el-icon-notebook-2"></i>
          节点属性
        </span>
        <template v-if="currentSelect.type == 'start'">
          <el-form label-width="80px">
            <el-form-item label="类型">
              <el-tag color="purple">{{ currentSelect.type }}</el-tag>
            </el-form-item>
            <el-form-item label="id">
              <el-input
                sizi="mini"
                style="width: 80%"
                :value="currentSelect.id"
                disabled
              />
            </el-form-item>
            <el-form-item label="环节名称">
              <el-input
                sizi="mini"
                style="width: 80%"
                placeholder="请输入环节名称名称"
                v-model="currentSelect.nodeName"
                @change="nodeNameChange"
              />
            </el-form-item>
          </el-form>
        </template>
        <template v-if="currentSelect.type == 'end'">
          <el-form label-width="80px">
            <el-form-item label="类型">
              <el-tag color="purple">{{ currentSelect.type }}</el-tag>
            </el-form-item>
            <el-form-item label="id">
              <el-input
                sizi="mini"
                style="width: 80%"
                :value="currentSelect.id"
                disabled
              />
            </el-form-item>
            <el-form-item label="环节名称">
              <el-input
                sizi="mini"
                style="width: 80%"
                placeholder="请输入环节名称名称"
                v-model="currentSelect.nodeName"
              />
            </el-form-item>
          </el-form>
        </template>
        <template v-if="currentSelect.type == 'common'">
          <el-form label-width="80px">
            <el-form-item label="类型">
              <el-tag color="purple">{{ currentSelect.type }}</el-tag>
            </el-form-item>
            <el-form-item label="id">
              <el-input
                sizi="mini"
                style="width: 80%"
                :value="currentSelect.id"
                disabled
              />
            </el-form-item>
            <el-form-item label="名称">
              <el-input
                sizi="mini"
                style="width: 80%"
                placeholder="请输入节点名称"
                v-model="currentSelect.nodeName"
                @change="nodeNameChange"
              />
            </el-form-item>
            <el-form-item label="处理角色">
              <el-select v-model="currentSelect.roleCode" style="width: 80%">
                <el-option
                  v-for="(item, index) in roleCodeOpt"
                  :key="index"
                  :value="item.optCode"
                  :label="item.optName"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="派单方式">
              <el-select
                v-model="currentSelect.dispatchType"
                @change="dispatchChange"
                style="width: 80%"
              >
                <el-option
                  v-for="(item, index) in dispatchTypeOpt"
                  :key="index"
                  :value="item.optCode"
                  :label="item.optName"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="处理表单">
              <el-select v-model="currentSelect.actionUrl" style="width: 80%">
                <el-option
                  v-for="(item, index) in actionUrlOpt"
                  :key="index"
                  :value="item.optCode"
                  :label="item.optName"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </template>
        <template v-else-if="currentSelect.type == 'freedom'">
          <el-form layout="horizontal">
            <el-form-item label="类型">
              <el-tag color="purple">{{ currentSelect.type }}</el-tag>
            </el-form-item>
            <el-form-item label="id">
              <el-input
                sizi="mini"
                style="width: 80%"
                v-model="currentSelect.id"
                disabled
              />
            </el-form-item>
            <el-form-item label="名称">
              <el-input
                sizi="mini"
                style="width: 80%"
                placeholder="请输入节点名称"
                v-model="currentSelect.nodeName"
                @change="nodeNameChange"
              />
            </el-form-item>
          </el-form>
        </template>
        <template v-else-if="currentSelect.type == 'event'">
          <el-form layout="horizontal">
            <el-form-item label="类型">
              <el-tag color="purple">{{ currentSelect.type }}</el-tag>
            </el-form-item>
            <el-form-item label="id">
              <el-input
                sizi="mini"
                style="width: 80%"
                v-model="currentSelect.id"
                disabled
              />
            </el-form-item>
            <el-form-item label="名称">
              <el-input
                sizi="mini"
                style="width: 80%"
                placeholder="请输入节点名称"
                v-model="currentSelect.nodeName"
                @change="nodeNameChange"
              />
            </el-form-item>
          </el-form>
        </template>
        <template v-else-if="currentSelect.type == 'gateway'">
          <el-form label-width="80px">
            <el-form-item label="类型">
              <el-tag color="purple">{{ currentSelect.type }}</el-tag>
            </el-form-item>
            <el-form-item label="id">
              <el-input
                sizi="mini"
                style="width: 80%"
                :value="currentSelect.id"
                disabled
              />
            </el-form-item>
            <el-form-item label="名称">
              <el-input
                sizi="mini"
                style="width: 80%"
                placeholder="请输入节点名称"
                v-model="currentSelect.nodeName"
                @change="nodeNameChange"
              />
            </el-form-item>
          </el-form>
        </template>
        <template v-else-if="currentSelect.type == 'child-flow'">
          <el-form layout="horizontal">
            <el-form-item label="类型">
              <el-tag color="purple">{{ currentSelect.type }}</el-tag>
            </el-form-item>
            <el-form-item label="id">
              <el-input
                sizi="mini"
                style="width: 80%"
                v-model="currentSelect.id"
                disabled
              />
            </el-form-item>
            <el-form-item label="名称">
              <el-input
                sizi="mini"
                style="width: 80%"
                placeholder="请输入节点名称"
                v-model="currentSelect.nodeName"
                @change="nodeNameChange"
              />
            </el-form-item>
          </el-form>
        </template>
        <template
          v-else-if="
            currentSelect.type == 'x-lane' || currentSelect.type == 'y-lane'
          "
        >
          <el-form label-width="80px">
            <el-form-item label="类型">
              <el-tag color="purple">{{ currentSelect.type }}</el-tag>
            </el-form-item>
            <el-form-item label="id">
              <el-input
                sizi="mini"
                style="width: 80%"
                v-model="currentSelect.id"
                disabled
              />
            </el-form-item>
            <el-form-item label="名称">
              <el-input
                sizi="mini"
                style="width: 80%"
                placeholder="请输入节点名称"
                v-model="currentSelect.nodeName"
                @change="nodeNameChange"
              />
            </el-form-item>
          </el-form>
        </template>
      </el-tab-pane>
      <el-tab-pane name="link-attr">
        <span slot="label">
          <i class="el-icon-share"></i>
          连线属性
        </span>
        <el-form label-width="80px">
          <el-form-item label="id">
            <el-input
              sizi="mini"
              style="width: 80%"
              :value="currentSelect.id"
              disabled
            />
          </el-form-item>
          <el-form-item label="源节点">
            <el-input
              sizi="mini"
              style="width: 80%"
              v-model="currentSelect.sourceId"
              disabled
            />
          </el-form-item>
          <el-form-item label="目标节点">
            <el-input
              sizi="mini"
              style="width: 80%"
              v-model="currentSelect.targetId"
              disabled
            />
          </el-form-item>
          <el-form-item label="文本">
            <el-input
              sizi="mini"
              style="width: 80%"
              v-model="currentSelect.label"
              @change="linkLabelChange"
            />
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import jsplumb from "jsplumb";
import { flowConfig } from "../config/args-config.js";

export default {
  props: ["plumb", "flowData", "select"],
  components: {
    jsplumb,
  },
  data() {
    return {
      dd: "",
      currentSelect: this.select,
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 },
      },
      activeKey: "flow-attr",
      roleCodeOpt: "",
      dispatchTypeOpt: "",
      actionUrlOpt: "",
    };
  },
  methods: {
    getSelect() {
      this.$http({
        url: "/bpm/api/nodeInit",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          actionUrl: null,
          dispatchType: null,
          roleCode: null,
          stepId: "nodeplygi31rbd",
          stepName: "流程节点",
        },
      }).then((res) => {
        this.roleCodeOpt = res.data.roleCodeOpt;
        this.dispatchTypeOpt = res.data.dispatchTypeOpt;
        this.actionUrlOpt = res.data.actionUrlOpt;
      });
    },
    // 节点名称监听事件
    nodeNameChange(e) {
      console.log(e);
      // this.currentSelect.nodeName = e.target.value;
    },
    // 派单方式监听事件
    dispatchChange(e) {
      this.currentSelect.dispatchType = e;
    },
    // 处理表单监听事件
    actionChange(e) {
      this.currentSelect.actionUrl = e;
    },
    // 角色选择监听事件
    roleNameChange(e) {
      this.currentSelect.roleCode = e;
    },
    linkLabelChange(e) {
      const that = this;
      let label = e;

      that.currentSelect.label = label;
      let conn = that.plumb.getConnections({
        source: that.currentSelect.sourceId,
        target: that.currentSelect.targetId,
      })[0];
      if (label != "") {
        conn.setLabel({
          label: label,
          cssClass: "linkLabel",
        });
      } else {
        let labelOverlay = conn.getLabelOverlay();
        if (labelOverlay) conn.removeOverlay(labelOverlay.id);
      }
    },
  },
  watch: {
    select(val) {
      this.currentSelect = val;
      if (this.currentSelect.type == "link") {
        this.activeKey = "link-attr";
      } else if (!this.currentSelect.type) {
        this.activeKey = "flow-attr";
      } else {
        this.activeKey = "node-attr";
      }
    },
    currentSelect: {
      handler(val) {
        this.$emit("update:select", val);
      },
      deep: true,
    },
  },
  mounted() {
    this.getSelect();
  },
};
</script>

<style lang="scss">
@import "../style/flow-attr.scss";
</style>