<template>
  <div class="toolbar" style="font-size: 16px" v-if="show">
    <div class="search-box">
      <a-input-search
        placeholder="请输入位置名称"
        style="width: 200px"
        @search="onSearch"
        v-show="false"
      />
    </div>
    <span>位置:</span>
    <i @click="drawByType('Point')">
      <a-icon class="icon-btn"><EnvironmentOutlined :style="{ color: 'blue' }" /></a-icon>
    </i>
    <i @click="clearDraw('Point')">
      <a-icon class="icon-btn"><DeleteOutlined :style="{ color: 'red' }" /></a-icon>
    </i>
    <span>范围:</span>
    <i @click="drawByType('Polygon')">
      <a-icon class="icon-btn"><BorderOutlined :style="{ color: 'blue' }" /></a-icon>
    </i>
    <a-popover v-model="visible" placement="bottom" width="220" style="padding: 0" trigger="click">
      <template #content>
        <a-row type="flex" align="left" style="margin-bottom: 10px">
          <a-col span="6"> 线宽 </a-col>
          <a-col span="14">
            <a-input-number
              :value="styleForm.lineWidth"
              type="number"
              :controls="false"
              :precision="0"
              :min="0"
              :max="20"
              @change="styleChange"
            />
          </a-col>
        </a-row>
        <a-row type="flex" align="center">
          <a-col span="6"> 边线颜色 </a-col>
          <a-col span="14">
            <a-input :value="styleForm.strokeColor" @change="styleChange" />
          </a-col>
          <a-col span="4">
            <colorPicker v-model="styleForm.strokeColor" @change="styleChange" />
          </a-col>
        </a-row>
        <a-row type="flex" align="center">
          <a-col span="6"> 填充颜色 </a-col>
          <a-col span="14">
            <a-input :value="styleForm.fillColor" @change="styleChange" />
          </a-col>
          <a-col span="4">
            <colorPicker v-model="styleForm.fillColor" @change="styleChange" />
          </a-col>
        </a-row>
      </template>
      <i @click="hide">
        <a-icon class="icon-btn"><BgColorsOutlined :style="{ color: 'blue' }" /></a-icon>
      </i>
    </a-popover>

    <i @click="clearDraw('Polygon')">
      <a-icon class="icon-btn"><DeleteOutlined :style="{ color: 'red' }" /></a-icon>
    </i>
  </div>
</template>
<script lang="ts" setup>
  import {
    EnvironmentOutlined,
    BorderOutlined,
    DeleteOutlined,
    BgColorsOutlined,
  } from '@ant-design/icons-vue';
  import { ref, reactive } from 'vue';
  import { colorPicker } from '../Map/common/ant-color-picker-master/index';
  import mitter from './common/utils/mitter';
  import LayerVector from 'ol/layer/Vector';
  import sourceVector from 'ol/source/Vector';
  import { Draw } from 'ol/interaction';
  import { featureToWkt, createStyle } from './common/utils/mapUtils';

  interface Point {
    latitudet: number;
    longitude: number;
  }
  interface callBackData {
    point?: Point;
    range?: String;
  }
  // const props = defineProps({
  //   toolCallBack: {
  //     type: any,
  //     default: (data: callBackData) => {
  //       console.log(data);
  //     },
  //   },
  // });

  const emits = defineEmits(['toolCallBack']);
  const visible = ref(true);
  const show = ref(false); //地图准备好后再显示工具栏
  const styleForm = reactive({
    lineWidth: 2,
    strokeColor: '#409EFF',
    fillColor: 'rgba(255,255,255,0.1)',
  });
  // const emitData: callBackData = reactive({
  //   point: null as any,
  //   range: '',
  // });

  let map: Record<string, any>; //地图
  let wrapLayer: Record<string, any>; // 绘制控件
  let drawLayer: Record<string, any>; //绘制展示图层
  mitter.on('mapReady', (data: Record<string, any>) => {
    map = data;
    show.value = true;
    // 添加已知点和已知区域
  });

  /**
   *type:绘制的类型Point，LineString，Polygon
   * @param drawType 实例化一个绘制图层
   */
  function drawByType(type: string) {
    if (drawLayer) {
      drawLayer.getSource().clear();
      drawLayer = null as any;
    }
    // 实例化一个矢量图层Vector作为绘制层
    const source = new sourceVector();
    const style = createStyle();
    drawLayer = new LayerVector({
      source: source,
      style: style,
    });
    map.addLayer(drawLayer);
    wrapLayer = new Draw({
      source: source, // 一定要添加绘画图层的数据源，否则画图完成后，无法保存矢量数据
      type: type as any,
    });
    map.addInteraction(wrapLayer);
    wrapLayer.on('drawstart', () => {});
    wrapLayer.on('drawend', (event: Record<string, any>) => {
      map.removeInteraction(wrapLayer);
      wrapLayer.setActive(false);
      const tempwkt = featureToWkt(event.feature);
      let point = event.feature.values_.geometry.flatCoordinates;
      let data: callBackData = {} as any;
      if (type === 'Point') {
        data.point = { latitude: point[0], longitude: point[1] } as any;
      } else if (type === 'Polygon') {
        data.range = tempwkt;
      }
      emits('toolCallBack', data);
    });
  }
  // 清除绘制的图形
  function clearDraw(type) {
    if (drawLayer) {
      drawLayer.getSource().clear();
    }
    let data: callBackData = {} as any;
    if (type === 'Point') {
      data.point = {} as any;
    } else if (type === 'Polygon') {
      data.range = '';
    }
    emits('toolCallBack', data);
  }

  function styleChange() {
    const temStyle = createStyle(styleForm.lineWidth, styleForm.strokeColor, styleForm.fillColor);
    if (drawLayer) {
      drawLayer.setStyle(temStyle);
    }
  }

  /**
   * 位置查询
   */
  function onSearch() {}

  function hide() {
    visible.value = !visible.value;
  }
</script>
<style lang="less" scoped>
  .toolbar {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #333;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 10;

    button {
      margin: 0;
    }

    i {
      height: 30px;
      width: 30px;
      line-height: 30px;
      cursor: pointer;
      background-color: rgba(255, 255, 255, 1);
      margin: 0 5px;
      text-align: center;
      vertical-align: center;
    }

    .icon-btn {
      height: 30px;
      width: 30px;
    }

    .row-box {
      margin: 5px 0;
      text-align: right;
    }
  }
</style>
