<template>
  <div class="point-box">
    <div v-for="(item,index) in lonlatAyyay" :key="index" class="point-lon-lat">
      <span v-if="(index + 1) % 2 !== 0">From&nbsp;</span>
      <span v-if="(index + 1) % 2 === 0">To&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span>Lon:&nbsp;</span>
      <el-input v-model="item.lon" :placeholder="$t('message.routeQuery.inputLon')"></el-input>
      &nbsp;
      <span>Lat:&nbsp;</span>
      <el-input v-model="item.lat" :placeholder="$t('message.routeQuery.inputLat')"></el-input>
      <div class="point-icon" @click="drawPoint(item,index)">
        <img src="../../../public/img/draw-point.png" alt="">
      </div>
      <div class="point-icon" @click="addPoint(index + 1)" v-if="index < 4">
        <img src="../../../public/img/add.png" alt="">
      </div>
      <div class="point-icon" @click="delPoint(index)" v-if="index > 0">
        <img src="../../../public/img/del.png" alt="">
      </div>
    </div>
<!--    <div class="input-lon-lat">-->
<!--      <el-input type="textarea"-->
<!--                @blur="analysisLonLat"-->
<!--                :placeholder="$t('message.routeQuery.inputLonLatLong')"-->
<!--                v-model="inputLonLat">-->
<!--      </el-input>-->
<!--    </div>-->
    <div class="point-search-btn">
      <el-button v-loading="searchLoading" @click="searchPoint">{{ $t('message.routeQuery.query') }}</el-button>
      <el-button @click="reset">{{ $t('message.weather.reset') }}</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator'
import StoreUtil from '@/util/store'
import MessageUtil from '@/util/message'
import HttpApi from "@/api";
import PointToPointResTemp from "@/views/new-dialog/PointToPointResTemp.vue";
import DialogUtil from "@/util/new-dialog";
import {DialogType} from "@/util/temp-interface";

interface LonLat {
  lon: string,
  lat: string
}

@Component({
  components: {}
})
export default class PointToPoint extends Vue {
  private lonlatAyyay: LonLat[] = []
  private map: any = StoreUtil.getMapFun()
  private inputLonLat = ''
  private avoid: any[] = []
  private searchLoading = false

  public created() {
    this.lonlatAyyay.push({
      lon: '',
      lat: ''
    })
  }

  private searchPoint() {
    this.searchLoading = true;
    if (this.lonlatAyyay.length >= 2) {
      const pArray: any[] = []
      for (let i = 0; i < this.lonlatAyyay.length; i++) {
        if (i <= this.lonlatAyyay.length - 2) {
          const data = {
            startPoint: {lon: this.lonlatAyyay[i].lon, lat: this.lonlatAyyay[i].lat},
            endPoint: {lon: this.lonlatAyyay[i + 1].lon, lat: this.lonlatAyyay[i + 1].lat},
            excludeNodes: this.avoid,
            ignoreByDefault: 1
          }
          const p = new Promise((resolve, reject) => {
            HttpApi.getRouteByNodes(data).then((res: any) => {
              if (res.code === '0') {
                res.data.startPoint = {lon: this.lonlatAyyay[i].lon, lat: this.lonlatAyyay[i].lat};
                res.data.endPoint = {lon: this.lonlatAyyay[i + 1].lon, lat: this.lonlatAyyay[i + 1].lat}
              }
              resolve(res)
            })
          })
          pArray.push(p)
        }
      }
      Promise.all(pArray).then((res: any) => {
        this.searchLoading = false;
        const param: any = {
          dialogData: {
            title: '点到点航线',
            vueName: 'PointToPointResTemp'
          },
          infoData: {
            title: '点到点航线',
            data: res
          },
          show: true
        }
        DialogUtil.showDialog(PointToPointResTemp, DialogType.POINT_POINT_RES, param)

      })
    } else {
      MessageUtil.info('请输入至少2个点位信息');
      this.searchLoading = false;
    }
  }

  private drawPoint(data: any, index: number) {
    (this.map as any).clickGetCoor((index + 1), (item: any) => {
      data.lon = item[0];
      data.lat = item[1]
    })
  }

  private reset() {
    this.lonlatAyyay = []
    this.lonlatAyyay.push({lon: '', lat: ''});
    this.inputLonLat = '';
    (this.map as any).clearPoint()
  }

  private analysisLonLat() {
    const lonResult: LonLat[] = []
    if (this.inputLonLat) {
      const lon = this.inputLonLat.split(',')
      for (let i = 0; i < lon.length; i++) {
        const l = lon[i]
        const lonlat = l.split(' ')
        console.log(lonlat)
        lonResult.push({lon: lonlat[0], lat: lonlat[1]})
      }
    }
    if (this.lonlatAyyay.length > 2) {
      this.$confirm('是否使用填入的经纬度，覆盖上边的经纬度', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.lonlatAyyay = lonResult
      })
    }
  }

  private cancel() {
    console.log('')
  }

  private addPoint(index: number) {
    if (index > 4) {
      return
    }
    if (index !== this.lonlatAyyay.length - 1) {
      this.lonlatAyyay.splice(index, 0, {lon: '', lat: ''})
    } else {
      this.lonlatAyyay.push({lon: '', lat: ''})
    }
  }

  private delPoint(index: number) {
    if (index > 0) {
      this.lonlatAyyay.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.point-box {
  margin-top: 20px;

  .point-lon-lat {
    display: flex;
    align-items: center;
    margin: 5px 0;

    .el-input {
      width: 200px;
    }

    .point-icon {
      img {
        width: 30px;
        height: 30px;
      }
    }
  }

  .input-lon-lat {
    ::v-deep .el-textarea__inner {
      color: #333333;
    }
  }

  .default-avoid {
    margin-top: 10px;

    ::v-deep .el-checkbox__label {
      color: #333333;
    }
  }

  .point-search-btn {

    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;

    .el-button {
      width: 150px;
    }
  }

}
</style>
