<!--
@name: 待审核-地址解析
@author: 张泽贤
@time: 2022-04-12
-->
<template>
  <p-card class="full-card-panel">
    <a-space slot="title">
      <a-icon type="arrow-left" style="color: #1990ff" @click="back" />
      地址解析
    </a-space>
    <a-row :gutter="16" style="height: 100%">
      <a-col :span="12" style="height: 100%">
        <p-card style="margin-bottom: 10px" v-show="Object.keys(searchParams).length">
          <p-form-model ref="searchForm" :model="searchForm" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" class="plg-grid-from">
            <a-row>
              <a-col :span="12">
                <p-form-model-item label="订单号">
                  <p-input v-model="searchForm.orderNo" />
                </p-form-model-item>
              </a-col>
              <a-col :span="12">
                <p-form-model-item label="运单号">
                  <p-input v-model="searchForm.shipbillNo" />
                </p-form-model-item>
              </a-col>
              <a-col :span="12">
                <p-form-model-item label="货主">
                  <p-input v-model="searchForm.cargoOwnerName" />
                </p-form-model-item>
              </a-col>
              <a-col :span="12">
                <p-form-model-item label="发货方单位">
                  <p-input v-model="searchForm.shipperUnitName" />
                </p-form-model-item>
              </a-col>
              <a-col :span="12">
                <p-form-model-item label="收货方单位">
                  <p-input v-model="searchForm.consigneeUnitName" />
                </p-form-model-item>
              </a-col>
              <a-col :span="12">
                <p-form-model-item label="解析对象">
                  <p-radio-group v-model="modObject" @change="modObjectChange">
                    <p-radio value="fhf">发货方</p-radio>
                    <p-radio value="shf">收货方</p-radio>
                  </p-radio-group>
                </p-form-model-item>
              </a-col>
              <a-col :span="24">
                <p-form-model-item :wrapper-col="{ span: 24 }" style="text-align: right">
                  <a-space>
                    <p-button type="primary" @click="onSearch">查询</p-button>
                    <p-button @click="onReset">重置</p-button>
                    <p-button type="primary" @click="onSave">保存</p-button>
                  </a-space>
                </p-form-model-item>
              </a-col>
            </a-row>
          </p-form-model>
          <p-table
            ref="masterTable"
            dragle
            bordered
            row-key="cargoOwnerId"
            hasRowSelectCheck
            :id="$route.meta.menuId + '_addressAnalysis'"
            :scroll="{ x: true, y: 300 }"
            :data-source.sync="dataSource"
            :remote-url="listRemoteUrl"
            :remoteData="listParams"
            :rowSelectType="1"
            :autoLoad="false"
            @clickRow="tableClick"
          >
            <p-table-column data-index="shipbillNo" title="运单号" :width="120" />
            <p-table-column data-index="orderNo" title="订单号" :width="120" />
            <p-table-column data-index="cargoOwnerName" title="货主" :width="120" />
            <p-table-column data-index="shipperUnitName" title="发货方单位" :width="120" />
            <p-table-column data-index="shipperName" title="发货方" :width="120" />
            <p-table-column data-index="shipperAddress" title="详细地址" :width="120" />
            <p-table-column data-index="shipperLatitude" title="经度" :width="120" />
            <p-table-column data-index="shipperLongitude" title="纬度" :width="120" />
            <p-table-column data-index="consigneeUnitName" title="收货方单位" :width="120" />
            <p-table-column data-index="consigneeName" title="收货方" :width="120" />
            <p-table-column data-index="consigneeAddress" title="详细地址" :width="120" />
            <p-table-column data-index="consigneeLatitude" title="经度" :width="120" />
            <p-table-column data-index="consigneeLongitude" title="纬度" :width="120" />
          </p-table>
        </p-card>
        <p-card style="margin-bottom: 10px">
          <div slot="title">发货方</div>
          <p-form-model ref="fhfForm" :model="fhfForm" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" class="plg-grid-from">
            <a-row>
              <a-col :span="12">
                <p-form-model-item label="当前经度">
                  <p-input v-model="fhfForm.longitude" readOnly />
                </p-form-model-item>
              </a-col>
              <a-col :span="12">
                <p-form-model-item label="当前纬度">
                  <p-input v-model="fhfForm.latitude" readOnly />
                </p-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <p-form-model-item label="当前地址" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                  <p-input v-model="fhfForm.address" readOnly />
                </p-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <p-form-model-item label="新经度">
                  <p-input v-model="fhfForm.newLongitude" readOnly />
                </p-form-model-item>
              </a-col>
              <a-col :span="12">
                <p-form-model-item label="新纬度">
                  <p-input v-model="fhfForm.newLatitude" readOnly />
                </p-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <p-form-model-item label="新地址" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                  <p-input v-model="fhfForm.newAddress" readOnly />
                </p-form-model-item>
              </a-col>
            </a-row>
          </p-form-model>
        </p-card>
        <p-card style="margin-bottom: 10px">
          <div slot="title">收货方</div>
          <p-form-model ref="shfForm" :model="shfForm" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" class="plg-grid-from">
            <a-row>
              <a-col :span="12">
                <p-form-model-item label="当前经度">
                  <p-input v-model="shfForm.longitude" readOnly />
                </p-form-model-item>
              </a-col>
              <a-col :span="12">
                <p-form-model-item label="当前纬度">
                  <p-input v-model="shfForm.latitude" readOnly />
                </p-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <p-form-model-item label="当前地址" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                  <p-input v-model="shfForm.address" readOnly />
                </p-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <p-form-model-item label="新经度">
                  <p-input v-model="shfForm.newLongitude" readOnly />
                </p-form-model-item>
              </a-col>
              <a-col :span="12">
                <p-form-model-item label="新纬度">
                  <p-input v-model="shfForm.newLatitude" readOnly />
                </p-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <p-form-model-item label="新地址" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                  <p-input v-model="shfForm.newAddress" readOnly />
                </p-form-model-item>
              </a-col>
            </a-row>
          </p-form-model>
        </p-card>
      </a-col>
      <a-col :span="12" style="height: 100%">
        <div id="address_map" style="height: 100%"></div>
        <div class="addressAnalysis_right_input">
          <p-input id="address_map_input" v-model="map_searchValue" placehilder="请输入关键字：(选定后搜索)" @focus="map_searchValue = ''" />
        </div>
      </a-col>
    </a-row>
  </p-card>
