<template>
  <div>
    <div class="align-r">
      <el-button type="primary" @click="attributeListDialog = true"
        >{{$lang.edit}}</el-button
      >
    </div>
    <el-dialog
      v-model="attributeListDialog"
      :title="$lang.attributeList"
      width="40%"
      :destroy-on-close="true"
    >
      <div>
        <el-button type="primary" @click="openAttributeEditDialog()"
          >{{$lang.add}}</el-button
        >
      </div>
      <div>
        <el-table :data="attributeList">
          <el-table-column :label="$lang.name" prop="name"></el-table-column>
          <el-table-column :label="$lang.type" prop="type">
            <template #default="scope">
              {{ elementAttributeType[scope.row.type] }}
            </template>
          </el-table-column>
          <el-table-column :label="$lang.action">
            <template #default="scope">
              <el-button
                size="mini"
                @click="openAttributeEditDialog(scope.row.id)"
                >{{$lang.edit}}</el-button
              >
              <el-popconfirm
                :title="$lang.deleteTips"
                @confirm="removeAttribute(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.editAttribute"
        v-model="attributeEditDialog"
        width="30%"
        :destroy-on-close="true"
      >
        <attributeValue
          :elementId="elementId"
          :id="attributeValueId"
          @close="closeDialog"
        ></attributeValue>
      </el-dialog>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import SwtionElement from "@/plugins/element";
import { attributeType, elementAttributeType } from "@/enums/attribute";
import SwtionAttribute from "@/plugins/attribute";
import { NormalElement } from "@/model/Element";
import attributeValue from "@/components/attribute/attributeValue.vue";
@Options({ components: { attributeValue } })
export default class create extends Vue {
  @Prop({
    default: "0",
    type: String,
  })
  public elementId!: string;
  public attributeListDialog = false;
  public attributeEditDialog = false;
  public elementAttributeType = elementAttributeType;

  public attributeList = new Array();
  public attributeValueId = "";
  public swtionEle = new SwtionElement();
  public swtionAttr = new SwtionAttribute();
  private node = new NormalElement();
  created() {
    this.node = this.swtionEle.findTreeNode(this.elementId);
    this.attributeList = this.node.attribute.self;
  }
  public openAttributeEditDialog(id: string = "") {
    this.attributeValueId = id;
    this.attributeEditDialog = true;
  }
  public removeAttribute(data: IAttributeValue) {
    if (
      !this.swtionAttr.removeAttribute(
        attributeType.attribute,
        data,
        this.node.id,
        this.attributeList
      )
    ) {
      (<any>this).$notify({
        title: (this as any).$lang.error,
        message: (this as any).$lang.deleteUsedAttribute,
        type: "error",
      });
    }
  }
  public closeDialog(isChangeName: boolean) {
    this.attributeEditDialog = false;
    if(isChangeName){
      this.$emit("changeName")
    }
  }
}
</script>
