<template>
  <div class="design_contain">
    <el-breadcrumb separator="/" class="bread_crumb1">
      <el-breadcrumb-item :to="{ path: '/workplace' }">{{ $t("lang.online_component_tool") }}</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/progress/designer' }">{{ $t("lang.process_design") }}</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/progress/designer' }">{{ $t("lang.process_management") }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ $t("lang.new") }}</el-breadcrumb-item>
    </el-breadcrumb>
    <BlockRadius class="block_item">
      <steps :active-step="step" :done="done" :show-done="true" done-title="保存成功" done-sub-title="可返回流程管理列表查看该流程，并进行流程的部署和发布。" class="apaas_steps">
        <step title="基本信息" :step="0" :active-icon="require('@/assets/imgs/progress_ic_xinxitx.png')" class="apaas_step">
          <div class="step_in">
            <el-form :model="basic_form" :rules="rules" ref="basicInformation" class="form_left">
              <el-form-item prop="name">
                <p class="formname">流程名称：</p>
                <el-input v-model="basic_form.name" placeholder="请输入流程名称"></el-input>
              </el-form-item>
              <el-form-item prop="workplace">
                <p class="formname">工作区域：</p>
                <el-select v-model="basic_form.workplace" @change="changeWorkPlace" placeholder="请选择工作区域">
                  <el-option v-for="item in workplace_list" :label="item" :value="item" :key="item"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="desc">
                <p class="formname">流程描述：</p>
                <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 10}" v-model="basic_form.desc" placeholder="请输入流程描述"></el-input>
              </el-form-item>
            </el-form>
            <div class="btn_footer">
              <el-button class="cancel" @click="cancel">取消</el-button>
              <el-button class="next" @click="next">下一步</el-button>
            </div>
          </div>
        </step>
        <step title="流程设计" :step="1" :active-icon="require('@/assets/imgs/progress_ic_liucheng.png')" class="apaas_step">
          <div class="step_in">
            <WorkFlow ref="workFlow" class="work_flow" />
            <div class="btn_footer">
              <el-button class="cancel" @click="cancel">取消</el-button>
              <div>
                <el-button class="cancel" @click="back">上一步</el-button>
                <el-button class="next" @click="complete">完成</el-button>
              </div>
            </div>
          </div>
        </step>
        <step title step-title="完成" :step="2" :active-icon="require('@/assets/imgs/progress_ic_wancheng.png')" class="apaas_step"></step>

        <template slot="action">
          <el-button type="primary" @click="backToList">返回列表</el-button>
        </template>
      </steps>
    </BlockRadius>
  </div>
</template>

<script>
import WorkFlow from "@/components/work-flow/super-flow";
import BlockRadius from "@/components/general/block-radius";
import Steps from "@/components/app-build-steps/app-build-steps";
import Step from "@/components/app-build-steps/app-build-step";

export default {
  components: {
    WorkFlow,
    BlockRadius,
    Steps,
    Step
  },
  data: () => {
    return {
      step: 0,
      done: false,
      basic_form: {
        name: "",
        workplace: "",
        desc: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入流程名称", trigger: "blur" },
          { max: 16, message: "不能超过16个字符", trigger: "blur" }
        ],
        workplace: [
          { required: true, message: "请选择工作区域", trigger: "blur" }
        ],
        desc: [
          { required: true, message: "请输入流程描述", trigger: "blur" },
          { max: 400, message: "不能超过400个字符", trigger: "blur" }
        ]
      },
      workplace_list: []
    };
  },
  methods: {
    verification() {
      let self = this;
      let data = JSON.parse(JSON.stringify(self.$refs.workFlow.getData()));
      console.log(JSON.stringify(data));
      let start_num = 0;
      let end_num = 0;
      let start_id = "";
      let end_id = "";
      let start_before = 0;
      let end_after = 0;
      let in_edge = 0;
      let out_edge = 0;
      let datas = { ...data.obj };
      console.log(data);
      datas.nodeList.forEach(item => {
        let da = data.params.find(nodep => {
          return nodep.id == item.meta.id;
        });
        item.meta = da;
        if (item.meta.type == 1) {
          start_num++;
          start_id = item.id;
        }
        if (item.meta.type == 2) {
          end_num++;
          end_id = item.id;
        }
        if (
          datas.linkList.findIndex(el => {
            return el.startId == item.id;
          }) == -1 &&
          item.id != end_id
        ) {
          in_edge++;
        } else if (
          datas.linkList.findIndex(el => {
            return el.endId == item.id;
          }) == -1 &&
          item.id != start_id
        ) {
          out_edge++;
        }
      });
      datas.linkList.forEach(item => {
        if (start_id == item.endId) {
          start_before++;
        }
        if (end_id == item.startId) {
          end_after++;
        }
      });
      if (start_num != 1 || end_num != 1) {
        this.$message({
          message: "开始节点与结束节点均应有且只有一个",
          type: "warning"
        });
      } else if (start_before != 0) {
        this.$message({
          message: "开始节点前面不应连接其它节点",
          type: "warning"
        });
      } else if (end_after != 0) {
        this.$message({
          message: "结束节点后面不应连接其它节点",
          type: "warning"
        });
      } else if (in_edge != 0 || out_edge != 0) {
        this.$message({
          message: "请保证每个节点都被连接",
          type: "warning"
        });
      }
      console.log(datas);
    },
    backToList() {
      this.$router.push("/message/directed_push");
    },
    changeWorkPlace() {},
    cancel() {
      this.$router.go(-1);
    },
    next() {
      this.$refs["basicInformation"].validate(valid => {
        if (valid) {
          console.log("sss")
          this.step++;
        } else {
        }
      });
    },
    back() {
      this.step--;
    },
    complete() {
      this.verification();
    }
  }
};
</script>

<style scoped>
.design_contain {
  width: 100%;
  height: calc(100% - 20px);
  padding: 0 20px;
}
.block_item {
  height: calc(100% - 56px);
}
.step_in {
  height: 100%;
}
.form_left {
  width: 55%;
  height: calc(100% - 70px);
}
.btn_footer {
  width: calc(100% - 20px);
  height: 40px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
}
.cancel {
  background-color: #e3e5ef;
  color: #0f2683;
}
.next {
  background-color: #0f2683;
  color: #f8f9fd;
}
.work_flow {
  height: calc(100% - 70px);
}
</style>
<style>
.block_item .el-textarea__inner {
  border-radius: 8px;
  background-color: #f7f8f9;
  border: solid 1px #e3e5ef;
}
.block_item .el-input__inner {
  background-color: #f7f8f9;
  border: solid 1px #e3e5ef;
}
.block_item .el-select {
  width: 100%;
}
</style>
