<template>
  <div>
    <template>
      <el-table
        ref="multipleTable"
        :data="carFenceGroup"
        tooltip-effect="dark"
        :style="{width: tableWidths}"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="100px">
        </el-table-column>

        <el-table-column
          label="Id">
          <template slot-scope="scope" >
            {{scope.row.id}}
          </template>

        </el-table-column>

        <el-table-column
          label="优先级">
          <template slot-scope="scope">{{ scope.row.priority }}</template>
        </el-table-column>

        <el-table-column
          label="启动状态">
          <template slot-scope="scope" >
            <span v-if="scope.row.status==='1'">禁用</span>
            <span v-if="scope.row.status==='2'">启用</span>
          </template>

        </el-table-column>
        <el-table-column
          label="围栏组类型">
          <template slot-scope="scope">
            <span v-if="scope.row.groupType==='1'">驶出</span>
            <span v-if="scope.row.groupType==='2'">驶入</span>
          </template>

        </el-table-column>

        <el-table-column
          label="操作">
          <template slot-scope="scope">
<!--            <el-button type="primary" @click=""></el-button>-->
            <el-button type="text" @click="carFenceGroupList(scope.row)">查看绑定围栏</el-button>
            <el-button type="text" @click="carFenceGroupDel(scope.row)">解除绑定</el-button>
          </template>
        </el-table-column>

      </el-table>
    </template>
    <el-button @click="drawerKey" type="primary" style="margin-left: 10px; text-align: right">
      绑定围栏组
    </el-button>
    <el-drawer
      title="选择围栏"
      :visible.sync="drawer"
      :with-header="false"
      size="60%">
      <span>
        <template>
      <el-table
        ref="multipleTable"
        :data="carFence"
        tooltip-effect="dark"
        :style="{width: tableWidths}"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="100px">
        </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>
        <el-button @click="drawer = false">取 消</el-button>
        <el-button type="primary" @click="addCarFenceGroup">确 定</el-button>
      </span>

    </el-drawer>


    <el-drawer
      title="围栏展示"
      :visible.sync="table"
      direction="rtl"
      size="60%">
        <el-table
          ref="multipleTable"
          :data="carFenceList"
          tooltip-effect="dark"
          :style="{width: tableWidths}">
          <el-table-column
            label="围栏ID">
            <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.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-column
            label="优先级">
            <template slot-scope="scope">{{ scope.row.priority }}</template>
          </el-table-column>

          <el-table-column
            label="启动状态">
            <template slot-scope="scope" >
              <span v-if="scope.row.status==='1'">禁用</span>
              <span v-if="scope.row.status==='2'">启用</span>
            </template>

          </el-table-column>

          <el-table-column
            label="围栏组类型">
            <template slot-scope="scope">
              <span v-if="scope.row.groupType==='1'">驶出</span>
              <span v-if="scope.row.groupType==='2'">驶入</span>
            </template>

          </el-table-column>

          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="carFenceGroupDels(scope.row)">解除绑定</el-button>
            </template>

          </el-table-column>
        <el-button @click="table = false">关闭</el-button>
      </el-table>
    </el-drawer>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {
  carAddFenceList,
  carAddList, carFenceGroupDel,
  carFenceGroupList,
  carMiddleGroupList,
  selectCarFenceList
} from '@/api/electronic'

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

    return {
      table: false,
      form:{},
      carFence:[],
      drawer:false,
      carFenceGroup:[],
      tableWidths:'100%',
      fenceGroup:[],
      carGroupReq:{
        carFenceGroups:[],
        carFences:[],
      },
      carFenceList:[],
      carGroupIs:{
        ids:0,
        id:0
      },

    }
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    carFenceGroupDels(row){
      this.carGroupIs.id=row.id
      var carGroupId={
        "ids":this.carGroupIs.ids,
        "id":row.id
      }
      console.log(carGroupId)
      carFenceGroupDel(carGroupId).then(res=>{
        this.$modal.msgSuccess(res.msg);
        this.table=false
      })
    },
    carFenceGroupDel(row){
      this.carGroupIs.ids=row.id
      this.table=true
      carFenceGroupList(row.id).then(res=>{
        this.carFenceList=res.data
        this.$modal.msgSuccess(res.msg);
      })
    },

    carFenceGroupList(row){
      this.table=true
      carFenceGroupList(row.id).then(res=>{
        this.carFenceList=res.data
        this.$modal.msgSuccess(res.msg);
      })
    },
    addCarFenceGroup(){
      console.log(this.carGroups)
      console.log(this.selectedCarIds)
      this.carGroupReq.carFences=this.carFenceGroup
      var carGroupReq={
        "carFences":this.carFenceGroup,
        "carFenceGroups":this.selectedCarIds
      }
      console.log(carGroupReq)
      carAddFenceList(carGroupReq).then(res=>{
          this.$modal.msgSuccess(res.msg);
          this.drawe=false
    })
    },
    drawerKey(){
      this.carGroupReq.carFenceGroups=this.selectedCarIds
      this.drawer=true
      this.selectCarFenceList()
    },
    selectCarFenceList(){
      selectCarFenceList(this.form).then(res=>{
        this.carFence=res.data.records
      })
    },
    handleSelectionChange(val) {
      console.log(val)
      this.selectedCarIds = val;
    },
    carMiddleGroupList(){
      carMiddleGroupList().then(res=>{
        this.carFenceGroup=res.data
      })
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.carMiddleGroupList()

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

</style>
