<template>
  <div>
    <el-card class="box-card">
      <template #header>{{$lang.name}}</template>
      <name-container
        :node="calc"
        ref="name"
        @save="saveName"
      ></name-container>
    </el-card>
    <el-card class="box-card">
      <template #header>{{$lang.edit}}</template>
      <el-row>
        <el-col :span="4" v-for="(item, index) in valueList" :key="index">
          <div>
            <calc-result-container :node="item"></calc-result-container>
          </div>
          <div>
            <el-popconfirm
              :title="$lang.deleteTips"
              @confirm="removeValue(item, 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>
        </el-col>
        <el-col :span="4">
          <el-button @click="addValue">+</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <template #header>{{$lang.view}}</template>
      <label v-for="(item, index) in valueList" :key="index">{{
        item.label
      }}</label>
    </el-card>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import SwtionCalc from "@/plugins/calc";
import { calc } from "@/model/Calc";
@Options({})
export default class layout extends Vue {
  @Prop({
    default: "",
    type: String,
  })
  public id!: string;
  public valueList = new Array<IValue>();
  public swtionCalc = new SwtionCalc();
  public calc = new calc();
  created() {
    this.calc = this.swtionCalc.findCalc(this.id);
    this.valueList = this.calc.result;
  }
  public closeDialog() {
    this.$emit("closeDialog");
  }
  public addValue() {
    this.swtionCalc.addCalcValue(this.id, this.calc);
  }
  public removeValue(item: IValue, index: any) {
    this.valueList.removeAt(index);
  }
  public getData(): ICalc {
    return this.calc;
  }
  public saveName(data: string) {
    this.calc.name = data;
  }
}
</script>

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