<template>
  <div>

    <h2>电子围栏</h2>
    <el-table :data="tableData" style="width: 100%">

      <el-table-column label="围栏标签主键id" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.fenceTagId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="围栏标签名称" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.fenceTagName}}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建人" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.createdBy }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.createdTime}}</span>
        </template>
      </el-table-column>

      <el-table-column label="更新人" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{scope.row.updatedBy}}</span>
        </template>
      </el-table-column>

      <el-table-column label="更新时间" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{scope.row.updatedTime}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="420">
        <template slot-scope="scope">
          <el-button type="primary" @click="selectIdFence(scope.row)">查看围栏所属</el-button>

          <!--      查看这个标签下所属的围栏-->
          <el-dialog title="电子围栏" :visible.sync="dialogTableVisible" style="text-align: center">
            <el-table :data="gridData" style="width: 1000px">
              <el-table-column label="围栏主键id" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.fenceId }}</span>
                </template>
              </el-table-column>
              <el-table-column label="围栏名称" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.fenceName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="围栏数据" width="210">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.fenceData }}</span>
                </template>
              </el-table-column>
              <el-table-column label="围栏状态" width="180">
                <template slot-scope="scope">
                  <i v-if="scope.row.status==1">
                    已开启
                  </i>
                  <i v-if="scope.row.status==0">
                    未开启
                  </i>
                </template>
              </el-table-column>
              <el-table-column label="告警类型" width="180">
                <template slot-scope="scope">
                  <i v-if="scope.row.alarmType==1">
                    驶出警告
                  </i>
                  <i v-if="scope.row.alarmType==0">
                    驶入警告
                  </i>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="110">
                <template slot-scope="scope">
                  <i v-if="scope.row.fenceData==null">
                    <el-button type="text" @click="gotoFence(scope.row)">绘制围栏</el-button>
                  </i>
                </template>
              </el-table-column>
            </el-table>
          </el-dialog>

          <!--                <el-input v-model="form.fenceData" autocomplete="off"></el-input>-->

          <el-button type="primary" @click="openInsert(scope.row)">添加所属围栏</el-button>
          <!--      添加这个标签下所属的围栏-->
          <el-dialog title="添加围栏" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="围栏名称" :label-width="formLabelWidth">
                <el-input v-model="form.fenceName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="围栏状态" :label-width="formLabelWidth">
                <el-select v-model="form.status" placeholder="请选择围栏状态">
                  <el-option label="未开启" value="0"></el-option>
                  <el-option label="已开启" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="报警类型" :label-width="formLabelWidth">
                <el-select v-model="form.alarmType" placeholder="请选择报警类型">
                  <el-option label="驶入警告" value="0"></el-option>
                  <el-option label="驶出警告" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="insertFence">确 定</el-button>
            </div>
          </el-dialog>

        </template>
      </el-table-column>


    </el-table>

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import { list,selectIdFenceList,insertFenceObject } from "@/api/system/fence";

export default {
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"

      return {
        gridData: [],
        dialogTableVisible: false,
        dialogFormVisible: false,
        form:{
          fenceName: null,
          fenceData: null,
          status: null,
          alarmType: null,
          fenceTagId: null,
        },
        tableData:[],
        formLabelWidth: '320px',
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      FenceTagList() {
        list().then(res => {
          console.log(res.data)
          this.tableData=res.data
        })
      },
      selectIdFence(val) {
      this.dialogTableVisible = true
        selectIdFenceList(val.fenceTagId).then(res=>{
          this.gridData=res.data
        })
      },
      openInsert(val) {
        this.dialogFormVisible=true
        this.form.fenceTagId=val.fenceTagId
        console.log(this.form)
      },
      insertFence() {
        this.dialogFormVisible = false
        console.log(this.form)
        insertFenceObject(this.form).then(res=>{
          alert(res.msg);
        })
      },
      gotoFence(val){
        this.$router.push({path:('/electronicFence/MapContainer'), query:{fenceId:val.fenceId}})
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.FenceTagList();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>
#container {
  width: 100%;
  height: 850px;
}
</style>
