<template>
  <div>
    <template v-for="(item, index) in assigns.assign" :key="index">
      <assign-control :assign="item" ref="control"></assign-control>
      <div>
        <el-popconfirm
          :title="$lang.deleteTips"
          @confirm="delAssign(index)"
          :confirm-button-text="$lang.confirm"
          :cancel-button-text="$lang.cancel"
          icon="el-icon-info"
          icon-color="red"
        >
          <template #reference>
            <el-button size="mini">{{ $lang.delete }}</el-button>
          </template>
        </el-popconfirm>
      </div>
    </template>
    <div><el-button size="mini" @click="addAssign">{{$lang.add}}</el-button></div>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import { assemble, assign } from "@/model/Process";
@Options({})
export default class list extends Vue {
  @Prop({
    default: new assemble(),
    type: assemble,
  })
  public assigns!: IAssemble;

  @Prop({
    default: "",
    type: String,
  })
  public id!: string;
  created() {}
  public addAssign() {
    let item = new assign();
    this.assigns.assign.push(item);
  }
  public delAssign(index: number) {
    this.assigns.assign.removeAt(index);
  }
  public reload() {
    let items = this.$refs["control"] as any;
    if (items && items.length) {
      for (let i = 0; i < items.length; i++) {
        items[i].loadAttributeOption();
      }
    }
  }
}
</script>
