<template>
  <div>
    <div>
      <ul>
        <li v-for="(item, index) in calcList" :key="index">
          <el-button @click="setCalc(item.id)">{{ item.name }}</el-button>
        </li>
      </ul>
    </div>
    <el-dialog
      title="{{$lang.editCalc}}"
      v-model="calcDialog"
      width="70%"
      :destroy-on-close="true"
      @closed="closedDialog"
    >
      <template #title>
        <el-row>
          <el-col :span="12">{{ $lang.calc }}</el-col>
          <el-col :span="12" class="align-r"
            ><el-popconfirm
              :title="$lang.deleteTips"
              @confirm="delCalc(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>
            <el-button size="mini" @click="closeDialog">{{
              $lang.close
            }}</el-button></el-col
          >
        </el-row>
      </template>
      <calc-container ref="result" :id="id"></calc-container>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import SwtionCalc from "@/plugins/calc";
import { Prop } from "vue-property-decorator";
import { calc } from "@/model/Calc";
@Options({})
export default class layout extends Vue {
  @Prop({
    default: new Array<ICalc>(),
    type: Array,
  })
  public list!: Array<ICalc>;
  public swtionCalc = new SwtionCalc();
  public calcList = new Array<ICalc>();
  public calcDialog = false;
  public id = "";
  created() {
    if (this.list.length > 0) {
      this.swtionCalc.initCalc(this.list);
    }
    this.getCalcList();
  }
  public getCalcList() {
    this.calcList = this.swtionCalc.loadCalc();
  }
  public setCalc(id: string) {
    this.id = id;
    this.calcDialog = true;
  }
  public addCalc() {
    let calc = this.swtionCalc.addCalc();
    this.$forceUpdate();
    // this.setCalc(calc.id);
  }
  public delCalc(id: string) {
    if (!this.swtionCalc.delCalc(id, this.calcList)) {
      (<any>this).$notify({
        title: (this as any).$lang.error,
        message: (this as any).$lang.deleteUsedCalc,
        type: "error",
      });
    } else {
      this.closeDialog();
    }
  }
  public closeDialog() {
    this.calcDialog = false;
  }
  public closedDialog() {
    this.$emit("changeName");
  }
}
</script>

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