</template>

<script>
import { axios } from '@/utils/request'
import { UPCLOUD_RDC_TMS_BUSINESS_SERVICE } from '@/config/serviceSettings.js'
const serviceName = UPCLOUD_RDC_TMS_BUSINESS_SERVICE
export default {
  props: {
    searchParams: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    listRemoteUrl() {
      return {
        url: serviceName + '/cargo_owner/byIds',
        method: 'post',
      }
    },
  },
  data() {
    return {
      searchForm: {
        search: '',
      },
      dataSource: [],
      listParams: {},

      fhfForm: {
        longitude: '',
        latitude: '',
        address: '',
        newLongitude: '',
        newLatitude: '',
        newAddress: '',
      },
      shfForm: {
        longitude: '',
        latitude: '',
        address: '',
        newLongitude: '',
        newLatitude: '',
        newAddress: '',
      },

      myMap: '',
      map_searchValue: '',
      geocoder: '',
      fhfMarker: '',
      shfMarker: '',

      modObject: 'fhf',
    }
  },
  watch: {
    searchParams(value) {
      if (Object.keys(value).length) {
        this.listParams = { ...value }
        this.fhfForm = {
          longitude: '',
          latitude: '',
          address: '',
          newLongitude: '',
          newLatitude: '',
          newAddress: '',
        }
        this.shfForm = {
          longitude: '',
          latitude: '',
          address: '',
          newLongitude: '',
          newLatitude: '',
          newAddress: '',
        }
      }
    },
  },
  mounted() {
    let _this = this
    // 注册地图
    this.myMap = new AMap.Map('address_map', {
      resizeEnable: true,
      center: [116.397428, 39.90923],
      zoom: 15,
      keyboardEnable: false,
    })

    this.geocoder = new AMap.Geocoder({
      city: '010', //城市设为北京，默认：“全国”
      radius: 1000, //范围，默认：500
    })
    this.myMap.on('click', this.showInfoClick)

    // 查询输入框
    AMap.plugin(['AMap.AutoComplete', 'AMap.PlaceSearch'], function () {
      var autoOptions = {
        input: 'address_map_input', //使用联想输入的input的id
      }
      var autocomplete = new AMap.AutoComplete(autoOptions)
      var placeSearch = new AMap.PlaceSearch({
        map: _this.myMap,
      })
      AMap.Event.addListener(autocomplete, 'select', function (e) {
        // 针对选中的poi实现自己的功能
        placeSearch.setCity(e.poi.adcode)
        placeSearch.search(e.poi.name)
      })
      AMap.Event.addListener(placeSearch, 'markerClick', function (e) {
        _this.regeoCode([e.data.location.lng, e.data.location.lat])
      })
    })
    this.listParams = { ...this.searchParams }
  },
  methods: {
    // 返回
    back() {
      this.$emit('back')
    },
    // 点击地图
    showInfoClick(e) {
      this.regeoCode([e.lnglat.getLng(), e.lnglat.getLat()])
    },
    // 点击地图、回显
    regeoCode(lnglat) {
      let _this = this

      if (this.modObject === 'fhf') {
        this.fhfMarker && this.myMap.remove(this.fhfMarker)
        this.fhfMarker = new AMap.Marker({
          position: new AMap.LngLat(lnglat[0], lnglat[1]),
        })
        this.myMap.add(this.fhfMarker)
      } else {
        this.shfMarker && this.myMap.remove(this.shfMarker)
        this.shfMarker = new AMap.Marker({
          position: new AMap.LngLat(lnglat[0], lnglat[1]),
        })
        this.myMap.add(this.shfMarker)
      }

      this.myMap.setCenter(lnglat)

      this.geocoder.getAddress(lnglat, function (status, result) {
        if (status === 'complete' && result.regeocode) {
          var regeocode = result.regeocode
          let newAddress = regeocode.formattedAddress.split(regeocode.addressComponent.district)[1]

          if (_this.modObject === 'fhf') {
            _this.fhfForm = Object.assign(_this.fhfForm, {
              newLongitude: lnglat[0],
              newLatitude: lnglat[1],
              newAddress: newAddress,
            })
          } else {
            _this.shfForm = Object.assign(_this.shfForm, {
              newLongitude: lnglat[0],
              newLatitude: lnglat[1],
              newAddress: newAddress,
            })
          }

          let info = []
          info.push('地址：' + regeocode.formattedAddress)
          var infoWindow = new AMap.InfoWindow({
            content: info.join('<br/>'),
            offset: new AMap.Pixel(0, -25),
          })
          infoWindow.open(_this.myMap, lnglat)
        } else {
          layer.msg('根据经纬度查询地址失败')
        }
      })
    },

    // 查询
    onSearch() {
      this.dataSource = []
      this.listParams = Object.assign({}, this.searchParams, this.searchForm)
    },
    // 重置
    onReset() {
      this.searchForm = {
        search: '',
      }
    },
    // 保存
    onSave() {
      this.fhfForm.longitude = this.fhfForm.newLongitude
      this.fhfForm.latitude = this.fhfForm.newLatitude
      this.fhfForm.address = this.fhfForm.newAddress
      axios.post(serviceName + '/pending_review/parse_address', this.fhfForm).then((res) => {
        this.$message.success(res.message)
        this.$refs.masterTable.reload()
        this.fhfForm = {
          longitude: '',
          latitude: '',
          address: '',
          newLongitude: '',
          newLatitude: '',
          newAddress: '',
        }
        this.shfForm = {
          longitude: '',
          latitude: '',
          address: '',
          newLongitude: '',
          newLatitude: '',
          newAddress: '',
        }
      })
    },
    // 通过带过来的经纬度定位地图
    locationMap(data) {
      let _this = this
      let { address, longitude, latitude } = data

      this.fhfForm.address = address
      this.fhfForm.longitude = longitude
      this.fhfForm.latitude = latitude
      this.fhfForm.newAddress = address
      this.fhfForm.newLongitude = longitude
      this.fhfForm.newLatitude = latitude

      this.shfForm.address = address
      this.shfForm.longitude = longitude
      this.shfForm.latitude = latitude
      this.shfForm.newAddress = address
      this.shfForm.newLongitude = longitude
      this.shfForm.newLatitude = latitude

      if (longitude && latitude) {
        this.regeoCode([longitude, latitude])
      } else if (address) {
        this.map_searchValue = address
        var placeSearch = new AMap.PlaceSearch({
          map: _this.myMap,
        })
        placeSearch.search(address)
        AMap.Event.addListener(placeSearch, 'markerClick', function (e) {
          regeoCode([e.data.location.lng, e.data.location.lat])
        })
      }
    },
    // 表格点击
    tableClick(event, activeID, rowRecord) {
      this.locationMap(rowRecord)
    },

    // 解析对象修改
    modObjectChange(e) {
      if (e.target.value === 'fhf') {
        this.regeoCode([this.fhfForm.newLongitude, this.fhfForm.newLatitude])
      } else {
        this.regeoCode([this.shfForm.newLongitude, this.shfForm.newLatitude])
      }
    },
  },
}
</script>

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