import cloneDeep from 'lodash/cloneDeep'
import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
import { ZhiGan_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,
    timelineMarginLeft: 10,
    // 最新内容设置
    titleColorFirst: '#D27100',
    titleFontSizeFirst: 16,
    timeColorFirst: '#FFFFFF',
    timeFontSizeFirst: 16,
    contentColorFirst: '#D27100',
    contentFontSizeFirst: 16,
    // 文本内容设置
    titleColor: '#06936A',
    titleFontSize: 16,
    timeColor: '#FFFFFF',
    timeFontSize: 16,
    contentColor: '#06936A',
    contentFontSize: 16,
    showTitle: true,
    showTime: true,
    showContent: true,
    showLine: true,
    showImage: true,
    showVideo: true,
    // 图片-适应方式
    imageFit: 'contain',
    imageWidth: 200,
    imageHeight: 150,
    imageMarginTop: 10,
    imageAlign: 'left',
    imageBorderWidth: 2,
    imageBorderColor: '#008000', 
    imagePadding: 4,
    // 是否禁用单击图像预览
    previewDisabled: false,
    // 视频-循环播放
    videoLoop: false,
    // 视频-静音
    videoMuted: true,
    // 视频-适应方式
    videoFit: 'contain',
    videoWidth: 200,
    videoHeight: 150,
    videoMarginTop: 10,
    videoAlign: 'left',
    videoBorderWidth: 2,
    videoBorderColor: '#008000', 
    videoPadding: 4,
    videoTitleFontSize: 12,
    videoTitleFontColor: '#ffffff',
  },
}

export default class Config extends PublicConfigClass implements CreateComponentType {
  public key = ZhiGan_ModalTimeLineConfig.key
  public attr = { ...chartInitConfig, w: 350, h: 540, zIndex: 5 }
  public chartConfig = cloneDeep(ZhiGan_ModalTimeLineConfig)
  public option = cloneDeep(option)
  public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select "Title" AS "title","Content" ,"CreateTime" AS "time" from fm_fireclueinfolog where "Fireclueid" = #{Id}' }, }
  public filter = "return res.result;"
}
