<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="monitorDate">
					  <el-date-picker
					    v-model="queryParams.monitorDate"
					    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="alarmHistList" border style="width: 100%"  v-loading="loading">
        <el-table-column
          prop="vehicleNo"
          label="车牌号"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="occurDate"
          label="监测日期"
          align="center"
         width="100"
        ></el-table-column>
        <el-table-column
          prop="alarmDesc"
          label="车辆状态"
          align="center"
         width="250"
        ></el-table-column>
       
        <el-table-column
          prop="remark"
          label="描述"
          align="center"
        ></el-table-column>
       <el-table-column
         prop="createTime"
         label="统计时间"
         align="center"
		  width="180"
       ></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 { listVehicleAlarmHist } from "@/api/powerdistribution/vehicle-monitoring";
import moment from "moment";
export default {
  name: "AarmHist",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    vehicleInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
	  loading: true,
      alarmHistList: [],
      recordTotal: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        vehicleNo: "",
        vehicleGroup: "",
		monitorDate: [
		  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,
		  monitorDate: [
		   
		  ],
          // vehicleGroup: this.vehicleInfo.vehicleGroup,
        };
        this.getList();
      }
    },
  },
  methods: {
    getList() {
	  this.loading = true;
      listVehicleAlarmHist({
        ...this.queryParams,
		startDate: this.queryParams.monitorDate[0],
		endDate: this.queryParams.monitorDate[1],
      }).then((response) => {
        this.alarmHistList = response.rows || [];
        this.recordTotal = response.total;
		this.loading=false;
      });
    },
	/** 搜索按钮操作 */
	handleQuery() {
	  this.getList();
	},
	resetQuery() {
	  this.queryParams = {
	    pageNum: 1,
	    pageSize: 10,
		vehicleNo: this.vehicleInfo.vehicleNo,
	    vehicleGroup: "",
		monitorDate : [
		 
		],
	  };
	  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>
