<template>
  <div>
    <base-form
      v-if="property.type === PropertyType.Input"
      :label="property.label"
      :value="property.value"
      @changeValue="changeValue"
      :isDisabled="isDisabled"
    />
    <date-form
      v-else-if="property.type === PropertyType.Date"
      :label="property.label"
      :value="property.value"
      @changeValue="changeValue"
      :isDisabled="isDisabled"
    />
    <select-form
      v-else-if="property.type === PropertyType.Select"
      :label="property.label"
      @changeValue="changeValue"
      :property="property"
      :isDisabled="isDisabled"
    />
    <image-form
      v-else-if="property.type === PropertyType.Image"
      :property="property"
      :disable="isDisabled"
    />
    <editor-form
      v-else-if="property.type === PropertyType.Editor"
      :property="property"
      :label="property.label"
    />
    <p-d-f-forms
      v-else-if="property.type === PropertyType.File"
      :property="property"
      :disable="isDisabled"
    />
    <video-forms
      v-else-if="property.type === PropertyType.Video"
      :property="property"
    />
    <audio-Form
      v-else-if="property.type === PropertyType.Audio"
      :property="property"
    />
    <textArea-Form
      v-else-if="property.type === PropertyType.TextArea"
      :property="property"
    />
    <link-form
      v-else-if="property.type === PropertyType.Link"
      :property="property"
      :label="property.label"
      :value="property.value"
      @changeValue="changeValue"
      :isDisabled="isDisabled"
    ></link-form>
    <json-form
        v-else-if="property.type === PropertyType.JSON"
        :property="property"
    />
    <image-url-form
        v-else-if="property.type === PropertyType.ImageUrl"
        :property="property"
    />
    <text-array-form
        v-else-if="property.type === PropertyType.TextArray"
        :property="property"
    />
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { Property } from "@/plugins/types2";
import { PropertyType } from "@/plugins/types";
import ImageForm from "@/components/editTemplate/form/ImageForm.vue";
import SelectForm from "@/components/editTemplate/form/SelectForm.vue";
import PDFForms from "@/components/editTemplate/form/PDFForms.vue";
import VideoForms from "@/components/editTemplate/form/VideoForm.vue";
import BaseForm from "@/components/editTemplate/form/BaseForm.vue";
import DateForm from "@/components/editTemplate/form/DateForm.vue";
import EditorForm from "@/components/editTemplate/form/EditorForm.vue";
import AudioForm from "@/components/editTemplate/form/AudioForm.vue";
import TextAreaForm from "@/components/editTemplate/form/TextAreaForm.vue";
import LinkForm from "@/components/editTemplate/form/LinkForm.vue";
import JsonForm from "@/components/editTemplate/form/JSONForm.vue";
import ImageUrlForm from "@/components/editTemplate/form/ImageUrlForm.vue";
import TextArrayForm from "@/components/editTemplate/form/TextArrayForm.vue";
@Component({
  components: {
    BaseForm,
    DateForm,
    SelectForm,
    ImageForm,
    EditorForm,
    PDFForms,
    VideoForms,
    AudioForm,
    TextAreaForm,
    LinkForm,
    JsonForm,
    ImageUrlForm,
    TextArrayForm
  },
})
export default class PropertyItem extends Vue {
  //  todo ui图未切分
  @Prop() property!: Property;
  @Prop() isDisabled!: boolean;
  public PropertyType = PropertyType;
  public created() {}
  public changeValue(newData: any, key: string) {
    this.$nextTick(() => {
      const property: any = this.property;
      property[key] = newData;
    });
  }
}
</script>

<style scoped>
</style>
