<template>
  <div class="iframeBody">

    <!-- 分区设置 -->
    <div class="leftMenuBar">
      <div style="font-weight:600;font-size:20px;margin-bottom:20px;display:flex;justify-content: space-between;">
        <div style="color:#071E4C;">监控设置</div>
        <el-button type="primary" size="small" @click="zoneEdit('add')" >增加分区</el-button>
      </div>
      <template>
        <el-table :data="main_camera" height="750" border style="width: 100%">
          <el-table-column prop="name" label="分区名称" align="center"></el-table-column>
          <el-table-column prop="cnt" label="分区数量" align="center"></el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="zonechecked(scope.row)">查看</el-button>
              <el-button @click="zoneEdit('change',scope.row)" type="text">编辑</el-button>
              <el-button type="text" @click="zoneDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <el-dialog :title="zoneTitle" :visible.sync="zoneVisible" width="30%">
      <el-form ref="form" :model="zoneData" label-width="80px">
        <el-form-item label="分区名称">
          <el-input v-model="zoneData.name"></el-input>
        </el-form-item>
        <el-form-item label="分区数量">
          <el-input v-model="zoneData.cnt"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="zoneSave()">确 定</el-button>
        <el-button @click="zoneCancel()">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog title="你确定删除该分区吗？" :visible.sync="zoneDeleteVisible" width="30%">
      <el-button type="danger" @click="agreeDeleteZone()">删除</el-button>
      <el-button @click="cancelDeleteZone()">取消</el-button>
    </el-dialog>

    <!-- 详情设置 -->
    <div class="rightVideoBox">
      <span style="margin-right:50px;font-size:20px;font-family: '微软雅黑';font-weight:600;">{{cameraDetailName}}</span>
      <el-button type="primary" @click="cameraDetaileEdit('add')">增加摄像头</el-button>
      <template>
        <el-table :data="cameraDetail" height="750" border style="width: 100%;margin-top:12px">
          <el-table-column prop="camera_id" label="摄像头ID" align="center"></el-table-column>
          <el-table-column prop="camera_name" label="摄像头名称" align="center"></el-table-column>
          <el-table-column prop="camera_ip" label="摄像头IP" align="center"></el-table-column>
          <el-table-column prop="camera_port" label="摄像头端口" align="center"></el-table-column>
          <el-table-column prop="video_url" label="视频URL" align="center"></el-table-column>
          <el-table-column prop="camera_way" label="通道" align="center"></el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button @click="cameraDetaileEdit('change',scope.row)" type="text">编辑</el-button>
              <el-button type="text" @click="cameraDetaileDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <el-dialog :title="cameraDetailTitle" :visible.sync="cameraDetailVisible" width="30%">
      <el-form ref="form" :model="cameraDetailData" label-width="80px">
        <el-form-item label="摄像头ID">
          <el-input v-model="cameraDetailData.camera_id" :disabled="disabledInp"></el-input>
        </el-form-item>
        <el-form-item label="摄像头名称">
          <el-input v-model="cameraDetailData.camera_name"></el-input>
        </el-form-item>
        <el-form-item label="摄像头IP">
          <el-input v-model="cameraDetailData.camera_ip"></el-input>
        </el-form-item>
        <el-form-item label="摄像头端口">
          <el-input v-model="cameraDetailData.camera_port"></el-input>
        </el-form-item>
        <el-form-item label="视频URL">
          <el-input v-model="cameraDetailData.video_url"></el-input>
        </el-form-item>
        <el-form-item label="通道">
          <el-input v-model="cameraDetailData.camera_way"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cameraDetaileSave()">确 定</el-button>
        <el-button @click="cameraDetaileCancel()">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog title="你确定删除该摄像头吗？" :visible.sync="cameraDetaileDeleteVisible" width="30%">
      <el-button type="danger" @click="agreeDeleteCameraDetaile()">删除</el-button>
      <el-button @click="cancelDeleteCameraDetaile()">取消</el-button>
    </el-dialog>

  </div>

</template>

