<template>
  <div>
    <el-card class="box-card">
      <template #header>{{$lang.processName}}</template>
      <name-container
        :node="process"
        ref="name"
        @save="saveName"
      ></name-container>
    </el-card>
    <el-card
      class="box-card"
      v-for="(item, index) in process.assemble"
      :key="index"
    >
      <template #header v-if="process.assemble.length > 1">
        <el-row>
          <el-col :span="12">
            <el-input v-model="item.remark" :placeholder="$lang.remark"></el-input>
          </el-col>
          <el-col :span="12">
            <el-popconfirm
              :title="$lang.deleteTips"
              @confirm="delAssemble(index)"
              :confirm-button-text="$lang.confirm"
              :cancel-button-text="$lang.cancel"
              icon="el-icon-info"
              icon-color="red"
            >
              <template #reference>
                <el-button>{{ $lang.delete }}</el-button>
              </template>
            </el-popconfirm>
          </el-col>
        </el-row>
      </template>
      <el-card class="box-card">
        <template #header>{{$lang.if}}</template>
        <!-- {{ JSON.stringify(conditions) }} -->
        <process-condition-container
          :node="item.condition"
          :root="process"
          ref="condition"
        ></process-condition-container>
      </el-card>
      <el-card class="box-card">
        <template #header>{{$lang.then}}</template>
        <div>{{$lang.return}}</div>
        <html-container
          :id="id"
          ref="return"
          :html="item"
          :index="index"
          @save="saveReturn"
        ></html-container>
        <div>{{$lang.assign}}</div>
        <assign-container
          ref="assign"
          :assigns="item"
          :id="id"
          :index="index"
        ></assign-container>
      </el-card>
    </el-card>
    <div v-if="process.assemble.length > 1">
      {{$lang.relation}}
      <el-select v-model="process.relation" placeholder="Select">
        <el-option
          v-for="item in relationType"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
    <el-card class="box-card">
      <el-button @click="addAssemble">{{$lang.addResult}}</el-button>
    </el-card>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Prop, Watch } from "vue-property-decorator";
import { relationType } from "@/enums/process";
import SwtionProcess from "@/plugins/process";
import { process } from "@/model/Process";
@Options({})
export default class layout extends Vue {
  @Prop({
    default: "",
    type: String,
  })
  public id!: string;
  // public name = "";
  public swtionProcess = new SwtionProcess();
  // public result = "";
  public process = new process();
  public relationType = new Array<any>();
  @Watch("id", { immediate: true, deep: true })
  watchId(val: string) {
    this.changeName();
    // this.setProcessProp();
  }
  // @Watch("process.name", { immediate: true, deep: true })
  // onProcessChange() {
  //   this.changeName();
  // }
  public changeName() {
    this.setProcess();
    if (this.$refs["name"]) {
      (this.$refs["name"] as any).initName(this.process.name);
    }
    if (this.$refs["return"]) {
      let items = this.$refs["return"] as any;
      for (let i = 0; i < items.length; i++) {
        if (i < this.process.assemble.length) {
          items[i].initTag(this.process.assemble[i].return);
        }
      }
    }
    if (this.$refs["condition"]) {
      let items = this.$refs["condition"] as any;
      for (let i = 0; i < items.length; i++) {
        items[i].reload();
      }
    }
    if (this.$refs["assign"]) {
      let items = this.$refs["assign"] as any;
      if (items && items.length > 0) {
        for (let i = 0; i < items.length; i++) {
          items[i].reload();
        }
      }
    }
  }
  created() {
    this.setProcess();
    const _this=this as any;
    for (var v in relationType) {
      if (typeof relationType[v] === "number") {
        this.relationType.push({ id: <any>relationType[v], name: _this.$lang[v] });
      }
    }
    // this.setProcessProp();
  }
  public closeDialog() {
    this.$emit("closeDialog");
  }
  public setProcess() {
    this.process = this.swtionProcess.loadProcessLineById(this.id);
  }
  // public setProcessProp() {
  //   this.name = this.process.name;
  //   this.result = this.process.result;
  // }
  public saveReturn(data: string, index: number) {
    this.process.assemble[index].return = data;
  }
  public saveName(data: string) {
    this.process.name = data;
    this.changeName();
  }
  public addAssemble() {
    this.swtionProcess.addAssemble(this.process);
  }
  public delAssemble(index: number) {
    this.swtionProcess.delAssemble(index, this.process);
  }
}
</script>

<style lang="scss"></style>