import { AssetType } from '@/constant'

export const positionConfig = {
  label: '坐标',
  list: [
    {
      key: 'left',
      type: 'number',
      label: '左边距',
      options: {
        max: 'width'
      }
    },
    {
      key: 'top',
      type: 'number',
      label: '上边距',
      options: {
        max: 'height'
      }
    },
    {
      key: 'width',
      type: 'number',
      label: '宽',
      options: {
        max: 'width'
      }
    },
    {
      key: 'height',
      type: 'number',
      label: '高',
      options: {
        max: 'height'
      }
    },
    {
      key: 'fit-left',
      type: 'fit',
      label: '水平适配',
      options: {
        strats: [
          {
            label: '靠左',
            callback (node) {
              Object.assign(node, {
                left: 0
              })
            }
          },
          {
            label: '靠右',
            callback (node, root) {
              Object.assign(node, {
                left: root.width - node.width
              })
            }
          }
        ]
      }
    },
    {
      key: 'fit-top',
      type: 'fit',
      label: '垂直适配',
      options: {
        strats: [
          {
            label: '靠上',
            callback (node) {
              Object.assign(node, {
                top: 0
              })
            }
          },
          {
            label: '靠下',
            callback (node, root) {
              Object.assign(node, {
                top: root.height - node.height
              })
            }
          }
        ]
      }
    },
    {
      key: 'fit-width',
      type: 'fit',
      label: '宽适配',
      options: {
        strats: [
          {
            label: '铺满',
            callback (node, root) {
              Object.assign(node, {
                left: 0,
                width: root.width
              })
            }
          },
          {
            label: '半屏',
            callback (node, root) {
              Object.assign(node, {
                width: root.width / 2 | 0
              })
            }
          },
          {
            label: '1/3屏',
            callback (node, root) {
              Object.assign(node, {
                width: root.width / 3 | 0
              })
            }
          },
          {
            label: '1/4屏',
            callback (node, root) {
              Object.assign(node, {
                width: root.width / 4 | 0
              })
            }
          }
        ]
      }
    },
    {
      key: 'fit-height',
      type: 'fit',
      label: '高适配',
      options: {
        strats: [
          {
            label: '铺满',
            callback (node, root) {
              Object.assign(node, {
                top: 0,
                height: root.height
              })
            }
          },
          {
            label: '半屏',
            callback (node, root) {
              Object.assign(node, {
                height: root.height / 2 | 0
              })
            }
          },
          {
            label: '1/3屏',
            callback (node, root) {
              Object.assign(node, {
                height: root.height / 3 | 0
              })
            }
          },
          {
            label: '1/4屏',
            callback (node, root) {
              Object.assign(node, {
                height: root.height / 4 | 0
              })
            }
          }
        ]
      }
    }
  ]
}

export const toggleTypeConfig = {
  props: {
    toggleType: 'cycle'
  },
  options: __STAGING__
    ? [
      {
        key: 'toggleType',
        label: '播放方式',
        type: 'select',
        options: {
          options: [
            { value: 'cycle', label: '循环' },
            { value: 'random', label: '随机' }
          ]
        }
      }
    ]
    : []
}

export const animationConfig = {
  props: {
    animation: 'none'
  },
  options: [
    {
      key: 'animation',
      label: '动画',
      type: 'select',
      options: {
        options: [
          { value: 'none', label: '无动画' },
          { value: 'slide', label: '幻灯片' },
          { value: 'fade', label: '渐隐渐现' },
          __STAGING__ ? { value: 'flip', label: '翻转' } : null,
          __STAGING__ ? { value: 'section-flip', label: '百叶窗' } : null
        ].filter(val => val)
      }
    }
  ]
}

export const intervalConfig = {
  props: {
    interval: 10,
    sameInterval: 1
  },
  options: [
    {
      key: 'interval',
      label: '图片时长(秒)',
      type: 'number',
      options: {
        callback () {
          if (this.sameInterval) {
            const duration = this.interval
            this.sources.forEach(source => {
              if (source.type === AssetType.IMAGE) {
                source.duration = duration
              }
            })
          }
        },
        min: 1,
        max: 9999999
      }
    },
    {
      key: 'sameInterval',
      label: '统一时长',
      type: 'boolean',
      options: {
        callback () {
          if (this.sameInterval) {
            const duration = this.interval
            this.sources.forEach(source => {
              if (source.type === AssetType.IMAGE) {
                source.duration = duration
              }
            })
          }
        },
        active: 1,
        inactive: 0
      }
    }
  ]
}
