<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-select v-model="query.number" placeholder="车牌号" style="width:180px;">
					<el-option v-for="(obj,index) in carInforSelectList" :label="obj.number" :value="obj.number" :key="index"></el-option>
				</el-select>

				<label class="el-form-item-label" style="font-weight: 500;">司机姓名</label>
				<el-select v-model="query.driver" placeholder="司机姓名" style="width:180px;">
					<el-option v-for="(obj,index) in driverInforSelectList" :label="obj.name" :value="obj.name" :key="index"></el-option>
				</el-select>

				<label class="el-form-item-label" style="font-weight: 500;">车辆类型</label>
				<el-select v-model="query.carclass" placeholder="请选择卡车类型" style="width:180px;">
					<el-option v-for="(obj,index) in carTypeData" :label="obj.name" :value="obj.name" :key="index"></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="equipmentNumber" label="设备编号" align="center"></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 prop="carType" label="车辆类型" align="center"></el-table-column>
                <el-table-column prop="alarmType" label="报警类型" align="center" :formatter="baojingleixingChange"></el-table-column>
                <el-table-column prop="alarmArea" label="报警区域" align="center"></el-table-column>
                <el-table-column prop="bjTime" label="报警时间" align="center"></el-table-column>
								<el-table-column label="操作" align="center">
									<template slot-scope="scope">
                    <el-button style="margin:0" type="primary" icon="el-icon-close-notification" @click="toEdit(scope.row)"></el-button>
									</template>
								</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>

		<!-- 表单渲染 -->
    <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelForm" :visible.sync="editVisible" title="解除报警" width="500px">
      <el-form :model="formData" :rules="rules" ref="formViewRef" :inline="true" label-width="180px">
        <el-form-item label="解除时长（h）：" class="form-cell" prop="jcHours" style="width:100%">
          <div class="cell-box">
            <el-input v-model="formData.jcHours" class="cell-input" type="number"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="报警原因：" class="form-cell" prop="bjReason">
          <div class="cell-box">
            <el-input v-model="formData.bjReason" class="cell-input"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="解除报警原因：" class="form-cell" prop="jcbjReason">
          <div class="cell-box">
            <el-input v-model="formData.jcbjReason" class="cell-input"></el-input>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="cancelForm">取消</el-button>
        <el-button type="primary" @click="submitForm('formViewRef', formData)">确认</el-button>
      </div>
    </el-dialog>

	</div>
</template>

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

export default {
	name: 'CallPolice',
	components: {},
	data() {
		return {
			loading: false,
      editVisible: false,
			page: 1,
			size: 10,
			total: 0,
			query:{},
			tableData: [],
			selectList:[],
			//车辆类型数据
			carTypeData:[],
			//车辆信息数据
			carInforSelectList:[],
			//司机信息数据
			driverInforSelectList:[],
      formData: {
        id: null,
        jcHours: 2,
        bjReason: '',
        jcbjReason: '',
      },
			rules: {
			},
		}
	},
	mounted() {
		this.loadData();
	},
	methods: {
		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.cpGetRealTimeAlarm(param).then((res) => {
          this.loading = false;
          this.tableData = res.data.records;
          this.total = res.data.total;
				})
				//获取车辆类型
				HttpReq.truckDispatching.carTypeQuery({size:9999}).then((res) => {
					if(res.code == 200){
						this.carTypeData = res.data.content;
					}
				})
				//获取车辆信息
				HttpReq.truckDispatching.carInformationQuery({size:9999}).then((res) => {
					if(res.code == 200){
						this.carInforSelectList = res.data.content;
					}
				})
				//获取司机人员信息
				HttpReq.truckDispatching.driverManagementPCQuery({size:9999}).then((res) => {
					if(res.code == 200){
						this.driverInforSelectList = res.data.content;
					}
				})
			})
		},

		cancelForm(a, b, c){
			this.editVisible = false;
		},
		// 点击搜索
		toSearch() {
			this.page = 1;
			this.loadData();
		},
		// 重置搜索
		clearLimit(){
			this.query = {};
			this.loadData()
		},
    toEdit(item) {
      this.editVisible = true;
      this.formData = {
        id: item.id,
        jcHours: 2,
        bjReason: '',
        jcbjReason: '',
      }
    },
		pageChange(e) {
			this.page = e
			this.loadData()
		},
		sizeChange(e) {
			this.page = 1
			this.size = e
			this.loadData()
		},
    submitForm(validateName, item) {
      this.$refs[validateName].validate(valid => {
        if (valid) {
          HttpReq.truckDispatching.cpPutRealTimeAlarm(item).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: 'success'
              });
              this.cancelForm();
              this.loadData()
            }
          })
        }
      });
    },
		baojingleixingChange(row){
			return row.alarmType == '1' ? '限入电子围栏报警' : row.alarmType == '2' ? '限出电子围栏报警' : row.alarmType == '3' ? '无故停车报警' : row.alarmType == '4' ? '防碰撞报警' : '其他报警';
		}
	}
}
</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>
