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

export default {
  label: i18n.global.t('video'),
  icon,
  component: Video,
  key: 'video',
  group: i18n.global.t('media'),
  sort: 1,
  defaultStyle,
  parts: [
    {
      name: 'main',
      stateList
    }
  ],
  defaultSchema: {
    name: 'label',
    props: {
      x: 0,
      y: 0,
      width: 300,
      height: 200,
      flags: [
        '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: [],
      source: {
        type: 'file', // file文件 signal信号
        file: {
          id: '',
          sd_path: '',
          autoplay: true,
          loop: false
        },
        signal: '通道1'
      }
    },
    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.states',
        valueType: 'checkbox',
        componentProps: {
          options: stateOptions,
          defaultCollapsed: true
        },
        canUseEventSet: true
      }
    ],
    coreProps: [
      {
        label: '视频源',
        field: 'props.source.type',
        labelWidth: '80px',
        valueType: 'select',
        componentProps: {
          options: [
            { label: '视频文件', value: 'file' },
            { label: '视频信号', value: 'signal' }
          ]
        }
      },
      {
        valueType: 'dependency',
        name: ['props.source.type'],
        dependency: (form) => {
          return form?.['props.source.type'] === 'file'
            ? [
                {
                  label: '视频文件',
                  field: 'props.source.file.id',
                  labelWidth: '80px',
                  valueType: 'file',
                  componentProps: {
                    extensionNames: ['mp4']
                  },
                  canUseEventSet: true
                },
                {
                  label: 'SD路径',
                  field: 'props.source.file.sd_path',
                  labelWidth: '80px',
                  valueType: 'text'
                },
                {
                  label: '自动播放',
                  field: 'props.source.file.autoplay',
                  labelWidth: '80px',
                  valueType: 'switch',
                  canUseEventSet: true
                },
                {
                  label: '循环播放',
                  field: 'props.source.file.loop',
                  labelWidth: '80px',
                  valueType: 'switch',
                  canUseEventSet: true
                }
              ]
            : [
                {
                  label: '视频信号',
                  field: 'props.source.signal',
                  labelWidth: '80px',
                  valueType: 'select',
                  componentProps: {
                    options: [
                      { label: '通道1', value: '通道1' },
                      { label: '通道2', value: '通道2' },
                      { label: '通道3', value: '通道3' },
                      { label: '通道4', value: '通道4' },
                      { label: '通道5', value: '通道5' },
                      { label: '通道6', value: '通道6' },
                      { label: '通道7', value: '通道7' },
                      { label: '通道8', value: '通道8' }
                    ]
                  }
                }
              ]
        }
      }
    ],
    // 组件样式
    styles: []
  }
} as IComponentModelConfig
