<template>
  <CusDialog
      title="mapFunc.drawEdits方法统一标绘"
      :show="show"
      @close="$emit('update:show', false)"
      @submit="$emit('update:show', false)"
  >
    <div style="width: 100%; height: 100%;display:flex;flex-direction: column;">
      <div>
        <el-button @click="initPoint">点（无坐标）</el-button>
        <el-button @click="initPoint2">点2（无坐标）</el-button>
        <el-button @click="initPointHasWkt">点（已有坐标）</el-button>
        <el-button @click="initLine">线（无坐标）</el-button>
        <el-button @click="initLine2">线（有样式、无坐标）</el-button>
        <el-button @click="initLineHasWkt">线（已有坐标）</el-button>
        <el-button @click="initPoly">面（无坐标）</el-button>
        <el-button @click="initPoly2">面（有样式、无坐标）</el-button>
        <el-button @click="initPolyHasWkt">面（已有坐标）</el-button>
        <el-button @click="initAny">点、线、面（无坐标）</el-button>
        <el-button @click="initAnyHasWkt">点、线、面（已有坐标）</el-button>
      </div>
      <EasyMapComponent
          class="map"
          style="flex: 1;"
          @easyMapLoad="mapLoad"
          layout="info"
      />
    </div>
  </CusDialog>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import * as source from "ol/source";
import * as layer from "ol/layer";
import * as format from "ol/format";
import * as style from "ol/style";
import MockIcon from '../bayonet-bg.png'
import MockIcon2 from './location.png'

export default defineComponent({
  name: '',
  components: {},
  props: {
    show: {}
  },
  setup(props, {emit}) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      map: <any>null,
      mapFunc: null,
      Source: <any>null,
      Layer: <any>null,
    })
    const mapLoad = (map, func) => {
      state.map = map
      state.mapFunc = func
    }
    const initPoint = () => {
      state.mapFunc.drawEdits({
        wkt: null,
        text: '这是点位名称',
        featureType: 'Point',
        pointIcon: MockIcon2
      }, (param) => {
        console.log(1, param)
      })
    }
    const initPoint2 = () => {
      state.mapFunc.drawEdits({
        wkt: null,
        text: '图标太大的话传textOffsetY文字偏移量，默认图标为-30，线、面为0',
        textOffsetY: -80,
        featureType: 'Point',
        pointIcon: MockIcon
      }, (param) => {
        console.log(2, param)
      })
    }
    const initPointHasWkt = () => {
      state.mapFunc.drawEdits({
        wkt: 'POINT(109.93672829424746 19.145411111884847)',
        text: '已有坐标',
        featureType: 'Point',
        pointIcon: MockIcon
      }, (param) => {
        console.log(3, param)
      })
    }
    const initLine = () => {
      state.mapFunc.drawEdits({
        wkt: null,
        text: '海岸线1',
        featureType: 'LineString',
      }, (param) => {
        console.log(4, param)
      })
    }
    const initLine2 = () => {
      state.mapFunc.drawEdits({
        wkt: null,
        text: '海岸线1',
        featureType: 'LineString',
        lineColor: 'rgba(187, 40, 241, 1)',
        lineWidth: 10,
        lineType: 1
      }, (param) => {
        console.log(5, param)
      })
    }
    const initLineHasWkt = () => {
      state.mapFunc.drawEdits({
        wkt: "LINESTRING(109.40114479815371 19.323938943916097,109.83785134112246 19.318445779853597,109.95046120440371 19.071253397041097)",
        text: '海岸线222',
        featureType: 'LineString',
        lineColor: 'rgba(244, 35, 11, 1)',
      }, (param) => {
        console.log(6, param)
      })
    }
    const initPoly = () => {
      state.mapFunc.drawEdits({
        wkt: null,
        featureType: 'Polygon',
      }, (param) => {
        console.log(7, param)
      })
    }
    const initPoly2 = () => {
      state.mapFunc.drawEdits({
        wkt: null,
        featureType: 'Polygon',
        polyBorderWidth: 10,
        polyColor: 'rgba(244, 35, 11, 1)',
      }, (param) => {
        console.log(8, param)
      })
    }
    const initPolyHasWkt = () => {
      state.mapFunc.drawEdits({
        wkt: 'POLYGON((109.32149391924746 19.332178690009847,109.17592507159121 19.150904275947347,109.38741188799746 19.013575174384847,109.57374827978202 18.9170450399381,109.82368724462577 18.9500040243131,109.83510475909121 19.057520486884847,110.15602367040702 19.1312784383756,109.88617756738118 19.222723991691716,109.74884846581868 19.398505241691716,109.38466530596621 19.510706522041097,109.32149391924746 19.332178690009847))',
        featureType: 'Polygon',
      }, (param) => {
        console.log(9, param)
      })
    }
    const initAny = () => {
      state.mapFunc.drawEdits({
        isPoint: true,
        isLineString: true,
        isPolygon: true,
        wkt: null,
        featureType: 'Polygon',
        pointIcon: MockIcon2,
        lineColor: 'rgba(244, 35, 11, 1)',
        polyBorderWidth: 10,
        polyColor: 'rgba(244, 35, 11, 1)',
      }, (param) => {
        console.log(10, param)
      })
    }
    const initAnyHasWkt = () => {
      state.mapFunc.drawEdits({
        isPoint: true,
        isPolygon: true,
        wkt: 'POINT(109.77585984129124 19.38754660495915)',
        featureType: 'Point',
      }, (param) => {
        console.log(11, param)
      })
    }
    return {
      ...toRefs(state),
      mapLoad,
      initPoint,
      initPoint2,
      initPointHasWkt,
      initLine,
      initLine2,
      initLineHasWkt,
      initPoly,
      initPoly2,
      initPolyHasWkt,
      initAny,
      initAnyHasWkt
    }
  },
})
</script>

<style scoped lang="scss">
</style>
