<!--
@name: 已派车-tab页
@author: 张泽贤
@time: 2022-04-28
-->
<template>
  <p-card>
    <div slot="title" style="display: flex; align-items: center; cursor: pointer">
      <a-icon type="arrow-left" style="color: #1990ff" @click="back" />
      {{ typeTitle }}
    </div>
    <p-tabs :animated="false" :activeKey="activeKey" @tabClick="activeKey = $event">
      <p-tab-pane key="1" tab="派车单信息" :forceRender="true">
        <Edit :editType="editType" :editData="editData" :options="options" :mextendedField_list="mextendedField_list" @back="back"></Edit>
      </p-tab-pane>
      <p-tab-pane key="2" tab="派车单轨迹" :forceRender="true">
        <locusMap :editData="editData" @getLineList="getLineList"></locusMap>
      </p-tab-pane>
      <p-tab-pane key="3" tab="轨迹点" :forceRender="true">
        <t-table
          ref="pointTable"
          dragle
          bordered
          row-key="gpsDate"
          :id="$route.meta.menuId + '_pointList'"
          :scroll="{ x: true }"
          :columns="point_columns"
          :data-source.sync="pointDataSource"
          :remote-url="pointRemoteUrl"
          :remoteData="pointParams"
          :rowSelectType="false"
          :autoLoad="false"
        >
        </t-table>
      </p-tab-pane>
      <p-tab-pane key="4" tab="报警">
        <t-table
          ref="alertTable"
          dragle
          bordered
          row-key="id"
          :id="$route.meta.menuId + '_alertList'"
          :scroll="{ x: true }"
          :columns="alert_columns"
          :data-source.sync="alertDataSource"
          :remote-url="alertRemoteUrl"
          :remoteData="alertParams"
          :rowSelectType="false"
        >
        </t-table>
      </p-tab-pane>
    </p-tabs>
  </p-card>
</template>

<script>
import Edit from './edit.vue';
import locusMap from './locusMap.vue';
import { setPointColumns, setAlertColumns } from '../js/tableConfig.js';
import { alertRemoteUrl } from '../js/api.js';

export default {
  components: { Edit, locusMap },
  props: {
    editType: {
      type: String,
      default: '',
    },
    editData: {
      type: Object,
      default: () => ({}),
    },
    options: {
      type: Object,
      default: () => ({}),
    },
    mextendedField_list: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    typeTitle() {
      const dictionary = {
        edit: '修改',
        view: '查看',
      };
      return dictionary[this.editType] || this.editType;
    },
  },
  data() {
    return {
      activeKey: '1',

      point_columns: setPointColumns(this),
      pointDataSource: [],
      pointRemoteUrl: '',
      pointParams: {},

      alert_columns: setAlertColumns(this),
      alertDataSource: [],
      alertRemoteUrl,
      alertParams: {},
    };
  },
  mounted() {
    this.alertParams = {
      loadingBillId: this.editData.loadingBillId,
      // loadingBillId: 'ZCD0000002069',
    };
  },
  methods: {
    // 返回
    back() {
      this.$emit('back');
    },

    getLineList(list) {
      this.pointDataSource = list;
    },
  },
};
</script>