<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane :label="$lang.parentAttribute" name="parentAttribute"
        ><list :elementId="elementId" type="parent"></list
      ></el-tab-pane>
      <el-tab-pane :label="$lang.selfAttribute" name="selfAttribute">
        <create :elementId="elementId" @changeName="changeName"></create>
        <list :elementId="elementId" type="self"></list
      ></el-tab-pane>
      <el-tab-pane :label="$lang.edit" name="editProp">
        <props :elementId="elementId"></props>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import list from "@/components/attribute/list.vue";
import create from "@/components/attribute/create.vue";
import props from "@/components/attribute/props.vue";
@Options({
  components: { list, create, props },
})
export default class attribute extends Vue {
  public activeName = "parentAttribute";
  @Prop({
    default: "0",
    type: String,
  })
  public elementId!: string;
  public changeName() {
    this.$emit("changeName");
  }
}
</script>
