import Style from 'ol/style/Style' //样式总类
import styleIcon from 'ol/style/Icon' //添加图标
import styleText from 'ol/style/Text' //添加文字标注
import styleFill from 'ol/style/Fill' //添加填充样式
import styleStroke from 'ol/style/Stroke' //添加填充样式
import styleCircle from 'ol/style/Circle' //添加填充样式
import Polygon from 'ol/geom/Polygon' //面
import start from './img/start.png'
import end from './img/end.png'
import kuang from './img/kuang.png'
import sign from './img/blue.png'
import port from './img/port.png'
import berth from './img/berth.png'
import { transform } from 'ol/proj' //坐标系转换
import { Circle as CircleStyle, Fill, RegularShape } from 'ol/style'

const shipStyle = new Object({})


shipStyle.carStyle = function (f) {
  let flag = new Style({
    image: new styleIcon({
      src: '/zero2/img/car.svg',
      scale: 0.2,
    }),
    text: new styleText({
      font: '16px Microsoft YaHei 100',
      textAlign: 'center',
      overflow: true,
      fill: new styleFill({
        color: '#000'
      }),
      stroke: new styleStroke({
        color: '#fff',
        width: 3
      }),
      textBaseline: 'bottom',
      text: f.get('carNum')
    })
  })
  return [flag]
}
// ---我的修改---
var shipsize = null
shipStyle.plotting = function (number) {
  number = number <= 200 ? number : 200
  shipsize = number
}
// ---我的修改---

// ---我的修改
shipStyle.lineStyle = function () {
  return new Style({
    stroke: new styleStroke({
      color: 'rgba(77, 168, 213,0.7)',
      width: 4
    })
  })
}
//---我的修改

//普通船舶
shipStyle.newshipStyle = function (f, r, map) {
  let zoom = Math.ceil((Math.log(r) - Math.log(156543.03390625)) / Math.log(0.5))
  let style = null
  let gemo = null
  let styles = []
  let d = r * 7
  let shipnameEn = f.get('shipnameEn') //船名
  let heading = f.get('heading')
  let direction = parseFloat(f.get('cog') / 10) //航向
  let speed = parseFloat(f.get('sog') / 10) //速度
  let o = f.get('geom').getCoordinates()
  let lon = parseFloat(f.get('lon') / 60 / 10000)
  let lat = parseFloat(f.get('lat') / 60 / 10000)
  let shipColor = ''
  let color = f.get('color')
  if (color) {
    shipColor = color
  } else {
    let shiptype = f.get('shiptype')
    shiptype = shiptype ? Number(shiptype) : 90
    switch (true) {
      //70-79  货船
      case shiptype >= 70 && shiptype <= 79:
        shipColor = '#53cf90'
        break
      //80-89 油船
      case shiptype >= 80 && shiptype <= 89:
        shipColor = '#743675'
        break
      //60-69  客船
      case shiptype >= 60 && shiptype <= 69 && shiptype === 73:
        shipColor = '#ffc24d'
        break
      //渔船
      case shiptype == 30:
        shipColor = '#fc8a2a'
        break
      //拖船
      case shiptype == 52:
        shipColor = '#bd3154'
        break
      //工程船
      case shiptype == 31 ||
      shiptype == 32 ||
      shiptype == 33 ||
      shiptype == 34 ||
      shiptype == 53:
        shipColor = '#2fb3cc'
        break
      //公务执法船
      case shiptype == 35 ||
      shiptype == 50 ||
      shiptype == 51 ||
      shiptype == 55 ||
      shiptype == 58:
      // shiptype == 59:
        shipColor = '#8d1d55'
        break
      //其他
      default:
        shipColor = '#065880'
        break
    }
  }
  style = new Style({
    fill: new styleFill({
      color: shipColor
    }),
    stroke: new styleStroke({
      color: '#333',
      width: 0.5
    })
  })
  styles.push(style)
  let nameStyle = null
  let textline = null
  //判断图层级别
  var rot = heading
  if (rot !== 0) {
    if (!rot) {
      rot = direction
      if (!rot) {
        rot = 0
      }
    }
  }
  let rot2 = 0
  if (direction === 0) {
    rot2 = 0
  } else {
    rot2 = direction ? direction : heading
    if (!rot2) rot2 = 0
  }
  let geom = null
  if (speed && speed >= 0.5) {//显示三角形
    let x = [o[0], o[1] + (1.3 + speed * 0.1) * d]
    let a = [o[0], o[1] + 1.3 * d]
    let b = [o[0] - 0.7 * d, o[1] - d]
    let c = [o[0] + 0.7 * d, o[1] - d]
    geom = new Polygon([
      [x, a, b, c, a]
    ])
    geom.rotate(-Math.PI / 180 * direction, o)
  } else { //显示菱形
    let x = [o[0] - 0.5 * d, o[1] - 0.5 * d]
    let a = [o[0] + 0.5 * d, o[1] - 0.5 * d]
    let b = [o[0] - 0.5 * d, o[1] + 0.5 * d]
    let c = [o[0] + 0.5 * d, o[1] + 0.5 * d]
    geom = new Polygon([
      [x, a, c, b]
    ])
    geom.rotate(Math.PI / 180 * 45, o)
  }
  f.setGeometry(geom)

  nameStyle = new Style({
    text: new styleText({
      font: '16px Microsoft YaHei 100',
      textAlign: 'left',
      overflow: true,
      fill: new styleFill({
        color: '#000'
      }),
      stroke: new styleStroke({
        color: '#fff',
        width: 3
      }),
      textBaseline: 'bottom',
      offsetX: 10,
      offsetY: 20,
      text: shipnameEn
    })
  })

  // let pix = map.getPixelFromCoordinate(o)
  // let e = []
  // e[0] = pix[0]
  // e[1] = pix[1]
  // e[0] += 20
  // e[1] += 10
  // let end = map.getCoordinateFromPixel(e)
  // let slGeo = new LineString([o, end])
  //  textline = new Style({
  //   fill: new styleFill({
  //     color: 'black'
  //   }),
  //   stroke: new styleStroke({
  //     color: 'black',
  //     width: 0.5
  //   })
  // })
  // textline.setGeometry(slGeo)

  if (zoom > 11) {
    // if (nameStyle) {
    //   styles.push(nameStyle)
    // }
    // if (textline) {
    //   styles.push(textline)
    // }
  }

  return styles
}

