<template>
  <div>
    
    <ul>
      <li v-for="(item, index) in processList" :key="index">
        <el-button @click="changeProcess(item.id)">{{ item.name }}</el-button>
        <el-popconfirm
          :title="$lang.deleteTips"
          @confirm="delProcess(item.id)"
          :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>
      </li>
    </ul>
    
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import SwtionProcess from "@/plugins/process";
import { process } from "@/model/Process";
@Options({})
export default class list extends Vue {
  @Prop({
    default: new Array<IProcess>(),
    type: Array,
  })
  public list!: Array<IProcess>;
  public swtionProcess = new SwtionProcess();
  public processList = new Array<IProcess>();
  created() {
    this.getProcessList();
    this.changeProcess(this.processList[0].id);
  }
  public getProcessList() {
    if (this.list.length > 0) {
      this.swtionProcess.initProcess(this.list);
    }
    this.processList = this.swtionProcess.loadProcess();
    if (this.processList.length === 0) {
      this.swtionProcess.addProcess();
      this.processList = this.swtionProcess.loadProcess();
    }
  }
  public changeProcess(id: string) {
    this.$emit("checked", id);
  }
  public delProcess(id: string) {
    if (!this.swtionProcess.delProcess(id, this.processList)) {
      (<any>this).$notify({
        title: (this as any).$lang.error,
        message: (this as any).$lang.deleteUsedProcess,
        type: "error",
      });
    } else {
      if (this.processList.length === 0) {
        this.addProcess();
        this.changeProcess(this.processList[0].id);
      }
    }
  }
  public addProcess() {
    this.swtionProcess.addProcess();
    this.$forceUpdate();
  }
}
</script>

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