import {PointLayer, RasterLayer, LineLayer, HeatmapLayer, PolygonLayer} from '@antv/l7'

export function addLightLayer1(scene, msg) {
  const pointLayer = new PointLayer({layerType: 'fillImage', zIndex: 9})
    .source(msg, {
      parser: {
        type: 'json', x: 'longitude', y: 'latitude',
      },
    })
    .shape('ts', (val) => {
      return `light${val}`
    })
    // .style({
    //   blur: 1,
    // })
    .rotate('roadDir', (val) => {
      return (Math.PI / 180) * (360 - val * 90)
    })
    .style({
      rotation: 85, unit: 'meter',
    })
    .size(4)
  scene.addLayer(pointLayer)
  return pointLayer
}

export function addLightTextLayer1(scene, msg) {
  const pointLayer = new PointLayer({layerType: 'fillText', zIndex: 9})
    .source(msg, {
      parser: {
        type: 'json', x: 'longitude', y: 'latitude',
      },
    })
    .rotate('roadDir', (val) => {
      return (Math.PI / 180) * (val * 90)
    })
    .shape('remainTime', 'text')
    .style({
      fontWeight: 600,
      blur: 1, rotation: 85, textAllowOverlap: true, textOffset: [0, -5],
    })
    .size(14)
    .color('state', (val) => {
      if (val == 0) {
        return '#060305'
      }
      if (val == 1) {
        return '#c01504'
      }
      if (val == 2) {
        return '#ffd253'
      }
      if (val == 3) {
        return '#16d46b'
      }
    })
  scene.addLayer(pointLayer)
  return pointLayer
}

export function addLightLayer(scene, msg) {
  const pointLayer = new PointLayer({layerType: 'fillImage', zIndex: 9})
    .source(msg, {
      parser: {
        type: 'json', x: 'longitude', y: 'latitude',
      },
    })
    .shape('ts', (val) => {
      return `light${val}`
    })
    // .style({
    //   blur: 1,
    // })
    .rotate('roadDir', (val) => {
      return (Math.PI / 180) * (360 - val * 90)
    })
    .style({
      rotation: 95, unit: 'meter',
    })
    .size(4)
  scene.addLayer(pointLayer)
  return pointLayer
}

export function addLightTextLayer(scene, msg) {
  const pointLayer = new PointLayer({layerType: 'fillText', zIndex: 9})
    .source(msg, {
      parser: {
        type: 'json', x: 'longitude', y: 'latitude',
      },
    })
    .rotate('roadDir', (val) => {
      return (Math.PI / 180) * (val * 90)
    })
    .shape('remainTime', 'text')
    .style({
      fontWeight: 600,
      blur: 1, rotation: 95, textAllowOverlap: true, textOffset: [0, -5],
    })
    .size(14)
    .color('state', (val) => {
      if (val == 0) {
        return '#060305'
      }
      if (val == 1) {
        return '#c01504'
      }
      if (val == 2) {
        return '#ffd253'
      }
      if (val == 3) {
        return '#16d46b'
      }
    })
  scene.addLayer(pointLayer)
  return pointLayer
}

export function addSlowTrackLineLayer(scene, msg, callback) {
  const line = new LineLayer({zIndex: 1})
    .source(msg)
    .shape('line')
    .size(1)
    .color('#c01504')
  // .style({
  //   lineType: 'dash', dashArray: [2, 2]
  // })
  // line.on('click')
  line.on('click', (e) => {
    callback(e)
  })
  scene.addLayer(line)
  return line
}

export function addAcciTrackLineLayer(scene, msg) {
  const line = new LineLayer({zIndex: 1})
    .source(msg)
    .shape('line')
    .size(1.5)
    .color('#c01504')
    .style({
      lineType: 'dash', dashArray: [2, 2]
    })
  scene.addLayer(line)
  return line
}

export function addAcciTrackLineLayer1(scene, msg) {
  const line = new LineLayer({zIndex: 1})
    .source(msg)
    .shape('line')
    .size(1.5)
    .color('#ffc800')
    .style({
      lineType: 'dash', dashArray: [2, 2]
    })
  scene.addLayer(line)
  return line
}

export function addTrackLineLayer(scene, msg) {
  const line = new LineLayer({zIndex: 1})
    .source(msg)
    .shape('line')
    .size(1.5)
    .color('#ffc800')
    .style({
      lineType: 'dash', dashArray: [2, 2]
    })
  scene.addLayer(line)
  return line
}

