/*
 *@description: 车辆轨迹
 *@author: hudw
 *@date: 2022-10-10 14:02:28
*/
<template>
  <a-spin class="p-span" :spinning="confirmLoading">
    <searchBar ref="searchBar" :formItems="mx_queryFromItems" :options="options" @submit="searchSubmit">

          <a-space style="margin-bottom: 10px;">
        <p-button :type="mode === 1 ? 'primary' : 'default'" @click="handelModeCheck($event, 1)">派车单信息</p-button>
        <p-button :type="mode === 2 ? 'primary' : 'default'" @click="handelModeCheck($event, 2)">运单信息</p-button>
        <p-button :type="mode === 3 ? 'primary' : 'default'" @click="handelModeCheck($event, 3)">轨迹点</p-button>
        <p-button :type="mode === 4 ? 'primary' : 'default'" @click="handelModeCheck($event, 4)">报警</p-button>
      </a-space>
      <mainTable style="height:360px" ref="mainTable" :activeID="mainId" :bodyStyle="bodyStyle" :tableColumnsList="columns[mode]" :url="c_url" />


    </searchBar>
    <webMap ref="webMap" :type="type" :dataSource="mapData" :queryType="mx_getUrlType()" @markerClick="markerClick"/>

  </a-spin>
</template>
<script>
import useMixin from '../$common/mixins/useMixin.js'
import dictionary from '../$common/mixins/dictionary.js'
import mainTable from './mixins/mainTable'
import {setPathColumns} from '../$common/mainTable/tableConfig_path.js'
import {setWarnColumns} from '../$common/mainTable/tableConfig_warn.js'
import {setShipbillColumns} from '../$common/mainTable/tableConfig_shipbill.js'
import {setBillColumns} from '../$common/mainTable/tableConfig_bill.js'

import queryForm from './mixins/queryForm'
import {billUrl, shipUrl, pathUrl, warnUrl } from './js/api.js'

export default {
  props: {
    type: {
      type: String,
      default: 'path',
      //location=定位，path=轨迹
    },
  },
  mixins: [dictionary, useMixin, mainTable, queryForm],
  computed: {

  },
  data() {
    this.bodyStyle={
      minHeight: '300px',
      maxHeight: '300px'
    }
    this.columns = {
      1:setBillColumns(this),
      2:setShipbillColumns(this),
      3:setPathColumns(this),
      4:setWarnColumns(this)
    }
    this.remoteUrl = {
      1:billUrl,
      2:shipUrl,
      3:pathUrl,
      4:warnUrl,
    }
    let c_url= this.remoteUrl[1]

    return {
      c_url,

      mode:1,
      confirmLoading: false,
      currentMainData: null,
      mapData: null,

    }
  },
  mounted() {},
  methods: {
    handelModeCheck(eve, type) {
      this.mode = type
      this.c_url=this.remoteUrl[this.mode]
      let data = this.$refs.searchBar.getFieldsValue()
      this.$nextTick(() => {
        this.searchSubmit(data)
      })

    },

    markerClick() {
      let data=this.getFieldsValue()
      this.$refs.mainTable.reload({ data });
    },
    handleRowClick(event, key, data) {
      if (key) {
        let form = this.$refs.searchBar.getFieldsValue()
        if (form.date) {
          form.startDate=form.date[0]
          form.endDate = form.date[1]
        }
        let urlType=this.mx_getUrlType()
        this.$refs.mainTable.reload({
          data: { ...form, loadingBillNo: data.loadingBillNo, urlType }
        });

      }
    },
  },
}
</script>

<style lang="less">
.p-span {
  height: inherit;
  .ant-spin-container {
    height: inherit;
  }
}
</style>
