<template>
  <div>
    <template>
      <el-form ref="form" :model="form" label-width="80px">
<!--        <el-form-item label="活动名称">-->
<!--          <el-input v-model="form.name"></el-input>-->
<!--        </el-form-item>-->
      </el-form>

      <el-button type="primary" @click="toAddFenceGroup">添加围栏组</el-button>

      <!--围栏组列表-->
      <el-table :data="fenceGroup" tooltip-effect="dark" style="width: 100%">


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

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

        <el-table-column label="状态" width="180">
          <template slot-scope="scope">
            <el-switch
              v-if="scope.row.groupStates ==0"
              v-model="groupStates"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
            <el-switch
              v-if="scope.row.groupStates ==1"
              v-model="groupStatestwo"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>

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

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="updateFenceGroupById(scope.row.groupId)" v-if="scope.row.groupStates ==0">禁用</el-button>
            <el-button size="mini" @click="activate(scope.row.groupId)" v-if="scope.row.groupStates ==1">启动</el-button>
            <el-button size="mini" @click="addGroup(scope.row.groupId)" v-if="scope.row.groupStates ==0">添加围栏</el-button>
            <el-button size="mini" @click="BoundFence(scope.row.groupId)" v-if="scope.row.groupStates ==0">查看绑定的围栏</el-button>
          </template>
        </el-table-column>

      </el-table>
    </template>
<!--多对多的添加-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="85%"
      :before-close="handleClose">

      <template>
        <el-table
          ref="multipleTable"
          :data="carFence"
          tooltip-effect="dark"
          :style="{width: tableWidth}" @selection-change="handleSelectionChange">

          <el-table-column
            type="selection"
            width="55">
          </el-table-column>

          <el-table-column
            label="围栏主键">
            <template slot-scope="scope">{{ scope.row.id }}</template>
          </el-table-column>
          <el-table-column
            label="围栏名称">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column
            label="业务类型">
            <template slot-scope="scope">{{ scope.row.clazzName }}</template>
          </el-table-column>
          <el-table-column
            label="围栏类型">
            <template slot-scope="scope">{{ scope.row.typeName }}</template>
          </el-table-column>
          <el-table-column
            label="围栏开始时间">
            <template slot-scope="scope">{{ scope.row.fenceCreate }}</template>
          </el-table-column>
          <el-table-column
            label="围栏结束时间">
            <template slot-scope="scope">{{ scope.row.fenceEnd }}</template>
          </el-table-column>
          <el-table-column
            label="创建时间">
            <template slot-scope="scope">{{ scope.row.fenceStart }}</template>
          </el-table-column>

        </el-table>
      </template>

      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addMiddls">确 定</el-button>
  </span>
    </el-dialog>

<!--//围栏组添加-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisibles"
      width="85%"
      :before-close="handleClose">

      <el-form ref="form" :model="fenceGroupAdd" label-width="100px">
        <el-form-item label="围栏组名称">
          <el-input v-model="fenceGroupAdd.groupName"></el-input>
        </el-form-item>

        <el-form-item label="围栏组状态">
          <el-switch
            v-model="fenceGroupAdd.groupStates"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>




      </el-form>

      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibles = false">取 消</el-button>
    <el-button type="primary" @click="doAddFenceGroup">确 定</el-button>
  </span>
    </el-dialog>

<!--已经绑定的围栏-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisibless"
      width="85%"
      :before-close="handleClose">
        <template>
          <el-table
            ref="multipleTable"
            :data="carFences"
            tooltip-effect="dark"
            :style="{width: tableWidth}">

            <el-table-column
              label="围栏主键">
              <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>

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

            <el-table-column
              label="业务类型">
              <template slot-scope="scope">{{ scope.row.clazzName }}</template>
            </el-table-column>

            <el-table-column
              label="围栏类型">
              <template slot-scope="scope">{{ scope.row.typeName }}</template>
            </el-table-column>

            <el-table-column
              label="围栏开始时间">
              <template slot-scope="scope">{{ scope.row.fenceCreate }}</template>
            </el-table-column>

            <el-table-column
              label="围栏结束时间">
              <template slot-scope="scope">{{ scope.row.fenceEnd }}</template>
            </el-table-column>

            <el-table-column
              label="创建时间">
              <template slot-scope="scope">{{ scope.row.fenceStart }}</template>
            </el-table-column>
          </el-table>
        </template>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibless = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibless = false">确 定</el-button>
      </span>
    </el-dialog>



  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {
  activate,
  addFenceGroup,
  addFenceGroupMidddle, BoundFenceGroup,
  group,
  selectCarFenceList,
  updateFenceGroupById
} from '@/api/electronic'
import log from '@/views/monitor/job/log.vue'

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

      return {
        //绑定的围栏列表
        carFences:[],

        groupStates:true,
        groupStatestwo:false,
        fenceGroupAdd:{
          groupStates:true
        },
        fenceGroup:[],
        dialogVisible: false,
        dialogVisibles: false,
        dialogVisibless: false,
        carFence:[],
        form:{},
        multipleSelection: [],
        fenceGroupId:'',
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      //根据围栏组的id查询绑定的围栏的中间表 并 获取围栏组绑定的围栏列表
      BoundFence(groupId){
        this.dialogVisibless = true
        BoundFenceGroup(groupId).then(res=>{

          this.carFences=res.data
        })
      },
      //启动围栏状态
      activate(groupId){
        activate(groupId).then(res=>{
          if (200 == res.code){
            this.$message.success("成功")
            this.group()
          }
        })
      },
      //修改围栏状态
      updateFenceGroupById(groupId){
        updateFenceGroupById(groupId).then(res=>{
          if (200 == res.code){
            this.$message.success("成功")
            this.group()
          }
        })
      },
      //多对多添加
      addMiddls(){
          addFenceGroupMidddle(this.fenceGroupId,this.multipleSelection).then(res=>{
            this.$modal.msgSuccess("成功");
            this.dialogVisible = false
            this.selectCarFenceList();
          })
      },
      //添加围栏组
      doAddFenceGroup(){
        if (this.fenceGroupAdd.groupStates = true){
          this.fenceGroupAdd.groupStates = 0
        }else {
          this.fenceGroupAdd.groupStates = 1
        }
        // console.log(this.fenceGroupAdd.groupStates)
        addFenceGroup(this.fenceGroupAdd).then(res=>{
          if (200 == res.code ){
            this.$message.success("成功");
            this.dialogVisibles=false
            this.group()
          }
        })
      },
      //开启围栏组添加对话框
      toAddFenceGroup(){
       this.dialogVisibles=true

      },
      //获取围栏组的id
      addGroup(id){
        this.multipleSelection = []
        this.fenceGroupId = id
        this.dialogVisible = true
      },
      //获取围栏的Id值 多对多
      handleSelectionChange(val) {
        this.multipleSelection = val;

      },
      //围栏组列表
      group(){
        group().then(res=>{
          // console.log(res)
          this.fenceGroup = res.data
        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //围栏列表
      selectCarFenceList(){
        selectCarFenceList(this.form).then(res=>{
          this.carFence=res.data.records
        })
      },


    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.group()
      this.selectCarFenceList();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
