<template>
	<div class="common-page device-manage">

		<div class="option page-row">
			<!--工具栏-->
			<div class="head-container">

				<label class="el-form-item-label" style="font-weight: 500;">车牌号</label>
        <el-input v-model="query.carNumber" clearable size="small" placeholder="请输入车牌号" style="width:180px;"/>
				<label class="el-form-item-label" style="font-weight: 500;">司机姓名</label>
        <el-input v-model="query.carNumber" clearable size="small" placeholder="请输入姓名" style="width:180px;"/>
				<label class="el-form-item-label" style="font-weight: 500;">报警类型</label>
        <el-select v-model="query.alarmType" placeholder="请选择">
          <el-option v-for="item in stuOpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <label class="el-form-item-label" style="font-weight: 500;">日期范围</label>
        <el-date-picker
          v-model="query.timeList"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
				<el-button size="mini" type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
				<el-button size="mini" icon="el-icon-refresh" @click="clearLimit">重置</el-button>
			</div>
		</div>

    	<!-- 表格 -->
		<div class="panel-bottom page-row">
			<h3>报警管理</h3>
			<div class="ctin-box">
				<div class="content-within">
					<div class="content-fix">
						<div class="toolbar">
							<!-- <el-button size="mini" type="primary" icon="el-icon-plus" @click="toAdd">新增</el-button> -->
						</div>
						<div class="content">
							<el-table :data="tableData" v-loading="loading" border style="width:auto" height="64vh">
<!--								<el-table-column prop="name" label="设备编号" align="center"></el-table-column>-->
                <el-table-column type="index" width="50" :index="indexMethod"></el-table-column>
                <el-table-column prop="carNumber" label="车牌号" align="center"></el-table-column>
                <el-table-column prop="driver" label="司机" align="center"></el-table-column>
                <el-table-column label="状态" align="center">
                  <template slot-scope="scope">
                    <span v-show="scope.row.status===1">报警</span>
                    <span v-show="scope.row.status!==1">解除报警</span>
                  </template>
                </el-table-column>
                <el-table-column prop="alarmType" label="报警类型" align="center" :formatter="baojingleixingChange"></el-table-column>
                <el-table-column prop="alarmTime" label="报警时间" align="center"></el-table-column>
                <el-table-column prop="bjReason" label="报警原因" align="center"></el-table-column>
								<el-table-column prop="jcbjTime" label="解除报警时间" align="center"></el-table-column>
								<el-table-column prop="jcbjReason" label="解除报警原因" align="center"></el-table-column>
							</el-table>
							<!--分页组件-->
							<el-pagination :total="total" :current-page="page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';

export default {
	name: 'CallPoliceLog',
	components: {},
	data() {
		return {
			loading: false,
			page: 1,
			size: 10,
			total: 0,
			query:{},
			tableData: [],
      stuOpts: [
        {label: '全部', value: undefined},
        {label: '限入电子围栏报警', value: 1},
        {label: '限出电子围栏报警', value: 2},
        {label: '无故停车报警', value: 3},
        {label: '防碰撞报警', value: 4},
      ],
		}
	},
	mounted() {
		this.loadData();
	},
	methods: {
    baojingleixingChange(row){
      return row.alarmType == '1' ? '限入电子围栏报警' : row.alarmType == '2' ? '限出电子围栏报警' : row.alarmType == '3' ? '无故停车报警' : row.alarmType == '4' ? '防碰撞报警' : '其他报警';
    },
    indexMethod(index) {
      return 1+index+this.page*this.size-this.size;
    },
		loadData() {
			var param = {...this.query};
			param.page = this.page - 1;
			param.pageSize = this.size;
			param.sort = 'alarmTime,desc';
      param.startTime = undefined;
      param.endTime = undefined;
      if(param.timeList && param.timeList.length){
        param.startTime = param.timeList[0];
        param.endTime = param.timeList[1];
      }
			this.$nextTick(()=>{
				HttpReq.truckDispatching.cpGetAlarmHistory(param).then((res) => {
					this.loading = false;
					this.tableData = res.data.records;
          this.total = res.data.total;
				})
			})

		},
		cancelForm(a, b, c){
			this.form.visible = false;
		},
		// 点击搜索
		toSearch() {
			this.page = 1;
			this.loadData();
		},
		// 重置搜索
		clearLimit(){
			this.query = {};
			this.loadData()
		},
		toDelete(item) {
			var id = item.id;
			this.$confirm('确认删除该条数据吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then((e) => {
				this.reqRemoveProject([id])
			}).catch((e) => {})
		},
		pageChange(e) {
			this.page = e
			this.loadData()
		},
		sizeChange(e) {
			this.page = 1
			this.size = e
			this.loadData()
		},
	}
}
</script>

<style rel="stylesheet/scss" lang="scss" scope>
	.el-table .warning-row {
		background: oldlace;
	}
	.el-table .success-row {
		background: #f0f9eb;
	}

	.device-manage{
		.panel-bottom{
			.el-button{margin:2px 0;padding:6px 15px;font-size:14px;}
			.btn-groub2{
				display:inline-block;
				.el-button{margin:2px 0;padding:6px 15px;font-size:15px;}
				.el-button--warning {
					background-color: #e6a23c;
					border-color: #e6a23c;
				}
				.el-button--warning:focus,.el-button--warning:hover{background:#ebb563;border-color:#ebb563;}
			}
		}
	}

	.ecahrt1-dialog{
		display:flex;align-items:center;
		.el-dialog{
			margin-top:inherit !important;display:table !important;width:fit-content;
			.el-form-item{margin-right:0;}
		}

		.el-dialog__header{height:0;padding:0;display:block;}
		.form-body{
			border:1px solid #999;width:800px;height:500px;position:relative;
			>div{position:absolute;top:0;left:0;height:100%;width:100%;}
		}
	}
</style>
