/*
 *@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">
      <p-card :bordered="false" style="margin-bottom: 10px" :bodyStyle="{ padding: 0, minHeight: '300px' }">
        <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 ref="mainTable" :activeID="mainId" :tableColumnsList="columns[mode]" :url="remoteUrl[mode]" @clickRow="handleRowClick" />
      </p-card>
    </searchBar>
    <webMap ref="webMap" :type="type" :dataSource="mapData" :seatList="seatList" :queryType="mx_getUrlType()" @markerClick="markerClick" />
  </a-spin>
</template>
<script>
import useMixin from '../$common/mixins/useMixin.js';
import dictionary from '../$common/mixins/dictionary.js';

import { setPathColumns } from '../$common/mainTable/tableConfig_path.js';
import { setBillColumns } from '../$common/mainTable/tableConfig_bill.js';
import { setWarnColumns } from '../$common/mainTable/tableConfig_warn.js';
import { setShipbillColumns } from '../$common/mainTable/tableConfig_shipbill.js';
import mainTable from './mixins/mainTable';

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

export default {
  props: {
    type: {
      type: String,
      default: 'location',
      //location=定位，path=轨迹
    },
  },
  mixins: [dictionary, useMixin, mainTable, queryForm],
  data() {
    this.columns = {
      1: setBillColumns(this),
      2: setShipbillColumns(this),
      3: setPathColumns(this),
      4: setWarnColumns(this),
    };
    this.remoteUrl = {
      1: billUrl,
      2: shipUrl,
      3: null,
      4: warnUrl,
    };
    return {
      dataList: {
        1: [],
        2: [],
        3: [],
        4: [],
      },
      mode: 1,
      confirmLoading: false,
      currentMainData: null,
      mapData: null,
      seatList: null,
    };
  },
  watch: {
    mode(v) {
      this.$refs.mainTable.dataSource=[]
      this.$nextTick(() => {
        this.$refs.mainTable.dataSource = this.dataList[v];
        this.$refs.mainTable.$forceUpdate();
      });
    },
  },
  mounted() {},
  methods: {
    handelModeCheck(eve, type) {
      this.mode = type;
      if (this.currentMainData) {
        let loadingBillId = this.currentMainData.loadingBillId;
        let urlType = this.mx_getUrlType();
        if (type === 4 || type === 2) {
          //运单，查告警
          this.$refs.mainTable.dataSource = [];
          return this.$nextTick(() => {
            this.$refs.mainTable.reload({ data: { loadingBillId, urlType } });
          });
        }
      }
    },

    markerClick() {
      let data = this.getFieldsValue();
      this.$refs.mainTable.reload({ data });
    },

    handleRowClick(event, key, data) {
      if (key && this.mode === 1) {
        this.mainId=key
        this.currentMainData = data;
        this.$nextTick(() => {
          this.dataList[3] = [];
          this.seatList = null;
          this.$refs.mainTable.$refs.mainTable.vLoading = true;
          let urlType = this.mx_getUrlType();
          //轨迹线
          getPathMapData(this, { loadingBillId: data.loadingBillId }, urlType)
            .then((response) => {
              if (response.success) {
                response.data.tmsVehicleGpsDTOList = response.data.deviceGpsDTOList;
                this.mapData = response.data;
                this.dataList[3] = response.data.deviceGpsDTOList;
              } else {
                this.mapData = null;
                this.$message.error(response.message);
              }
            })
            .finally(() => {
              this.confirmLoading = false;
              this.$refs.mainTable.$refs.mainTable.vLoading = false;
              //派车单站点
              getSiteInfo(this, { loadingBillId: data.loadingBillId }).then((response) => {
                console.log(response);
                if (response.success) {
                  this.seatList =response.data;
                } else {
                  this.$message.error(response.message);
                }
              });
            });
        });
      }
    },
  },
};
</script>

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