// 新的船舶样式
shipStyle.newShipStyle = function (f, zoom, map) {
  return new Style({
    image: new RegularShape({
      stroke: new styleStroke({
        color: '#333333FF',
        width: 1
      }),
      fill: new styleFill({
        color: 'red'
      }),
      radius: 8,
      points: 4
    })
  })
}

//测距最终显示的样式
shipStyle.ceJuStyle = new Style({
  fill: new styleFill({
    color: 'red'
  }),
  stroke: new styleStroke({
    color: 'red',
    width: 3
  }),
  image: new CircleStyle({
    radius: 7,
    fill: new styleFill({
      color: 'red'
    })
  })
})
//测距画笔的样式
shipStyle.drawStyle = new Style({
  fill: new styleFill({
    color: 'red'
  }),
  stroke: new styleStroke({
    color: 'red',
    width: 3
  }),
  image: new CircleStyle({
    radius: 5,
    stroke: new styleStroke({
      color: 'red'
    }),
    fill: new styleFill({
      color: 'red'
    })
  })
})

shipStyle.newShip = function () {
  return new Style({
    image: new styleIcon({
      // 点的颜色
      fill: new styleFill({
        color: '#000'
      }),
      // 圆形半径
      radius: 7
    })
  })
}
//船舶样式
shipStyle.shipStyle = function (f, r) {
  let r1 = 0.0005 //r=0.0005代表着100米
  let style = null
  let gemo = null
  let speed = parseFloat(f.get('sog'))
  let direction = parseFloat(f.get('cog'))
  let o = f.get('geom').getCoordinates()
  let lon = parseFloat(f.get('lon') / 60 / 10000)
  let lat = parseFloat(f.get('lat') / 60 / 10000)
  let name = f.get('shipnameEn')
  //判断图层级别
  if (r < 13) {
    style = new Style({
      stroke: new styleStroke({
        color: 'red',
        width: 1
      })
    })
    //判断航向是不是O 是就显示方块
    // if (speed == 0) {
    //   let a = changeCoor([lon - r1, lat - r1]);
    //   let s = changeCoor([lon - r1, lat + r1]);
    //   let v = changeCoor([lon + r1, lat + r1]);
    //   let g = changeCoor([lon + r1, lat - r1]);
    //   gemo = new Polygon([[a, s, v, g]]);
    //   gemo.rotate(Math.PI / 180 * 45, o);
    // } else {
    let x = changeCoor([lon, lat + (1.8 + speed * 0.2) * r1])
    let a1 = changeCoor([lon, lat + 1.8 * r1])
    let b1 = changeCoor([lon - 0.4 * r1, lat + r1])
    let c1 = changeCoor([lon + 0.4 * r1, lat + r1])
    let d1 = changeCoor([lon - 0.4 * r1, lat - 1.5 * r1])
    let e1 = changeCoor([lon + 0.4 * r1, lat - 1.5 * r1])
    gemo = new Polygon([[x, a1, b1, d1, e1, c1, a1]])
    gemo.rotate((-Math.PI / 180) * direction, o)
    // }
  } else {
    r1 = r / 20000
    style = new Style({
      fill: new styleFill({ color: '#7CFC00' }),
      stroke: new styleStroke({
        color: '#333',
        width: 0.5
      })
    })
    let x = changeCoor([lon, lat + (1.3 + speed * 0.1) * r1])
    let a = changeCoor([lon, lat + 1.3 * r1])
    let b = changeCoor([lon - 0.7 * r1, lat - r1])
    let c = changeCoor([lon + 0.7 * r1, lat - r1])
    gemo = new Polygon([[x, a, b, c, a]])
    gemo.rotate((-Math.PI / 180) * direction, o)
  }
  f.setGeometry(gemo)

  let nameStyle = new Style({
    text: new styleText({
      font: '16px Microsoft YaHei 100',
      textAlign: 'left',
      overflow: true,
      fill: new styleFill({
        color: '#000'
      }),
      stroke: new styleStroke({
        color: '#fff',
        width: 3
      }),
      textBaseline: 'bottom',
      /*backgroundStroke:new Stroke({
          color: '#8D9080',
          width: 1
      }),*/
      offsetX: 0,
      offsetY: 20,
      text: name
    })
  })
  let flag = new Style({
    image: new styleIcon({
      src: '../img/end.png',
      imgSize: [10, 22],
      //scale: 0.5
      offsetX: 0,
      offsetY: 11
    }),
    text: new styleText({
      font: '16px Microsoft YaHei 100',
      textAlign: 'left',
      overflow: true,
      fill: new styleFill({
        color: '#000'
      }),
      stroke: new styleStroke({
        color: '#fff',
        width: 3
      }),
      textBaseline: 'bottom',
      /*backgroundStroke:new Stroke({
          color: '#8D9080',
          width: 1
      }),*/
      offsetX: 50,
      offsetY: 20,
      text: 'name'
    })
  })
  let styles = []
  styles.push(style)
  if (r >= 11) {
    styles.push(nameStyle)
  }
  return styles
}
//船舶选中框样式
shipStyle.selectStyle = new Style({
  image: new styleIcon({
    anchor: [0.5, 0.5],
    src: kuang
  })
})
//标记的样式
shipStyle.signStyle = new Style({
  image: new styleIcon({
    anchor: [0.5, 0.5],
    src: sign
  }),
  text: new styleText({
    text: '未命名', //f.get('name')
    font: '12px Calibri,sans-serif',
    offsetY: 20, //位置
    offsetX: 0, //位置
    fill: new styleFill({
      color: 'black' //填充颜色
    })
  })
});

