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

export default {
  label: i18n.global.t('arc'),
  icon,
  component: Arc,
  key: 'lv_arc',
  group: i18n.global.t('display'),
  sort: 1,
  defaultStyle,
  parts: [
    {
      name: 'main',
      stateList
    },
    {
      name: 'indicator',
      stateList
    },
    {
      name: 'knob',
      stateList
    }
  ],
  defaultSchema: {
    name: 'arc',
    props: {
      x: 0,
      y: 0,
      width: 120,
      height: 120,
      flags: [
        'LV_OBJ_FLAG_CLICKABLE',
        'LV_OBJ_FLAG_CLICK_FOCUSABLE',
        'LV_OBJ_FLAG_SCROLL_ELASTIC',
        'LV_OBJ_FLAG_SCROLL_MOMENTUM',
        'LV_OBJ_FLAG_SCROLL_WITH_ARROW',
        'LV_OBJ_FLAG_SNAPPABLE',
        'LV_OBJ_FLAG_PRESS_LOCK',
        'LV_OBJ_FLAG_GESTURE_BUBBLE'
      ],
      states: [],
      mode: 'normal',
      rangeStart: 0,
      rangeEnd: 100,
      angleStart: 135,
      angleEnd: 45,
      value: 70,
      rotate: 0,
      // 旋转偏移开关
      rotateOffset: false,
      rotateOffsetValue: 60,
      // 变化率
      changeRate: 720
    },
    styles: [
      {
        part: {
          name: 'main',
          state: 'default'
        },
        theme: DEFAULT_THEME_KEY,
        background: {
          color: '#ffffff00',
          image: {
            imgId: '',
            recolor: '#ffffff00',
            alpha: 255
          }
        },
        border: {
          color: '#2092f5ff',
          width: 0,
          radius: 6,
          side: ['all']
        },
        padding: {
          top: 20,
          right: 20,
          bottom: 20,
          left: 20
        },
        curve: {
          color: '#e0e0e0ff',
          width: 12,
          radius: true,
          alpha: 255,
          image: ''
        },
        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
        }
      }
    ]
  },
  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.states',
        valueType: 'checkbox',
        componentProps: {
          options: stateOptions,
          defaultCollapsed: true
        },
        canUseEventSet: true
      }
    ],
    coreProps: [
      {
        label: '模式',
        field: 'props.mode',
        valueType: 'select',
        labelWidth: '80px',
        componentProps: {
          options: [
            { label: 'normal', value: 'normal' },
            { label: 'symmetrical', value: 'symmetrical' },
            { label: 'reverse', value: 'reverse' }
          ]
        },
        canUseEventSet: true
      },
      {
        label: '范围',
        valueType: 'group',
        canUseEventSet: true,
        children: [
          {
            field: 'props.rangeStart',
            valueType: 'number',
            componentProps: {
              span: 12,
              min: -100000,
              max: 100000,
              onValueChange: (value: number, formData) => {
                if (value >= formData.props.rangeEnd) {
                  formData.props.rangeStart = formData.props.rangeEnd - 1
                }
              }
            },
            slots: {
              prefix: 'S'
            }
          },
          {
            field: 'props.rangeEnd',
            valueType: 'number',
            componentProps: {
              span: 12,
              min: -100000,
              max: 100000,
              onValueChange: (value: number, formData) => {
                if (value <= formData.props.rangeStart) {
                  formData.props.rangeEnd = formData.props.rangeStart + 1
                }
              }
            },
            slots: {
              prefix: 'E'
            }
          }
        ]
      },
      {
        label: '值',
        field: 'props.value',
        labelWidth: '80px',
        valueType: 'number',
        canUseEventSet: true
      },
      {
        label: '角度',
        valueType: 'group',
        canUseEventSet: true,
        children: [
          {
            field: 'props.angleStart',
            valueType: 'number',
            componentProps: {
              span: 12,
              min: 0,
              max: 360
            },
            slots: {
              prefix: 'S'
            }
          },
          {
            field: 'props.angleEnd',
            valueType: 'number',
            componentProps: {
              span: 12,
              min: 0,
              max: 360
            },
            slots: {
              prefix: 'E'
            }
          }
        ]
      },
      {
        label: '旋转',
        field: 'props.rotate',
        labelWidth: '80px',
        valueType: 'number',
        canUseEventSet: true
      },
      {
        label: '旋转偏移',
        field: 'props.rotateOffset',
        labelWidth: '80px',
        valueType: 'switch',
        canUseEventSet: true
      },
      {
        valueType: 'dependency',
        name: ['props.rotateOffset'],
        dependency: (dependency) => {
          return dependency?.['props.rotateOffset']
            ? [
                {
                  label: '旋转偏移值',
                  field: 'props.rotateOffsetValue',
                  labelWidth: '80px',
                  valueType: 'number',
                  componentProps: {
                    min: -360,
                    max: 360
                  },
                  canUseEventSet: true
                }
              ]
            : []
        }
      },
      {
        label: '变化率',
        field: 'props.changeRate',
        valueType: 'number',
        labelWidth: '80px',
        componentProps: {
          min: 1,
          max: 10000
        },
        canUseEventSet: true
      }
    ],
    // 组件样式
    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: 'padding',
                  valueType: 'padding'
                },
                {
                  label: '曲线',
                  field: 'curve',
                  valueType: 'line',
                  componentProps: {
                    hasImage: true
                  }
                },
                {
                  label: '阴影',
                  field: 'shadow',
                  valueType: 'shadow'
                },
                {
                  label: '变换',
                  field: 'transform',
                  valueType: 'transform'
                }
              ]
            : part?.name === 'indicator'
              ? [
                  {
                    label: '曲线',
                    field: 'curve',
                    valueType: 'line',
                    componentProps: {
                      hasImage: true
                    }
                  }
                ]
              : [
                  {
                    label: '背景',
                    field: 'background',
                    valueType: 'background'
                  },
                  {
                    label: '内边距',
                    field: 'padding',
                    valueType: 'padding',
                    componentProps: {
                      allInOne: true
                    }
                  }
                ]
        }
      }
    ]
  }
} as IComponentModelConfig
