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

const { source } = dataJson;

export const option = {
  dataset: source,
  dataStyle: {
    backgroud: '#FFFFFF00',
    videoLoop: false,  // 视频-循环播放
    videoMuted: true, // 视频-静音
    videoFit: 'fill', // 视频-适应方式
    // videoWidth: 10,
    // videoHeight: 10,

    borderWidth: 2,
    borderColor: '#008000', 
    borderColorClone: '#008000', 
    padding: 4,

    serialNumberValue: '',
    selectPlacement: 'left',
    titleFontSize: 15,
    titleFontColor: '#ffffff',
    titleBackgroud: '#3d3d3d',
    modalTitleHeight: 30,
  }
}

export default class Config extends PublicConfigClass implements CreateComponentType {
  public key = ZhiGan_ModalVideoConfig.key
  public attr = { ...chartInitConfig, w: 320, h: 220, zIndex: -1 }
  public chartConfig = cloneDeep(ZhiGan_ModalVideoConfig)
  public option = cloneDeep(option)
  public request = { ...requestSqlConfig, requestSQLContent: { sql: 'SELECT "Id", "Name", "SerialNumber", "Manufacturer"\r\nFROM fm_camera\r\nWHERE ST_DWithin(\r\n    ST_GeographyFromText(\'POINT(\' || \r\n        (SELECT \"Lng\" FROM fm_fireclueinfo WHERE "Id" = #{Id}) || \' \' || \r\n        (SELECT \"Lat\" FROM fm_fireclueinfo WHERE "Id" = #{Id}) || \r\n    \')\'),\r\n    ST_GeographyFromText(\'POINT(\' || \"Lng\" || \' \' || \"Lat\" || \')\'),\r\n    1000\r\n) = true' }, }
  public filter = "return res.result;"
}
