<template>
  <div>
    <el-form ref="form" :rules="rule" :model="optionForm" label-width="120px">
      <el-form-item :label="$lang.displayName" prop="name">
        <el-input
          v-model="optionForm.name"
          :placeholder="$lang.displayNamePlaceholder"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$lang.trueValue" prop="value">
        <el-input
          v-model="optionForm.value"
          :placeholder="$lang.trueValuePlaceholder"
        ></el-input>
      </el-form-item>
    </el-form>
    <span class="dialog-footer">
      <el-button @click="closeDialog(false)">{{$lang.cancel}}</el-button>
      <el-button type="primary" @click="saveOption">{{$lang.save}}</el-button>
    </span>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import SwtionAttribute from "@/plugins/attribute";
import { Option } from "@/model/Attribute";
@Options({})
export default class create extends Vue {
  @Prop({
    default: new Option(),
    type: Option,
  })
  public optionItem!: IOption;
  public optionForm = new Option();
  public rule = Option.rules();
  public swtionAttr = new SwtionAttribute();
  created() {
    this.optionForm = new Option(this.optionItem);
  }
  public saveOption() {
    const _this = this as any;
    _this.$refs["form"].validate(async (valid: Boolean) => {
      if (valid) {
        _this.closeDialog();
      }
    });
  }
  public closeDialog(edit = true) {
    this.$emit("close", edit ? this.optionForm : null);
  }
  
}
</script>
