import Container from './Container.vue'
import icon from '../assets/icon/icon_12container.svg'
import {
  flagOptions,
  flexDirection,
  flexAlign,
  stateOptions,
  stateList,
  DEFAULT_THEME_KEY
} from '@/constants'
import type { IComponentModelConfig } from '../type'
import i18n from '@/locales'
import defaultStyle from './style.json'

export default {
  label: i18n.global.t('container'),
  icon,
  component: Container,
  key: 'lv_obj',
  group: i18n.global.t('layout'),
  sort: 1,
  hasChildren: true,
  defaultStyle,
  parts: [
    {
      name: 'main',
      stateList
    }
  ],
  defaultSchema: {
    name: 'container',
    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',
      layout: 'default',
      flex: {
        direction: 'row',
        mainAxisAlign: 'start',
        crossAxisAlign: 'start',
        trackAxisAlign: 'start',
        rowGap: 0,
        columnGap: 0
      }
    },
    styles: [
      {
        part: {
          name: 'main',
          state: 'default'
        },
        theme: DEFAULT_THEME_KEY,
        background: {
          color: '#ffffffff',
          image: {
            imgId: '',
            recolor: '#ffffff00',
            alpha: 255
          }
        },
        border: {
          color: '#2092f5ff',
          width: 2,
          radius: 0,
          side: ['all']
        },
        outline: {
          color: '#000000ff',
          width: 0,
          pad: 0
        },
        padding: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0
        },
        shadow: {
          color: '#2092f5ff',
          offsetX: 0,
          offsetY: 0,
          spread: 0,
          width: 0
        }
      }
    ]
  },
  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.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.layout',
        valueType: 'select',
        componentProps: {
          options: [
            { label: '无', value: 'default' },
            { label: '弹性布局', value: 'flex' }
          ]
        }
      },
      {
        valueType: 'dependency',
        name: ['props.layout'],
        dependency: (dependency) => {
          return dependency?.['props.layout'] === 'flex'
            ? [
                {
                  label: '弹性布局',
                  valueType: 'group',
                  canUseEventSet: true,
                  children: [
                    {
                      label: '方向',
                      field: 'props.flex.direction',
                      valueType: 'select',
                      componentProps: {
                        options: flexDirection
                      }
                    },
                    {
                      label: '主轴',
                      field: 'props.flex.mainAxisAlign',
                      valueType: 'select',
                      componentProps: {
                        options: flexAlign
                      }
                    },
                    {
                      label: '交叉轴',
                      field: 'props.flex.crossAxisAlign',
                      valueType: 'select',
                      componentProps: {
                        options: flexAlign
                      }
                    },
                    {
                      label: '轨道轴',
                      field: 'props.flex.trackAxisAlign',
                      valueType: 'select',
                      componentProps: {
                        options: flexAlign
                      }
                    },
                    {
                      field: 'props.flex.rowGap',
                      valueType: 'number',
                      componentProps: {
                        span: 12,
                        min: 0,
                        max: 1000
                      },
                      slots: { prefix: 'R' }
                    },
                    {
                      field: 'props.flex.columnGap',
                      valueType: 'number',
                      componentProps: {
                        span: 12,
                        min: 0,
                        max: 1000
                      },
                      slots: { prefix: 'C' }
                    }
                  ]
                }
              ]
            : []
        }
      },
      {
        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.openRotate',
    //     valueType: 'switch'
    //   },
    //   {
    //     valueType: 'dependency',
    //     name: ['props.openRotate'],
    //     dependency: (dependency) => {
    //       return dependency?.['props.openRotate']
    //         ? [
    //             {
    //               label: '旋转中心',
    //               valueType: 'group',
    //               labelWidth: '80px',
    //               children: [
    //                 {
    //                   field: 'props.rotate.x',
    //                   valueType: 'number',
    //                   componentProps: {
    //                     span: 12,
    //                     min: -10000,
    //                     max: 10000
    //                   },
    //                   slots: { prefix: 'X' }
    //                 },
    //                 {
    //                   field: 'props.rotate.y',
    //                   valueType: 'number',
    //                   componentProps: {
    //                     span: 12,
    //                     min: -10000,
    //                     max: 10000
    //                   },
    //                   slots: { prefix: 'Y' }
    //                 },
    //                 {
    //                   field: 'props.rotate.angle',
    //                   valueType: 'number',
    //                   componentProps: {
    //                     span: 12,
    //                     min: -360,
    //                     max: 360
    //                   },
    //                   slots: { prefix: '角度' }
    //                 }
    //               ]
    //             }
    //           ]
    //         : []
    //     }
    //   }
    // ],
    // 组件样式
    styles: [
      {
        label: '模块状态',
        field: 'part',
        valueType: 'part'
      },
      {
        label: '背景',
        field: 'background',
        valueType: 'background'
      },
      {
        label: '边框',
        field: 'border',
        valueType: 'border'
      },
      {
        label: '轮廓',
        field: 'outline',
        valueType: 'outline'
      },
      {
        label: '内边距',
        field: 'padding',
        valueType: 'padding'
      },
      {
        label: '阴影',
        field: 'shadow',
        valueType: 'shadow'
      }
    ]
  }
} as IComponentModelConfig
