<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>
                <p class="formname">流程名称：</p>
                <el-input v-model="basic_form.name" placeholder="请输入流程名称"></el-input>
              </el-form-item>
              <el-form-item prop="preson">
                <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="phone">
                <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 = self.$refs.workFlow.getData();
      console.log(data);
      let start_num = 0;
      let end_num = 0;
      let start_id = "";
      let end_id = "";
      let start_before = 0;
      let end_after = 0;
      data.nodeList.forEach((item) => {
        if (item.meta.type == 0) {
          start_num++;
          start_id = item.id;
        }
        if (item.meta.type == 1) {
          end_num++;
          end_id = item.id;
        }
      });
      data.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",
        });
      }
    },
    backToList() {
      this.$router.push("/message/directed_push");
    },
    changeWorkPlace() {},
    cancel() {
      this.$router.go(-1);
    },
    next() {
      this.step++;
    },
    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: #e3e5ef;
  border: solid 1px #e3e5ef;
}
.block_item .el-input__inner {
  background-color: #e3e5ef;
  border: solid 1px #e3e5ef;
}
.block_item .el-select {
  width: 100%;
}
</style>