//轨迹路线颜色
(shipStyle.pathColor = function () {
  return new Style({
    stroke: new styleStroke({
      color: 'red',
      width: 3
    })
  })
}),
  //范围线样式
  (shipStyle.areastyle = function () {
    return new Style({
      stroke: new styleStroke({
        color: 'rgba(230,162,60,0.8)',
        width: 5
      })
    })
  })
//船舶点击样式
shipStyle.clickStyle = function () {
  return function (f, r) {
    let r1 = 0.0005 //r=0.0005代表着100米
    let style = null
    let gemo = null
    let speed = parseFloat(f.get('sog'))
    let direction = parseFloat(f.get('cog'))
    let o = f.get('geom').getCoordinates()
    let lon = parseFloat(f.get('lon'))
    let lat = parseFloat(f.get('lat'))
    //判断图层级别
    if (r < 13) {
      style = new Style({
        stroke: new styleStroke({
          color: 'black',
          width: 1
        }),
        fill: new styleFill({
          color: '#7CFC00'
        })
      })
      //判断航向是不是O 是就显示方块
      if (speed == 0) {
        let a = changeCoor([lon - r1, lat - r1])
        let s = changeCoor([lon - r1, lat + r1])
        let v = changeCoor([lon + r1, lat + r1])
        let g = changeCoor([lon + r1, lat - r1])
        gemo = new Polygon([[a, s, v, g]])
        gemo.rotate((Math.PI / 180) * 45, o)
      } else {
        let x = changeCoor([lon, lat + (1.8 + speed * 0.2) * r1])
        let a1 = changeCoor([lon, lat + 1.8 * r1])
        let b1 = changeCoor([lon - 0.4 * r1, lat + r1])
        let c1 = changeCoor([lon + 0.4 * r1, lat + r1])
        let d1 = changeCoor([lon - 0.4 * r1, lat - 1.5 * r1])
        let e1 = changeCoor([lon + 0.4 * r1, lat - 1.5 * r1])
        gemo = new Polygon([[x, a1, b1, d1, e1, c1, a1]])
        gemo.rotate((-Math.PI / 180) * direction, o)
      }
    } else {
      r1 = r / 20000
      style = new Style({
        fill: new styleFill({ color: '#7CFC00' }),
        stroke: new styleStroke({
          color: '#333',
          width: 0.5
        })
      })
      let x = changeCoor([lon, lat + (1.3 + speed * 0.1) * r1])
      let a = changeCoor([lon, lat + 1.3 * r1])
      let b = changeCoor([lon - 0.7 * r1, lat - r1])
      let c = changeCoor([lon + 0.7 * r1, lat - r1])
      gemo = new Polygon([[x, a, b, c, a]])
      gemo.rotate((-Math.PI / 180) * direction, o)
    }
    f.setGeometry(gemo)
    return style
  }
}
//历史轨迹样式
shipStyle.pathStyle = function (time) {
  return new Style({
    image: new styleCircle({
      // 点的颜色
      fill: new styleFill({
        color: 'yellow'
      }),
      // 圆形半径
      radius: 5
    }),
    text: new styleText({
      text: time, //f.get('name')
      font: '12px Calibri,sans-serif',
      offsetY: 20, //位置
      offsetX: 0, //位置
      fill: new styleFill({
        color: '#00a0e9'
      }),
      stroke: new styleStroke({
        color: 'white',
        width: 4
      })
    })
  })
}
//历史轨迹开始结束点的样式
shipStyle.pathSEStyle = function (state) {
  let style = null
  if (state == 'start') {
    style = new Style({
      image: new styleIcon({
        src: start,
        anchor: [0.5, 1]
      })
    })
  } else {
    style = new Style({
      image: new styleIcon({
        src: end,
        anchor: [0.5, 1]
      })
    })
  }
  return style
}
//自定义数据添加线段的样式
shipStyle.agtStyle = (color, type) => {
  color = color ? color : '#FF5454'
  let style = null
  if (type == 1) {
    style = new Style({
      stroke: new styleStroke({
        color: color,
        width: 2,
        lineDash: [10, 10]
      })
    })
  } else {
    style = new Style({
      stroke: new styleStroke({
        color: color,
        width: 2
      })
    })
  }
  return style
}