export function addConflictPoint(scene, msg) {
  const pointLayer = new PointLayer()
    .source(msg, {
      parser: {
        type: 'json', x: 'longitude', y: 'latitude',
      },
    })
    .shape('circle')
    .style({
      blur: 1,
    })
    .size(30)
    .color('#efba0a')
  scene.addLayer(pointLayer)
  return pointLayer
}

// home - 斑马线polygon图层
export function addPasserbyPolygon(scene, msg) {
  const polygonLayer = new PolygonLayer({zIndex: 0})
    .source(msg)
    .shape('fill')
    .color('type', (val) => {
      if (val === 1) {
        return '#009c3e'
      }
      if (val === 2) {
        return '#ba7900'
      }
      if (val === 3) {
        return '#ba3500'
      }
    })
    .style({
      opacity: 0.6
    })
  scene.addLayer(polygonLayer)
  return polygonLayer
}

export function addPasserbyPolygonEdge(scene, msg) {
  const polygonLayer = new LineLayer({zIndex: 0})
    .source(msg)
    .shape('line')
    .size(2)
    .color('type', (val) => {
      if (val === 1) {
        return '#009c3e'
      }
      if (val === 2) {
        return '#ba7900'
      }
      if (val === 3) {
        return '#ba3500'
      }
    })
  scene.addLayer(polygonLayer)
  return polygonLayer
}

// home - camera图层
export function addCameraPoints(scene, msg, offset, callback) {
  const pointLayer = new PointLayer({zIndex: 2})
    .source(msg, {
      parser: {
        type: 'json', x: 'longitude', y: 'latitude',
      },
    })
    .style({
      offsets: offset,
    })
    .shape('homeCamera')
    .size(20)
    .active({
      color: '#ffffff', mix: 0.6,
    })
  pointLayer.on('click', (e) => {
    callback(e)
  })
  scene.addLayer(pointLayer)
  return pointLayer
}

// home3 - 绿灯空放polygon图层
export function addGreenPolygon(scene, msg) {
  const polygonLayer = new PolygonLayer({zIndex: 0})
    .source(msg)
    .shape('fill')
    // .color('color字段',(value) => {
    //   if(value === '') return 'red'
    //   if(value === '') return 'origin'
    // })
    .color('#00ff3c')
    .style({
      opacity: 0.6
    })
  scene.addLayer(polygonLayer)
  return polygonLayer
}

// 车牌号图层
export function addLicenseLayer(scene, msg) {
  const pointLayer = new PointLayer({zIndex: 2})
    .source(msg, {
      parser: {
        type: 'json', x: 'longitude', y: 'latitude',
      },
    })
    .shape('picLicense', 'text')
    // .shape('id', 'text')
    .size(10)
    // .size(14)
    .style({
      textAllowOverlap: true, raisingHeight: 10, stroke: '#01309b', strokeWidth: 2, halo: 1,
    })
    .color('#ffffff')
  pointLayer.on('contextmenu', (e) => {
    const input = document.createElement('input')
    input.setAttribute('readonly', 'readonly')
    input.setAttribute('value', e.feature.id)
    document.body.appendChild(input)
    input.setSelectionRange(0, 9999)
    input.select()
    document.execCommand('copy')
    document.body.removeChild(input)
    ELEMENT.Message('复制ID成功！')
  })
  scene.addLayer(pointLayer)
  return pointLayer
}

// 车辆圆点图层
export function addVehicleLayer(scene, msg) {
  const pointLayer = new PointLayer({zIndex: 2})
    .source(msg, {
      parser: {
        type: 'json', x: 'longitude', y: 'latitude',
      },
    })
    .shape('circle')
    .style({
      blur: 1,
    })
    .size(6)
    .color('#06f4fe')
  scene.addLayer(pointLayer)
  return pointLayer
}

// 设备
export function addMobilePoint(scene, msg) {
  const pointLayer = new PointLayer({zIndex: 2})
    .source(msg, {
      parser: {
        type: 'json', x: 'longitude', y: 'latitude',
      },
    })
    .shape('mobileEquip')
    // .style({
    //   blur: 1,
    // })
    .size(28)
  // .color('#e21918')
  scene.addLayer(pointLayer)
  return pointLayer
}
