<template>
  <div>
    <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>
    <router-link :to="'/carFence/fence-MapContainer/'+0" class="link-type">
      <span>添加围栏</span>
    </router-link>
<!--    <el-button type="text" @click="addCarGroupList">绑定围栏组</el-button>-->

    <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-column
          label="操作">
          <template slot-scope="scope">
              <router-link :to="'/carFence/fence-MapContainer/'+scope.row.id" class="link-type">
                <span>查看地图</span>
              </router-link>
            <el-button type="text" @click="addCarList">绑定车辆</el-button>
            <el-button type="text" @click="carGroupList(scope.row)">查看绑定车辆</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- Table -->
    <el-dialog title="车辆绑定" :visible.sync="dialogFormVisible">
      <template>
        <el-table
          ref="multipleTable"
          :data="carInformationIdAndLicensePlate"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChanges">
          <el-table-column
            type="selection"
            width="100px">
          </el-table-column>
          <el-table-column
            label="车辆名称"
            width="100px">
            <template slot-scope="scope">{{ scope.row.carInformationLicensePlate }}</template>
          </el-table-column>
        </el-table>
      </template>
      <el-button type="primary" @click="carMiddleGroupList">选择围栏组</el-button>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="carAddList">确 定</el-button>
      </div>
    </el-dialog>

    <el-drawer
      title="绑定车辆"
      :visible.sync="drawercc"
      :with-header="false"
      size="60%">
      <span>
        <template>
      <el-table
        ref="multipleTable"
        :data="carGroupShow"
        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">
            <span>{{ scope.row.carInformationLicensePlate }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="围栏经纬度">
          <template slot-scope="scope">
            <span>{{ scope.row.fenceText }}</span>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button type="primary" @click="carDel(scope.row)">解绑车辆</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCarFenceGroup">确 定</el-button>
      </span>
    </el-drawer>

    <el-drawer
      title="选择围栏组"
      :visible.sync="drawer"
      :with-header="false">
      <span>
<!--        <el-button type="primary" @click="carMiddleGroupList">选择围栏组</el-button>-->
    <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="优先级">
          <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">
            <span>{{scope.row.carInformationLicensePlate}}</span>
          </template>
        </el-table-column>

        <el-table-column
        label="围栏经纬度">
          <template slot-scope="scope">
            <span>{{scope.row.fenceText}}</span>
          </template>

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

        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCarFenceGroup">确 定</el-button>
      </span>
    </el-drawer>
  </div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {
  carAddList, carDel, carGroupList,
  carMiddleGroupList,
  selectCarFenceList,
  selectCarInformationIdAndLicensePlate
} from '@/api/electronic'

export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"
    return {
      //設置围栏组
      drawer: false,
      //围栏组【】
      carFenceGroup:[],
      //车辆围栏组
      // carGroup:[],
      carGroups:[],
      // carFenceGroups:{},
      // dialogFormVisibleCarMiddleGroup : false,
      // carMiddle:{},
      carInformationIdAndLicensePlate:[],
      // 用于存储选中的用户ID
      selectedCarIds: [],
      dialogFormVisible: false,
      // dialogFormVisibles: false,
      formLabelWidth: '120px',
      show: true,
      form:{},
      carFence:[],
      tableWidths: '100%',
      carMiddleGroup:[],
      carGroupReq:{
        carFenceGroups:[],
        carInformations:[],
      },
      carGroupShow:[],
      drawercc:false,
      CarFenceGroupReq:{
        id:0,
        carId:0
      },
      carFenceDel:{}
    }
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    carDel(row){
      this.CarFenceGroupReq.id=row.id
      this.CarFenceGroupReq.carId=row.carInformationId
      carDel(this.CarFenceGroupReq).then(res=>{
        this.$modal.msgSuccess(res.msg);
        this.drawercc=false
      })
    },
    carGroupList(row){
      this.CarFenceGroupReq.id=row.id
      this.CarFenceGroupReq.carId=0
      carGroupList(this.CarFenceGroupReq).then(res=>{
        console.log(res.data)
        this.carGroupShow=res.data
        this.drawercc=true
        this.$modal.msgSuccess(res.msg)

      })
    },
    addCarFenceGroup(){
      // this.carGroup.push()
      // console.log(this.carGroup)
      this.drawer=false
      this.carGroupReq.carFenceGroups=this.selectedCarIds
      this.$modal.msgSuccess("成功")
    },
    carMiddleGroupList(){
      carMiddleGroupList().then(res=>{
        this.carFenceGroup=res.data
      })
      this.drawer=true
    },

    handleSelectionChanges(val) {
      console.log(val)
      this.carGroups = val;
    },
    handleSelectionChange(val) {
      console.log(val)
      this.selectedCarIds = val;
    },
    selectCarFenceList(){
      selectCarFenceList(this.form).then(res=>{
        this.carFence=res.data.records
      })
    },
    addCarList(row){
      this.carGroups=[]
      this.selectedCarIds=[]
      this.carGroupReq={}
      this.dialogFormVisible=true
    },
    carAddList(){
      // this.carGrouprs.push()
      console.log(this.carGroups)
      console.log(this.selectedCarIds)
      this.carGroupReq.carInformations=this.carGroups
      var carGroupReq={
         "carInformations":this.carGroups,
         "carFenceGroups":this.selectedCarIds
      }
      console.log(carGroupReq)
      carAddList(carGroupReq).then(res=>{
        this.$modal.msgSuccess(res.msg);
        this.dialogFormVisible=false
      })
    },
    selectCarInformationIdAndLicensePlate(){
      selectCarInformationIdAndLicensePlate().then(res=>{
        this.carInformationIdAndLicensePlate=res.data
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.selectCarFenceList();
    this.selectCarInformationIdAndLicensePlate();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
}
</script>
<style>
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409EFF;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
</style>
