<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="equipmentData" height="700" border style="width: 100%">
          <el-table-column prop="gnss_id" label="出厂编号" align="center"></el-table-column>
          <el-table-column prop="type" label="类别" align="center"></el-table-column>
          <el-table-column prop="model" label="型号" align="center"></el-table-column>
          <el-table-column prop="solution" label="解算频率" align="center"></el-table-column>
          <el-table-column prop="level" label="水平位移" align="center"></el-table-column>
          <el-table-column prop="vertical" label="竖向位移" align="center"></el-table-column>
          <el-table-column prop="manufacturer" label="生产厂家" align="center"></el-table-column>
          <el-table-column prop="antenna" 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.gnss_id" :disabled="inpDisable"></el-input>
        </el-form-item>
        <el-form-item label="类别">
          <template>
            <el-radio v-model="formData.type" label="移动站">移动站</el-radio>
            <el-radio v-model="formData.type" label="基准站">基准站</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="型号">
          <el-input v-model="formData.model"></el-input>
        </el-form-item>
        <el-form-item label="解算频率">
          <el-input v-model="formData.solution"></el-input>
        </el-form-item>
        <el-form-item label="水平位移">
          <el-input v-model="formData.level"></el-input>
        </el-form-item>
        <el-form-item label="竖向位移">
          <el-input v-model="formData.vertical"></el-input>
        </el-form-item>
        <el-form-item label="生产厂家">
          <el-input v-model="formData.manufacturer"></el-input>
        </el-form-item>
        <el-form-item label="设备天线">
          <el-input v-model="formData.antenna"></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:"",
      equipmentData:[{
        gnss_id: '111111111',
        type: '移动站',
        model: '11',
        solution: '454545',
        level: '22米',
        vertical: '33米',
        manufacturer: '晶合',
        antenna: '511111'
      },{
        gnss_id: '22222222',
        type: '基准站',
        model: '11',
        solution: '454545',
        level: '22米',
        vertical: '33米',
        manufacturer: '晶合',
        antenna: '511111'
      },{
        gnss_id: '33333333',
        type: '移动站',
        model: '11',
        solution: '454545',
        level: '22米',
        vertical: '33米',
        manufacturer: '晶合',
        antenna: '511111'
      },{
        gnss_id: '4444444',
        type: '基准站',
        model: '11',
        solution: '454545',
        level: '22米',
        vertical: '33米',
        manufacturer: '晶合',
        antenna: '511111'
      },{
        gnss_id: '55555555',
        type: '移动站',
        model: '11',
        solution: '454545',
        level: '22米',
        vertical: '33米',
        manufacturer: '晶合',
        antenna: '511111'
      },{
        gnss_id: '66666666',
        type: '基准站',
        model: '11',
        solution: '454545',
        level: '22米',
        vertical: '33米',
        manufacturer: '晶合',
        antenna: '511111'
      },{
        gnss_id: '7777777',
        type: '移动站',
        model: '11',
        solution: '454545',
        level: '22米',
        vertical: '33米',
        manufacturer: '晶合',
        antenna: '511111'
      },{
        gnss_id: '8888888',
        type: '基准站',
        model: '11',
        solution: '454545',
        level: '22米',
        vertical: '33米',
        manufacturer: '晶合',
        antenna: '511111'
      },{
        gnss_id: '9999',
        type: '移动站',
        model: '11',
        solution: '454545',
        level: '22米',
        vertical: '33米',
        manufacturer: '晶合',
        antenna: '511111'
      },],
      formVisible:false,
      formData: {
        gnss_id: '',
        type: '移动站',
        model: '',
        solution: '',
        level: '',
        vertical: '',
        manufacturer: '',
        antenna:''
      },
      inpDisable:false,
      deleteVisible:false,
    }
  },
  methods:{
    formOpen(type,row){
      this.formData = {gnss_id: '',type: '移动站',model: '',solution: '',level: '',vertical: '',manufacturer: '',antenna:''};
      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.gnss_id === ""){
          alert("出厂编号不得为空！");
          return;
        }
        this.equipmentData.unshift(this.formData);
        this.formVisible = false;
        this.formData = {gnss_id: '',type: '移动站',model: '',solution: '',level: '',vertical: '',manufacturer: '',antenna:''};
      }else if(this.formType === "change"){
        const that = this;
        const newData = [];
        this.equipmentData.forEach(function(item){
          if(item.gnss_id === that.formData.gnss_id){
            newData.push(that.formData);
          }else{
            newData.push(item);
          }
        })
        this.equipmentData = newData;
        this.formVisible = false;
        this.formData = {gnss_id: '',type: '移动站',model: '',solution: '',level: '',vertical: '',manufacturer: '',antenna:''};
      }
    },
    formcancel(){
      this.formVisible = false;
      this.formData = {gnss_id: '',type: '移动站',model: '',solution: '',level: '',vertical: '',manufacturer: '',antenna:''};
    },
    deleteFormOpen(row){
      console.log(row);
      this.deleteVisible = true;
      this.formData = {...row};
    },
    agreeDelete(){
      const that = this;
      const newData = [];
      this.equipmentData = that.equipmentData.forEach(function(item){
        if(item.gnss_id === that.formData.gnss_id){
          return;
        }else{
          newData.push(item);
        }
      })
      this.equipmentData = newData;
      this.deleteVisible = false;
      this.formData = {gnss_id: '',type: '移动站',model: '',solution: '',level: '',vertical: '',manufacturer: '',antenna:''};
    },
    cancelDelete(){
      this.deleteVisible = false;
      this.formData = {gnss_id: '',type: '移动站',model: '',solution: '',level: '',vertical: '',manufacturer: '',antenna:''};
    }
  }
}
</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>