import Menu from './Menu.vue'
import icon from '../assets/icon/icon_19menu.svg'
import { flagOptions, stateOptions, stateList, DEFAULT_THEME_KEY } from '@/constants'
import type { IComponentModelConfig } from '../type'
import i18n from '@/locales'
import defaultStyle from './style.json'
import Config from './Config.vue'
import { CSSProperties } from 'vue'

export default {
  label: i18n.global.t('menu'),
  icon,
  component: Menu,
  key: 'lv_menu',
  group: i18n.global.t('layout'),
  sort: 1,
  hasChildren: true,
  defaultStyle,
  parts: [
    {
      name: 'main',
      stateList
    },
    {
      name: 'sidebar',
      stateList
    },
    {
      name: 'section',
      stateList
    },
    {
      name: 'sectionTitle',
      stateList
    },
    {
      name: 'items',
      stateList
    },
    {
      name: 'menuTitle',
      stateList
    }
  ],
  defaultSchema: {
    name: 'menu',
    children: [
      {
        type: 'menu-section',
        name: 'section_1',
        children: [
          {
            titleIcon: {
              type: 'symbol',
              img_id: '',
              img_width: 20,
              img_height: 20,
              img_alpha: 255,
              img_recolor: '#ffffff00',
              img_symbol: 'LV_SYMBOL_SETTINGS'
            },
            name: 'item_1',
            type: 'menu',
            children: []
          },
          {
            titleIcon: {
              type: 'symbol',
              img_id: '',
              img_width: 20,
              img_height: 20,
              img_alpha: 255,
              img_recolor: '#ffffff00',
              img_symbol: 'LV_SYMBOL_AUDIO'
            },
            name: 'item_2',
            type: 'menu',
            children: []
          },
          {
            titleIcon: {
              type: 'symbol',
              img_id: '',
              img_width: 20,
              img_height: 20,
              img_alpha: 255,
              img_recolor: '#ffffff00',
              img_symbol: 'LV_SYMBOL_HOME'
            },
            name: 'item_3',
            type: 'menu',
            children: []
          }
        ]
      }
    ],
    props: {
      x: 0,
      y: 0,
      width: 400,
      height: 300,
      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',
      title: 'menu',
      titleMode: 'LV_MENU_HEADER_TOP_UNFIXED',
      // 折叠展开
      sider: false,
      // 子标题开关
      openSection: true,
      // 当前激活index
      activeIndex: '[0].children.[0]',
      // 是否进入页面
      inPage: false,
      // 标题开关
      openTitle: true
    },
    styles: [
      {
        part: {
          name: 'main',
          state: 'default'
        },
        theme: DEFAULT_THEME_KEY,
        background: {
          color: '#ffffffff',
          image: {
            imgId: '',
            alpha: 255,
            recolor: '#ffffff00'
          }
        },
        border: {
          color: '#000000ff',
          width: 0,
          radius: 0,
          side: ['all']
        },
        outline: {
          color: '#000000ff',
          width: 0,
          pad: 0
        },
        shadow: {
          color: '#2092f5ff',
          offsetX: 0,
          offsetY: 0,
          spread: 0,
          width: 0
        },
        transform: {
          width: 0,
          height: 0,
          translateX: 0,
          translateY: 0,
          originX: 0,
          originY: 0,
          rotate: 0,
          scale: 256
        }
      },
      {
        part: {
          name: 'items',
          state: 'default'
        },
        theme: DEFAULT_THEME_KEY,
        background: {
          color: '#ffffffff',
          image: {
            imgId: '',
            alpha: 255,
            recolor: '#ffffff00'
          }
        },
        text: {
          color: '#000000ff',
          size: 12,
          family: 'montserratMedium',
          align: 'left',
          decoration: 'none'
        },
        spacer: {
          letterSpacing: 0
        }
      },
      {
        part: {
          name: 'items',
          state: 'checked'
        },
        theme: DEFAULT_THEME_KEY,
        background: {
          color: '#d1e9fbff',
          image: {
            imgId: '',
            alpha: 255,
            recolor: '#ffffff00'
          }
        },
        text: {
          color: '#2196f3ff',
          size: 12,
          family: 'montserratMedium',
          align: 'left',
          decoration: 'none'
        },
        spacer: {
          letterSpacing: 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.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.openTitle',
        valueType: 'switch',
        labelWidth: '80px'
      },
      {
        label: '侧边栏',
        field: 'props.sider',
        labelWidth: '80px',
        valueType: 'switch',
        componentProps: {
          onValueChange: (_value, formData) => {
            formData.props.titleMode = 'LV_MENU_HEADER_TOP_UNFIXED'
          }
        }
      },
      {
        label: '子标题',
        field: 'props.openSection',
        labelWidth: '80px',
        valueType: 'switch'
      },
      {
        valueType: 'dependency',
        name: ['props.openTitle', 'props.sider'],
        dependency: (dependency) => {
          const options = [
            { label: 'Top Unfixed', value: 'LV_MENU_HEADER_TOP_UNFIXED' },
            { label: 'Bottom Fixed', value: 'LV_MENU_HEADER_BOTTOM_FIXED' }
          ]
          if (!dependency?.['props.sider']) {
            options.push({ label: 'Top Fixed', value: 'LV_MENU_HEADER_TOP_FIXED' })
          }
          return dependency?.['props.openTitle']
            ? [
                {
                  label: '标题',
                  field: 'props.title',
                  valueType: 'text',
                  labelWidth: '80px',
                  componentProps: {
                    supportLangues: true,
                    type: 'text'
                  }
                },
                {
                  label: '模式',
                  field: 'props.titleMode',
                  valueType: 'select',
                  labelWidth: '80px',
                  componentProps: {
                    options
                  }
                }
              ]
            : []
        }
      },
      {
        label: '属性',
        field: '',
        render: (val) => {
          return <Config values={val} />
        }
      }
    ],
    // 组件样式
    styles: [
      {
        label: '模块状态',
        field: 'part',
        valueType: 'part'
      },
      {
        valueType: 'dependency',
        name: ['part'],
        dependency: ({ part }) => {
          return part?.name === 'main'
            ? [
                {
                  label: '背景',
                  field: 'background',
                  valueType: 'background'
                },
                {
                  label: '边框',
                  field: 'border',
                  valueType: 'border'
                },
                {
                  label: '轮廓',
                  field: 'outline',
                  valueType: 'outline'
                },
                {
                  label: '阴影',
                  field: 'shadow',
                  valueType: 'shadow'
                },
                {
                  label: '变换',
                  field: 'transform',
                  valueType: 'transform'
                }
              ]
            : part?.name === 'sidebar'
              ? [
                  {
                    label: '背景',
                    field: 'background',
                    valueType: 'background'
                  },
                  {
                    label: '边框',
                    field: 'border',
                    valueType: 'border'
                  },
                  {
                    label: '内边距',
                    field: 'padding',
                    valueType: 'padding'
                  },
                  {
                    label: '外边距',
                    field: 'margin',
                    valueType: 'margin'
                  }
                ]
              : part?.name === 'section'
                ? [
                    {
                      label: '边框',
                      field: 'border',
                      valueType: 'border'
                    }
                  ]
                : part?.name === 'sectionTitle'
                  ? [
                      {
                        label: '字体',
                        field: 'text',
                        valueType: 'font'
                      },
                      {
                        label: '间距',
                        field: 'spacer',
                        valueType: 'spacer',
                        componentProps: {
                          hideLineHeight: true
                        }
                      }
                    ]
                  : part?.name === 'items'
                    ? [
                        {
                          label: '背景',
                          field: 'background',
                          valueType: 'background'
                        },
                        {
                          label: '字体',
                          field: 'text',
                          valueType: 'font'
                        },
                        {
                          label: '间距',
                          field: 'spacer',
                          valueType: 'spacer',
                          componentProps: {
                            hideLineHeight: true
                          }
                        }
                      ]
                    : [
                        {
                          label: '背景',
                          field: 'background',
                          valueType: 'background'
                        },
                        {
                          label: '字体',
                          field: 'text',
                          valueType: 'font'
                        },
                        {
                          label: '边框',
                          field: 'border',
                          valueType: 'border'
                        },
                        {
                          label: '内边距',
                          field: 'padding',
                          valueType: 'padding'
                        }
                      ]
        }
      }
    ]
  },
  getChildStyle: (schema) => {
    const { width, height, sider, titleMode, inPage } = schema.props

    const el = document.querySelector('[widget-id="' + schema.id + '"]')
    const headerH = el?.querySelector('.menu-header')?.clientHeight || 0
    const sidebarW = el?.querySelector('.menu-sidebar')?.clientWidth || 0

    let style: CSSProperties = {}

    if (titleMode === 'LV_MENU_HEADER_TOP_FIXED') {
      style = {
        top: headerH + 'px',
        height: height - headerH + 'px'
      }
    }
    if (sider) {
      style = {
        top: 0,
        left: sidebarW + 'px',
        width: width - sidebarW + 'px'
      }
    }

    return {
      display: !sider && !inPage ? 'none' : '',
      ...style
    }
  }
} as IComponentModelConfig
