import Page from './Page.vue'
import type { IComponentModelConfig } from '../type'
import i18n from '@/locales'
import { scrollbarModes, DEFAULT_THEME_KEY } from '@/constants'
import { flagOptions } from '@/constants'
import defaultStyle from './style.json'

export default {
  label: i18n.global.t('page'),
  component: Page,
  key: 'page',
  group: i18n.global.t('layout'),
  hideLibary: true,
  hasChildren: true,
  defaultStyle,
  parts: [
    {
      name: 'main',
      stateList: ['default']
    }
  ],
  defaultSchema: {
    name: 'page',
    props: {
      scrollbarMode: 'off',
      flags: [
        'LV_OBJ_FLAG_CLICKABLE',
        'LV_OBJ_FLAG_CLICK_FOCUSABLE',
        'LV_OBJ_FLAG_SCROLLABLE',
        'LV_OBJ_FLAG_SCROLL_ELASTIC',
        'LV_OBJ_FLAG_SCROLL_MOMENTUM',
        'LV_OBJ_FLAG_SCROLL_CHAIN_HOR',
        'LV_OBJ_FLAG_SCROLL_CHAIN_VER',
        'LV_OBJ_FLAG_SCROLL_CHAIN',
        'LV_OBJ_FLAG_SCROLL_WITH_ARROW',
        'LV_OBJ_FLAG_SNAPPABLE',
        'LV_OBJ_FLAG_PRESS_LOCK',
        'LV_OBJ_FLAG_GESTURE_BUBBLE'
      ],
      head_code: '',
      feature_code: ''
    },
    styles: [
      {
        part: {
          name: 'main',
          state: 'default'
        },
        theme: DEFAULT_THEME_KEY,
        background: {
          color: '#ffffffff',
          image: {
            imgId: '',
            recolor: '',
            alpha: 255
          }
        }
      }
    ]
  },
  config: {
    // 组件属性
    props: [
      {
        label: '名称',
        field: 'name',
        valueType: 'text',
        componentProps: {
          placeholder: '请输入名称',
          type: 'text'
        }
      },
      {
        label: '滚动条',
        field: 'props.scrollbarMode',
        valueType: 'select',
        componentProps: {
          options: scrollbarModes
        }
      },
      {
        label: '标识',
        field: 'props.flags',
        valueType: 'checkbox',
        componentProps: {
          options: flagOptions,
          defaultCollapsed: true
        }
      }
    ],
    coreProps: [
      {
        label: '#include和变量代码',
        field: 'props.head_code',
        labelPosition: 'top',
        valueType: 'code',
        componentProps: {
          language: 'c'
          // allowFullscreen: false
        }
      },
      {
        label: '功能实现代码',
        field: 'props.feature_code',
        labelPosition: 'top',
        valueType: 'code',
        componentProps: {
          language: 'c'
          // allowFullscreen: false
        }
      }
    ],
    // 组件样式
    styles: [
      {
        label: '背景',
        field: 'background',
        valueType: 'background',
        componentProps: {
          useType: 'both'
        }
      }
    ]
  }
} as IComponentModelConfig
