<template>
  <div class="AuHiViewBody">

    <span style="margin-right:50px;font-size:20px;font-family: '微软雅黑';font-weight:600;">车辆登记信息表</span>
    <el-button type="primary" @click="formOpen('add')">增加车辆</el-button>

    <div class="AuHiBottom">
      <template>
        <el-table :data="carRegistrationData" height="700" border style="width: 100%">
          <el-table-column prop="car_id" label="车牌号" align="center"></el-table-column>
          <el-table-column prop="type" label="车类型" align="center"></el-table-column>
          <el-table-column prop="name" label="负责人" align="center"></el-table-column>
          <el-table-column prop="gnss_id" label="gnss编号" align="center"></el-table-column>
          <el-table-column prop="note" label="备注" align="center"></el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button @click="formOpen('change',scope.row)" type="text">编辑</el-button>
              <el-button type="text" @click="deleteFormOpen(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <el-dialog :title="formTitle" :visible.sync="formVisible" width="30%">
      <el-form ref="form" :model="formData" label-width="80px">
        <el-form-item label="车牌号">
          <el-input v-model="formData.car_id" :disabled="inpDisable"></el-input>
        </el-form-item>
        <el-form-item label="车类型">
          <el-input v-model="formData.type"></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="gnss编号">
          <el-input v-model="formData.gnss_id"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formData.note"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="formSave()">确 定</el-button>
        <el-button @click="formcancel()">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog title="你确定删除吗？" :visible.sync="deleteVisible" width="30%">
      <el-button type="danger" @click="agreeDelete()">删除</el-button>
      <el-button @click="cancelDelete()">取消</el-button>
    </el-dialog>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      formTitle:"",
      formType:"",
      carRegistrationData:[{
        car_id: '鲁A45454',
        type: '马自达',
        name: '王一',
        gnss_id: '19919191919',
        note: '无',
      },{
        car_id: '鲁A48888',
        type: '马自达',
        name: '王一',
        gnss_id: '19919191919',
        note: '无',
      },{
        car_id: '鲁A66666',
        type: '马自达',
        name: '王一',
        gnss_id: '19919191919',
        note: '无',
      },{
        car_id: '鲁A11111',
        type: '马自达',
        name: '王一',
        gnss_id: '19919191919',
        note: '无',
      },{
        car_id: '鲁A77777',
        type: '马自达',
        name: '王一',
        gnss_id: '19919191919',
        note: '无',
      },{
        car_id: '鲁A0000',
        type: '马自达',
        name: '王一',
        gnss_id: '19919191919',
        note: '无',
      },],
      formVisible:false,
      formData: {
        car_id: '',
        type: '',
        name: '',
        gnss_id: '',
        note: '',
      },
      inpDisable:false,
      deleteVisible:false,
    }
  },
  methods:{
    formOpen(type,row){
      this.formData = {car_id: '',type: '',name: '',gnss_id: '',note: '',};
      this.formVisible = true;
      this.formType = type;
      if(this.formType === "add"){
        this.formTitle = "增加车辆";
        this.inpDisable = false;
      }else if(this.formType === "change"){
        this.formTitle = "修改车辆";
        this.inpDisable = true;
        this.formData = {...row};
      }
    },
    formSave(){
      if(this.formType === "add"){
        if(this.formData.name === ""){
          alert("车牌号不得为空！");
          return;
        }
        this.carRegistrationData.unshift(this.formData);
        this.formVisible = false;
        this.formData = {car_id: '',type: '',name: '',gnss_id: '',note: '',};
      }else if(this.formType === "change"){
        const that = this;
        const newData = [];
        this.carRegistrationData.forEach(function(item){
          if(item.car_id === that.formData.car_id){
            newData.push(that.formData);
          }else{
            newData.push(item);
          }
        })
        this.carRegistrationData = newData;
        this.formVisible = false;
        this.formData = {car_id: '',type: '',name: '',gnss_id: '',note: '',};
      }
    },
    formcancel(){
      this.formVisible = false;
      this.formData = {car_id: '',type: '',name: '',gnss_id: '',note: '',};
    },
    deleteFormOpen(row){
      console.log(row);
      this.deleteVisible = true;
      this.formData = {...row};
    },
    agreeDelete(){
      const that = this;
      const newData = [];
      this.carRegistrationData = that.carRegistrationData.forEach(function(item){
        if(item.car_id === that.formData.car_id){
          return;
        }else{
          newData.push(item);
        }
      })
      this.carRegistrationData = newData;
      this.deleteVisible = false;
      this.formData = {car_id: '',type: '',name: '',gnss_id: '',note: '',};
    },
    cancelDelete(){
      this.deleteVisible = false;
      this.formData = {car_id: '',type: '',name: '',gnss_id: '',note: '',};
    }
  }
}
</script>

<style scoped>
.AuHiViewBody{
  width: 100%;
  height: 100%;
  background-color: rgb(245,246,251);
  padding: 30px;
  box-sizing: border-box;
}
.AuHiTop{
  background-color: white;
  border-radius: 10px;
  padding: 18px 20px;
  box-sizing: border-box;
}
.AuHiBottom{
  width: 100%;
  background-color: white;
  padding: 30px;
  box-sizing: border-box;
  height: 750px;
  margin-top: 20px;
}
.el-input{
  width: 80%;
}
</style>