Vue.component('cc-studio-component', {
    template: `
    <ui-prop v-prop="target.type"></ui-prop>

    <div v-show="_isCheckbox()">
      <ui-prop v-prop="target.checkNormalBackFrame"></ui-prop>
      <ui-prop v-prop="target.checkPressedBackFrame"></ui-prop>
      <ui-prop v-prop="target.checkDisableBackFrame"></ui-prop>
      <ui-prop v-prop="target.checkNormalFrame"></ui-prop>
      <ui-prop v-prop="target.checkDisableFrame"></ui-prop>
      <ui-prop v-prop="target.checkInteractable"></ui-prop>
      <ui-prop v-prop="target.isChecked"></ui-prop>
    </div>

    <div v-show="_isTextAtlas()">
      <ui-prop v-prop="target.atlasFrame"></ui-prop>
      <ui-prop v-prop="target.firstChar"></ui-prop>
      <ui-prop v-prop="target.charWidth"></ui-prop>
      <ui-prop v-prop="target.charHeight"></ui-prop>
      <ui-prop v-prop="target.string"></ui-prop>
    </div>

    <div v-show="_isSliderBar()">
      <ui-prop v-prop="target.sliderBackFrame"></ui-prop>
      <ui-prop v-prop="target.sliderBarFrame"></ui-prop>
      <ui-prop v-prop="target.sliderBtnNormalFrame"></ui-prop>
      <ui-prop v-prop="target.sliderBtnPressedFrame"></ui-prop>
      <ui-prop v-prop="target.sliderBtnDisabledFrame"></ui-prop>
      <ui-prop v-prop="target.sliderInteractable"></ui-prop>
      <ui-prop v-prop="target.sliderProgress"></ui-prop>
    </div>

    <div v-show="_isListView()">
      <ui-prop v-prop="target.listInertia"></ui-prop>
      <ui-prop v-prop="target.listDirection"></ui-prop>
      <ui-prop v-prop="target.listVerticalAlign" v-show="_isHList()"></ui-prop>
      <ui-prop v-prop="target.listHorizontalAlign" v-show="_isVList()"></ui-prop>
      <ui-prop v-prop="target.listPadding"></ui-prop>
    </div>
  `,

    props: {
        target: {
            twoWay: true,
            type: Object,
        },
    },

    methods: {
        _isCheckbox() {
            let type = this.target.type.value;
            return type === cc.StudioComponent.ComponentType.CHECKBOX;
        },

        _isTextAtlas() {
            let type = this.target.type.value;
            return type === cc.StudioComponent.ComponentType.TEXT_ATLAS;
        },

        _isSliderBar() {
            let type = this.target.type.value;
            return type === cc.StudioComponent.ComponentType.SLIDER_BAR;
        },

        _isListView() {
            let type = this.target.type.value;
            return type === cc.StudioComponent.ComponentType.LIST_VIEW;
        },

        _isHList() {
            let dir = this.target.listDirection.value;
            return dir === cc.StudioComponent.ListDirection.HORIZONTAL;
        },

        _isVList() {
            let dir = this.target.listDirection.value;
            return dir === cc.StudioComponent.ListDirection.VERTICAL;
        },
    }
});