<script>
import { httpGet, httpPost,httpPostForJson } from "@/common/httpBean.js"
import {mainCamera,mainCameraDetail} from "@/axios/api.js"
export default {
  created(){
    this.getCode()
  },
  data(){
    return{
      //分区部分
      main_camera:[{
        id:1,
        name:"采区监控",
        cnt:4,
        main_cameraDetail:[{
          id:1,
          camera_id:1,
          camera_name:"采区1",
          camera_ip:"192.102",
          camera_port:1001,
          video_url:"1221212",
          camera_way:"通道1"
        },{
          id:2,
          camera_id:1,
          camera_name:"采区2",
          camera_ip:"192.102",
          camera_port:1002,
          video_url:"1221212",
          camera_way:"通道2"
        },{
          id:3,
          camera_id:1,
          camera_name:"采区3",
          camera_ip:"192.102",
          camera_port:1003,
          video_url:"1221212",
          camera_way:"通道3"
        },{
          id:4,
          camera_id:1,
          camera_name:"采区4",
          camera_ip:"192.102",
          camera_port:1003,
          video_url:"1221212",
          camera_way:"通道4"
        }]
      },{
        id:2,
        name:"厂区监控",
        cnt:4,
        main_cameraDetail:[{
          id:1,
          camera_id:2,
          camera_name:"厂区监控1",
          camera_ip:"192.230",
          camera_port:1001,
          video_url:"1221212",
          camera_way:"通道1"
        },{
          id:2,
          camera_id:2,
          camera_name:"厂区监控2",
          camera_ip:"192.230",
          camera_port:1002,
          video_url:"1221212",
          camera_way:"通道2"
        },{
          id:3,
          camera_id:2,
          camera_name:"厂区监控3",
          camera_ip:"192.230",
          camera_port:1003,
          video_url:"1221212",
          camera_way:"通道3"
        },{
          id:4,
          camera_id:2,
          camera_name:"厂区监控4",
          camera_ip:"192.230",
          camera_port:1003,
          video_url:"1221212",
          camera_way:"通道4"
        }]
      },{
        id:3,
        name:"办公室监控",
        cnt:4,
        main_cameraDetail:[{
          id:1,
          camera_id:3,
          camera_name:"办公室监控_1",
          camera_ip:"192.523",
          camera_port:1001,
          video_url:"1221212",
          camera_way:"通道1"
        },{
          id:2,
          camera_id:3,
          camera_name:"办公室监控_2",
          camera_ip:"192.523",
          camera_port:1002,
          video_url:"1221212",
          camera_way:"通道2"
        },{
          id:3,
          camera_id:3,
          camera_name:"办公室监控_3",
          camera_ip:"192.523",
          camera_port:1003,
          video_url:"1221212",
          camera_way:"通道3"
        },{
          id:4,
          camera_id:3,
          camera_name:"办公室监控_4",
          camera_ip:"192.523",
          camera_port:1003,
          video_url:"1221212",
          camera_way:"通道4"
        }]
      },{
        id:4,
        name:"办公室监控1",
        cnt:4,
        main_cameraDetail:[{
          id:1,
          camera_id:4,
          camera_name:"办公室监控1_1",
          camera_ip:"192.155",
          camera_port:1001,
          video_url:"1221212",
          camera_way:"通道1"
        },{
          id:2,
          camera_id:4,
          camera_name:"办公室监控1_2",
          camera_ip:"192.155",
          camera_port:1002,
          video_url:"1221212",
          camera_way:"通道2"
        },{
          id:3,
          camera_id:4,
          camera_name:"办公室监控1_3",
          camera_ip:"192.155",
          camera_port:1003,
          video_url:"1221212",
          camera_way:"通道3"
        },{
          id:4,
          camera_id:4,
          camera_name:"办公室监控1_4",
          camera_ip:"192.155",
          camera_port:1003,
          video_url:"1221212",
          camera_way:"通道4"
        }]
      },{
        id:5,
        name:"办公室监控2",
        cnt:4,
        main_cameraDetail:[{
          id:1,
          camera_id:5,
          camera_name:"办公室监控2_1",
          camera_ip:"192.125",
          camera_port:1001,
          video_url:"1221212",
          camera_way:"通道1"
        },{
          id:2,
          camera_id:5,
          camera_name:"办公室监控2_2",
          camera_ip:"192.125",
          camera_port:1002,
          video_url:"1221212",
          camera_way:"通道2"
        },{
          id:3,
          camera_id:5,
          camera_name:"办公室监控2_3",
          camera_ip:"192.125",
          camera_port:1003,
          video_url:"1221212",
          camera_way:"通道3"
        },{
          id:4,
          camera_id:5,
          camera_name:"办公室监控2_4",
          camera_ip:"192.125",
          camera_port:1003,
          video_url:"1221212",
          camera_way:"通道4"
        }]
      }],
      zoneTitle:"",
      zoneVisible:false,
      zoneType:"",
      zoneData:{ name:"",cnt:"",},
      zoneDeleteVisible:false,
      //详情部分
      cameraDetail:[{
          id:1,
          camera_id:1,
          camera_name:"采区1",
          camera_ip:"192.102",
          camera_port:1001,
          video_url:"1221212",
          camera_way:"通道1"
        },{
          id:2,
          camera_id:1,
          camera_name:"采区2",
          camera_ip:"192.102",
          camera_port:1002,
          video_url:"1221212",
          camera_way:"通道2"
        },{
          id:3,
          camera_id:1,
          camera_name:"采区3",
          camera_ip:"192.102",
          camera_port:1003,
          video_url:"1221212",
          camera_way:"通道3"
        },{
          id:4,
          camera_id:1,
          camera_name:"采区4",
          camera_ip:"192.102",
          camera_port:1003,
          video_url:"1221212",
          camera_way:"通道4"
      }],
      cameraDetailName:"采区监控分区详情表",
      cameraDetailTitle:"",
      cameraDetailVisible:false,
      cameraDetailType:"",
      cameraDetailData:{id:"",camera_id:"",camera_name:"",camera_ip:"",camera_port:"",video_url:"",camera_way:""},
      cameraDetaileDeleteVisible:false,
      disabledInp:false,
    }
  },
  methods:{
    getCode() {
      httpGet(mainCamera).then(res => {
          console.log(res);
      });
    },
    //分区部分
    zonechecked(row){
      let that = this;
      console.log(row.id);
      this.main_camera.forEach(function(item){
        if(item.id == row.id){
          that.cameraDetailName = item.name + "分区详情表";
          that.cameraDetail = item.main_cameraDetail
        }
      })
    },
    zoneEdit(type,row){
      this.zoneData = {id:'',name: '',cnt:''};
      this.zoneVisible = true;
      this.zoneType = type;
      if(this.zoneType === "add"){
        this.zoneTitle = "增加分区";
      }else if(this.zoneType === "change"){
        this.zoneTitle = "修改分区";
        this.zoneData = {...row};
      }
    },
    zoneSave(){
      if(this.zoneType === "add"){
        if(this.zoneData.name === ""){
          alert("分区名不得为空！");
          return;
        }
        this.main_camera.unshift(this.zoneData);
        this.zoneVisible = false;
        this.zoneData = {id:'',name: '',cnt:''};
      }else if(this.zoneType === "change"){
        let that = this;
        let newData = [];
        this.main_camera.forEach(function(item){
          if(item.id === that.zoneData.id){
            newData.push(that.zoneData);
          }else{
            newData.push(item);
          }
        })
        this.main_camera = newData;
        this.zoneVisible = false;
        this.zoneData = {id:'',name: '',cnt:''};
      }
    },
    zoneCancel(){
      this.zoneVisible = false;
      this.zoneData = {id:'',name: '',cnt:''};
    },
    zoneDelete(row){
      //console.log(row);
      this.zoneDeleteVisible = true;
      this.zoneData = {...row};
    },
    agreeDeleteZone(){
      let that = this;
      let newData = [];
      this.main_camera.forEach(function(item){
        if(item.id === that.zoneData.id){
          if(that.zoneData.id == that.cameraDetail[0].camera_id){
            that.cameraDetail = [];
          }
          return;
        }else{
          newData.push(item);
        }
      })
      this.main_camera = newData;
      this.zoneDeleteVisible = false;
      this.zoneData = {id:'',name: '',cnt:''};
    },
    cancelDeleteZone(){
      this.zoneDeleteVisible = false;
      this.zoneData = {id:'',name: '',cnt:''};
    },
    //详情部分
    cameraDetaileEdit(type,row){
      this.cameraDetailData = {id:"",camera_id:"",camera_name:"",camera_ip:"",camera_port:"",video_url:"",camera_way:""};
      this.cameraDetailVisible = true;
      this.cameraDetailType = type;
      if(this.cameraDetailType === "add"){
        this.cameraDetailTitle = "增加摄像头";
        this.disabledInp = false;
      }else if(this.cameraDetailType === "change"){
        this.cameraDetailTitle = "修改摄像头";
        this.cameraDetailData = {...row};
        this.disabledInp = true;
      }
    },
    cameraDetaileSave(){
      if(this.cameraDetailType === "add"){
        if(this.cameraDetailData.camera_id === ""){
          alert("分区名不得为空！");
          return;
        }
        this.cameraDetail.unshift(this.cameraDetailData);
        this.cameraDetailVisible = false;
        this.cameraDetailData = {id:"",camera_id:"",camera_name:"",camera_ip:"",camera_port:"",video_url:"",camera_way:""};
      }else if(this.cameraDetailType === "change"){
        let that = this;
        let newData = [];
        this.cameraDetail.forEach(function(item){
          if(item.id === that.cameraDetailData.id){
            newData.push(that.cameraDetailData);
          }else{
            newData.push(item);
          }
        })
        this.cameraDetail = newData;
        this.cameraDetailVisible = false;
        this.cameraDetailData = {id:"",camera_id:"",camera_name:"",camera_ip:"",camera_port:"",video_url:"",camera_way:""};
      }
    },
    cameraDetaileCancel(){
      this.cameraDetailVisible = false;
      this.cameraDetailData = {id:"",camera_id:"",camera_name:"",camera_ip:"",camera_port:"",video_url:"",camera_way:""};
    },
    cameraDetaileDelete(row){
      //console.log(row);
      this.cameraDetaileDeleteVisible = true;
      this.cameraDetailData = {...row};
    },
    agreeDeleteCameraDetaile(){
      let that = this;
      let newData = [];
      that.cameraDetail.forEach(function(item){
        if(item.id === that.cameraDetailData.id){
          return;
        }else{
          newData.push(item);
        }
      })
      this.cameraDetail = newData;
      this.cameraDetaileDeleteVisible = false;
      this.cameraDetailData = {id:"",camera_id:"",camera_name:"",camera_ip:"",camera_port:"",video_url:"",camera_way:""};
    },
    cancelDeleteCameraDetaile(){
      this.cameraDetaileDeleteVisible = false;
      this.cameraDetailData = {id:"",camera_id:"",camera_name:"",camera_ip:"",camera_port:"",video_url:"",camera_way:""};
    },

  },
  
}
</script>

<style scoped>
*{
  
  margin: 0;
  padding: 0;
}
.iframeBody{
  height: 100%;
  display: flex;
  width: 100%;
}
.leftMenuBar{
  width: 25%;
  height: 100%;
  background-color: white;
  padding: 20px;
  box-sizing: border-box;
}
.rightVideoBox{
  width: 75%;
  height: 100%;
  border-left: 1px solid rgb(245,246,251);
  background-color: white;
  padding: 20px;
  box-sizing: border-box;
}
.leftMenuSelected{
  color: rgb(0,82,255);
}
.sonVideoBox{
  width: 49.8%;
  height: 49.8%;
  border: 1px solid red;
}
</style>