//等值线样式
shipStyle.isobarStyle = new Style({
  fill: new Fill({ color: 'transparent' }),
  stroke: new styleStroke({
    width: 2,
    color: [241, 241, 241, 0.8],
  }),
  text: new styleText({
    font: '12px Calibri,sans-serif',
    placement: 'line',
    fill: new styleFill({
      color: '#000',
    }),
    stroke: new styleStroke({
      color: '#fff',
      width: 3,
    }),
  }),
})
//港口样式
shipStyle.portStyle = function (f) {
  return new Style({
    image: new styleIcon({
      anchor: [0.5, 0.5],
      src: port
    }),
    text: new styleText({
      text: f.get('name'),
      font: '12px Calibri,sans-serif',
      offsetY: -10, //位置
      offsetX: 25, //位置
      fill: new styleFill({
        color: 'blue' //填充颜色
      })
    })
  })
}
shipStyle.berthStyle = function (f) {
  return new Style({
    image: new styleIcon({
      anchor: [0.5, 0.5],
      src: berth,
      size: [20, 20],
      scale: 1
    }),
    text: new styleText({
      text: f.get('name'),
      font: '12px Calibri,sans-serif',
      offsetY: -10, //位置
      offsetX: 25, //位置
      fill: new styleFill({
        color: 'blue' //填充颜色
      })
    })
  })
}

//定义一个函数用于转换坐标
let changeCoor = (coor) => transform(coor, 'EPSG:4326', 'EPSG:3857')

export default shipStyle
