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',
    lineColor: '#103A26',
    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',
  },
  dataStyleClone: {
    borderColor: '#0C2411',
    bordercolor: '#0C2411',
    lineColor: '#103A26',
  }
}

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)
}
