import cloneDeep from 'lodash/cloneDeep'
import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { chartInitConfig } from '@/settings/designSetting'
import { ModalTimeLineConfig } from './index'
import dataJson from './data.json'

const { source } = dataJson;

export const option = {
  dataset: source,
  dataStyle: {
    // 时间线设置
    background: '#0C2411',
    bordercolor: '#0C2411',
    size: 'medium',
    iconsize: 16,
    margintop: 0,
    marginleft: 0,
    // 最新内容设置
    titleColorFirst: '#D27100',
    titleFontSizeFirst: 16,
    timeColorFirst: '#FFFFFF',
    timeFontSizeFirst: 16,
    contentColorFirst: '#D27100',
    contentFontSizeFirst: 16,
    // 文本内容设置
    titleColor: '#06936A',
    titleFontSize: 16,
    timeColor: '#FFFFFF',
    timeFontSize: 16,
    contentColor: '#06936A',
    contentFontSize: 16,
    // 图片-适应方式
    imagefit: 'contain',
    imageborderRadius: 10,
    imagewidth: 150,
    imageheight: 150,
    imageMarginTop: 10,
    imagealign: 'left',
    // 视频-循环播放
    videoloop: true,
    // 视频-静音
    videomuted: true,
    // 视频-适应方式
    videofit: 'contain',
    videowidth: 200,
    videoheight: 150,
    videoMarginTop: 10,
    videoalign: 'left',
  }
}

export default class Config extends PublicConfigClass implements CreateComponentType {
  public key = ModalTimeLineConfig.key
  public attr = { ...chartInitConfig, w: 250, h: 450, zIndex: 5 }
  public chartConfig = cloneDeep(ModalTimeLineConfig)
  public option = cloneDeep(option)
}
