text: 'use strict';
  
  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;
      },
    }
  });
  