<template>
  <div>
    <el-button type="success" @click="insert">添加围栏</el-button>

    <el-table :data="fenceData" style="width: 100%">


<!--      <el-table-column label="围栏编号" width="180">-->
<!--        <template slot-scope="scope">-->
<!--          <span>{{scope.row.fenceId}}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->


      <el-table-column label="围栏名称" width="180">
        <template slot-scope="scope">
          <span>{{scope.row.fenceName}}</span>
        </template>
      </el-table-column>


      <el-table-column label="行驶状态" width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.driveStatus===1">驶入</span>
          <span v-if="scope.row.driveStatus===2">驶出</span>
        </template>
      </el-table-column>

      <el-table-column label="围栏状态" width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.fenceStatus===0">停用</span>
          <span v-if="scope.row.fenceStatus===1">正常</span>
        </template>
      </el-table-column>

      <el-table-column label="围栏坐标" width="180">
        <template slot-scope="scope">
          <span>{{scope.row.fenceLocation}}</span>
        </template>
      </el-table-column>


      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="dialogVisible = true">编辑围栏</el-button>
          <el-button type="text">编辑</el-button>
          <el-button type="text">删除</el-button>
        </template>
      </el-table-column>


    </el-table>

    <el-dialog :visible.sync="dialogVisible" width="70%">
      <maps/>
    </el-dialog>


  </div>




</template>

<script>
import maps from '@/views/car/gaode.vue'
import {fenceList, insertFence} from "@/api/fence/add";
import log from "@/views/monitor/job/log.vue";
export default {
  name: "fence",
  data() {
    return {
      // tableData:[{
      //   fenceId:"2",
      //   fenceName:"区域1",
      //   driveStatus:1,
      //   fenceStatus:1
      // }],
      dialogVisible:false,
      //围栏列表
      fenceData:[],
      total:0,
      //查询多条件
      selectQuery:{
        pageNum:1,
        pageSize:5
      }
    };
  },
  components: {
      maps
  },

  methods: {
    insert() {
      insertFence(this.tableData).then(res =>{
        console.log(res)
      })
    },
    getFenceList() {
      fenceList(this.selectQuery).then(res =>{
        this.fenceData = res.data.rows
        this.total = res.data.total

      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.getFenceList();
  }
};
</script>



