<template>
  <el-dialog
    title="行驶记录"
    :visible.sync="visible"
    width="1100px"
    append-to-body
    @close="handleClose"
  >
    <div class="record-container">
			<el-form size="small" :inline="true">
					<el-form-item label="车牌号" prop="vehicleNo">
					  <el-input
					    v-model="queryParams.vehicleNo"
					    placeholder="车牌号"
					  />
					</el-form-item>
					<el-form-item label="日期" prop="drivingDate">
					  <el-date-picker
					    v-model="queryParams.drivingDate"
					    style="width: 240px; margin-right: 8px"
					    type="daterange"
					    range-separator="至"
					    start-placeholder="开始日期"
					    end-placeholder="结束日期"
					    value-format="yyyy-MM-dd"
					    :clearable="false"
					  >
					  </el-date-picker>
					</el-form-item>
					<el-form-item>
					  <el-button
					    type="primary"
					    icon="el-icon-search"
					    size="mini"
					    @click="handleQuery"
					    >搜索</el-button
					  >
					  <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
					    >重置</el-button
					  >
					</el-form-item>
			 </el-form>
      <el-table :data="driveRecords" border style="width: 100%"  v-loading="loading">
        <el-table-column
          prop="vehicleNo"
          label="车牌号"
          align="center"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="vehicleGroup"
          label="所属车组"
          align="center"
          width="180"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="equipNo"
          label="设备号"
          align="center"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="equipNm"
          label="设备名称"
          align="center"
          width="150"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="startTm"
          label="开始时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="endTm"
          label="结束时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="mileage"
          label="行驶里程(km)"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            {{ scope.row.mileage || 0 }}
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="recordTotal > 0"
        :total="recordTotal"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </el-dialog>
</template>

<script>
import { vehicleDrivingRecordList } from "@/api/powerdistribution/vehicle-monitoring";
import moment from "moment";
export default {
  name: "DrivingRecord",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    vehicleInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
	  loading: true,
      driveRecords: [],
      recordTotal: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        vehicleNo: "",
        vehicleGroup: "",
		drivingDate: [
		  moment().endOf("day").format("YYYY-MM-DD"),
		  moment().endOf("day").format("YYYY-MM-DD"),
		],
      },
	 
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          vehicleNo: this.vehicleInfo.vehicleNo,
		  drivingDate: [this.vehicleInfo.eventStartDate,this.vehicleInfo.occurDate],
	      //drivingDate: this.vehicleInfo.monitorDate
          // vehicleGroup: this.vehicleInfo.vehicleGroup,
        };
        this.getList();
      }
    },
  },
  methods: {
    getList() {
	  this.loading = true;
      vehicleDrivingRecordList({
        ...this.queryParams,
		startTm: this.queryParams.drivingDate[0],
		endTm: this.queryParams.drivingDate[1],
      }).then((response) => {
        this.driveRecords = response.rows || [];
        this.recordTotal = response.total;
		this.loading=false;
      });
    },
	/** 搜索按钮操作 */
	handleQuery() {
	  this.getList();
	},
	resetQuery() {
	  this.queryParams = {
	    pageNum: 1,
	    pageSize: 10,
		vehicleNo: this.vehicleInfo.vehicleNo,
	    vehicleGroup: "",
		drivingDate: [
		 
		],
	  };
	  this.resetForm("queryForm");
	  this.handleQuery();
	},
    handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.record-container {
  min-height: 400px;
  padding: 10px;

  .mb20 {
    margin-bottom: 20px;
  }

  ::v-deep {
    .el-table {
      margin-bottom: 20px;
    }
  }
}
</style>
