<template>
  <div>
    <template v-for="(el, index) in attributeValueList" :key="index">
      <span>{{ el.name }}：</span>
      <component
        :is="'sc-' + elementAttributeType[el.type]"
        :attributeValue="el"
        :elementId="elementId"
        :type="type"
      ></component>
    </template>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import SwtionElement from "@/plugins/element";
import SwtionAttribute from "@/plugins/attribute";
import { Attribute, NormalElement } from "@/model/Element";
import { elementAttributeType } from "@/enums/attribute";
@Options({})
export default class list extends Vue {
  @Prop({
    default: "0",
    type: String,
  })
  public elementId!: string;
  @Prop({
    default: "self",
    type: String,
  })
  public type!: keyof Attribute;
  public elementAttributeType = elementAttributeType;
  public attributeValueList = new Array<IAttributeValue>();
  public swtionEle = new SwtionElement();
  public swtionAttr = new SwtionAttribute();
  private node = new NormalElement();
  created() {
    this.node = this.swtionEle.findTreeNode(this.elementId);
    this.attributeValueList = this.node.attribute[this.type];
  }
}
</script>
