import Canvas from './Canvas.vue'
import icon from '../assets/icon/icon_25canvas.svg'
import { flagOptions, stateOptions } from '@/constants'
import type { IComponentModelConfig } from '../type'
import i18n from '@/locales'
import Config from './Config.vue'

export default {
  label: i18n.global.t('canvas'),
  icon,
  component: Canvas,
  key: 'lv_canvas',
  group: i18n.global.t('display'),
  sort: 1,
  hasChildren: false,
  parts: [],
  defaultSchema: {
    name: 'canvas',
    props: {
      x: 0,
      y: 0,
      width: 300,
      height: 200,
      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'
      ],
      states: [],
      scrollbar: 'off',
      background_color: '#f5f5f5ff',
      elements: [
        {
          type: 'rect',
          props: {
            x: 100,
            y: 75,
            width: 100,
            height: 50,
            background_color: '#2196f3ff',
            border: {
              color: '#000000ff',
              width: 0,
              radius: 0
            }
          }
        }
      ]
    },
    styles: []
  },
  config: {
    // 组件属性
    props: [
      {
        label: '名称',
        field: 'name',
        valueType: 'text',
        componentProps: {
          placeholder: '请输入名称',
          type: 'text'
        }
      },
      {
        label: '位置/大小',
        valueType: 'group',
        children: [
          {
            label: '',
            field: 'props.x',
            valueType: 'number',
            componentProps: {
              span: 12,
              min: -10000,
              max: 10000
            },
            slots: { prefix: 'X' },
            canUseEventSet: true
          },
          {
            label: '',
            field: 'props.y',
            valueType: 'number',
            componentProps: {
              span: 12,
              min: -10000,
              max: 10000
            },
            slots: { prefix: 'Y' },
            canUseEventSet: true
          },
          {
            label: '',
            field: 'props.width',
            valueType: 'number',
            componentProps: {
              span: 12,
              min: 1,
              max: 10000
            },
            slots: { prefix: 'W' },
            canUseEventSet: true
          },
          {
            label: '',
            field: 'props.height',
            valueType: 'number',
            componentProps: {
              span: 12,
              min: 1,
              max: 10000
            },
            slots: { prefix: 'H' },
            canUseEventSet: true
          }
        ]
      },
      {
        label: '标识',
        field: 'props.flags',
        valueType: 'checkbox',
        componentProps: {
          options: flagOptions,
          defaultCollapsed: true
        },
        canUseEventSet: true
      },
      {
        label: '滚动条',
        field: 'props.scrollbar',
        valueType: 'select',
        componentProps: {
          options: [
            { label: 'On', value: 'on' },
            { label: 'Off', value: 'off' },
            { label: 'Auto', value: 'auto' },
            { label: 'Active', value: 'active' }
          ]
        },
        canUseEventSet: true
      },
      {
        label: '状态',
        field: 'props.states',
        valueType: 'checkbox',
        componentProps: {
          options: stateOptions,
          defaultCollapsed: true
        },
        canUseEventSet: true
      }
    ],
    coreProps: [
      {
        label: '背景色',
        field: 'props.background_color',
        valueType: 'color',
        componentProps: {
          format: 'hex8',
          pickerType: 'chrome',
          useType: 'pure'
        },
        canUseEventSet: true
      },
      {
        label: '背景透明度',
        field: 'props.background_alpha',
        valueType: 'number',
        default: 255,
        componentProps: {
          min: 0,
          max: 255
        },
        hideInForm: true,
        canUseEventSet: true
      },
      {
        label: '元素',
        field: 'props.elements',
        valueType: '',
        render: (val) => {
          return <Config values={val} />
        }
      }
    ],
    // 组件样式
    styles: []
  }
} as IComponentModelConfig
