import QRCode from './QRCode.vue'
import icon from '../assets/icon/icon_40crcode.svg'
import type { IComponentModelConfig } from '../type'
import i18n from '@/locales'
import { stateList, flagOptions, stateOptions } from '@/constants'
import defaultStyle from './style.json'

export default {
  label: i18n.global.t('qrcode'),
  icon,
  component: QRCode,
  key: 'qrcode',
  group: i18n.global.t('advance'),
  sort: 2,
  hasChildren: false,
  defaultStyle,
  parts: [
    {
      name: 'main',
      stateList
    }
  ],
  defaultSchema: {
    name: 'qrcode',
    props: {
      x: 0,
      y: 0,
      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: [],
      text: 'https://www.sv-elec.com',
      lightColor: '#ffffffff',
      darkColor: '#000000ff',
      size: 100
    },
    styles: []
  },
  config: {
    props: [
      {
        label: '名称',
        field: 'name',
        valueType: '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.flags',
        valueType: 'checkbox',
        componentProps: {
          options: flagOptions,
          defaultCollapsed: true
        },
        canUseEventSet: true
      },
      {
        label: '状态',
        field: 'props.states',
        valueType: 'checkbox',
        componentProps: {
          options: stateOptions,
          defaultCollapsed: true
        },
        canUseEventSet: true
      }
    ],
    coreProps: [
      {
        label: '暗色',
        field: 'props.darkColor',
        valueType: 'color',
        canUseEventSet: true
      },
      {
        label: '亮色',
        field: 'props.lightColor',
        valueType: 'color',
        canUseEventSet: true
      },
      {
        label: '大小',
        field: 'props.size',
        valueType: 'number',
        componentProps: {
          min: 0,
          max: 1000
        },
        canUseEventSet: true
      },
      {
        label: '文本',
        field: 'props.text',
        valueType: 'textarea',
        canUseEventSet: true
      }
    ],
    styles: []
  }
} as IComponentModelConfig
