<template>
    <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 label="行驶里程不为0" prop="vehicleNo">
					  <el-checkbox v-model="queryParams.greaterThanZero"></el-checkbox>
					</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-row :gutter="10" class="mb8">
			   <el-col :span="1.5">
			     <el-upload
			       :action="uploadUrl"
			       :headers="headers"
			       :data="uploadData"
			       name="file"
			       :show-file-list="false"
			       :before-upload="beforeUpload"
			       :on-success="handleSuccess"
			       :on-error="handleError"
			     >
			       <el-button type="primary" icon="el-icon-upload" size="mini"
			         >导入行驶记录</el-button
			       >
			     </el-upload>
			   </el-col>
			   <right-toolbar
			     :showSearch.sync="showSearch"
			     @queryTable="getList"
			   ></right-toolbar>
			 </el-row>
      <el-table :data="driveRecords" border style="width: 100%"  v-loading="loading">
	  <el-table-column prop="" label="序号" width="80" align="center">
		    <template slot-scope="scope">
		      {{
		        scope.$index +
		        (queryParams.pageNum - 1) * queryParams.pageSize +
		        1
		      }}
		    </template>
		  </el-table-column>
        <el-table-column
          prop="vehicleNo"
          label="车牌号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="vehicleGroup"
          label="所属车组"
          align="center"
          
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="equipNo"
          label="设备号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="equipNm"
          label="设备名称"
          align="center"
          :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-column
		  prop="createTime"
		  label="导入时间"
		  align="center"
		></el-table-column>
      </el-table>
	  
      <pagination
        v-show="recordTotal > 0"
        :total="recordTotal"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
</template>

<script>
import { vehicleDrivingRecordList2 } from "@/api/powerdistribution/vehicle-monitoring";
import moment from "moment";
import { getToken } from "@/utils/auth";
export default {
  name: "DrivingRecord",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
	// 文件类型, 例如['png', 'jpg', 'jpeg']
	fileType: {
	  type: Array,
	  default: () => ["csv"],
	},
    vehicleInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
	  loading: true,
      driveRecords: [],
      recordTotal: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        vehicleNo: "",
        vehicleGroup: "",
		greaterThanZero:false,
		drivingDate: [
		 
		],
      },
	  // 上传相关配置
	  uploadUrl:
	    process.env.VUE_APP_BASE_API +"/powerdistribution/vehicleDrivingRecord/import",
	  headers: {
	    Authorization: "Bearer " + getToken(),
	  },
	  uploadData: {
	    // 如果需要额外的参数可以在这里添加
	  },
	 
    };
  },
  // watch: {
  //   visible(val) {
  //     if (val) {
  //       this.queryParams = {
  //         pageNum: 1,
  //         pageSize: 10,
  //         vehicleNo: this.vehicleInfo.vehicleNo,
		//   drivingDate: [
		   
		//   ],
  //         // vehicleGroup: this.vehicleInfo.vehicleGroup,
  //       };
  //       this.getList();
  //     }
  //   },
  // },
  created() {
    this.getList();
  },
  methods: {
    getList() {
	  this.loading = true;
      vehicleDrivingRecordList2({
        ...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;
      });
    },
	/** 文件上传前的处理 */
	beforeUpload(file) {
	  // const isCsv =
	  //   file.type ===
	  //     "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
	  //   file.type === "application/vnd.ms-excel" ||
	  //   file.type === "text/csv";
	  // if (!isCsv) {
	  //   this.$message.error("只能上传CSV文件!");
	  //   return false;
	  // }
	  if (this.fileType) {
			const fileName = file.name.split('.');
			const fileExt = fileName[fileName.length - 1];
			const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
			if (!isTypeOk) {
			  this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
			  return false;
			}
		}
	  
	  const isLt5M = file.size / 1024 / 1024 < 5;
	  if (!isLt5M) {
	    this.$message.error("文件大小不能超过 5MB!");
	    return false;
	  }
	  return true;
	},
	/** 文件上传成功的处理 */
	handleSuccess(response, file) {
	  if (response.code === 200) {
	  this.$modal.msgSuccess("导入成功");
	  this.getList();
	  } else {
	    this.$modal.msgError(response.msg || "导入失败");
	  }
	},
	/** 文件上传失败的处理 */
	handleError(error) {
		alert(error)
	  this.$modal.msgError("导入失败，请重试");
	  console.error("上传失败:", error);
	},
	/** 搜索按钮操作 */
	handleQuery() {
	  this.getList();
	},
	resetQuery() {
	  this.queryParams = {
	    pageNum: 1,
	    pageSize: 10,
		vehicleNo: "",
	    vehicleGroup: "",
		greaterThanZero:false,
		drivingDate: [
		 
		],
	  };
	  this.resetForm("queryForm");
	  this.handleQuery();
	},
  },
};
</script>

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

  .mb20 {
    margin-bottom: 20px;
  }

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