<template>
  <div>
    <el-row>
      <el-col :span="12"> {{$lang.attributeValueList}} </el-col>
      <el-col :span="12">
        <el-button type="primary" @click="openOptionEditDialog()"
          >{{$lang.add}}</el-button
        >
      </el-col>
    </el-row>
    <div>
      <el-table :data="optionList">
        <el-table-column :label="$lang.displayName" prop="name"></el-table-column>
        <el-table-column :label="$lang.trueValue" prop="value"></el-table-column>
        <el-table-column :label="$lang.action">
          <template #default="scope">
            <el-button size="mini" @click="openOptionEditDialog(scope.row)"
              >{{$lang.edit}}</el-button
            >
            <el-popconfirm
              :title="$lang.deleteTips"
              @confirm="removeOption(scope.row, scope)"
              :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>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :title="$lang.editValue"
      v-model="optionEditDialog"
      width="30%"
      :destroy-on-close="true"
    >
      <create
        :elementId="elementId"
        @close="saveOptions"
        :optionItem="optionItem"
      ></create>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import { Option } from "@/model/Attribute";
import { attributeType } from "@/enums/attribute";
import SwtionAttribute from "@/plugins/attribute";
import { NormalElement } from "@/model/Element";
import create from "./create.vue";
@Options({ components: { create } })
export default class time extends Vue {
  @Prop({
    default: "0",
    type: String,
  })
  public elementId!: string;
  @Prop({
    default: new Array<IOption>(),
    type: Array,
  })
  public options!: Array<IOption>;
  public optionItem = new Option();
  public optionEditDialog = false;
  public swtionAttr = new SwtionAttribute();
  private node = new NormalElement();
  public optionList = new Array<IOption>();
  created() {
    for (let i = 0; i < this.options.length; i++) {
      this.optionList.push(new Option(this.options[i]));
    }
  }
  public openOptionEditDialog(data: IOption) {
    this.optionItem = new Option(data);
    this.optionEditDialog = true;
  }
  public saveOptions(value: IOption) {
    if (value) {
      if (value.id === "") {
        this.swtionAttr.appendOption(
          attributeType.option,
          value,
          this.node.id,
          this.optionList
        );
      } else {
        this.swtionAttr.editAttributeValue(value.id, value, this.optionList);
      }
    }
    this.optionEditDialog = false;
  }
  public getOptions(): Array<IOption> {
    return this.optionList;
  }
  public removeOption(data: IOption) {
    this.optionList.remove(data);
  }
}
</script>
