<template>

  <div class="iframeBody">

    <!-- 分区设置 -->
    <div class="leftMenuBar">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>监控分区</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="zoneEdit('add')">添加分区</el-button>
        </div>
        <div class="text item">
          <el-table :data="main_camera" border style="width: 100%" @row-click="gridClick">
            <el-table-column prop="id" label="NO." align="center" width="60"></el-table-column>
            <el-table-column prop="name" label="分区名称" align="left"></el-table-column>
            <el-table-column label="操作" width="150" align="center">
              <template slot-scope="scope">
                <el-button size="mini" round type="primary"  @click="zoneEdit('change',scope.row)">编辑</el-button>
                <el-button size="mini" round type="danger"  @click="zoneDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>

      <el-dialog :title="zoneTitle" :visible.sync="zoneVisible" width="30%">
        <el-form ref="zoneData" :rules="rules" :model="zoneData" label-width="80px">
          <el-form-item label="分区名称" style="margin-bottom:15px;" prop="name">
            <el-input v-model="zoneData.name" ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="zoneCancel()" style="padding:10px;">取 消</el-button>
          <el-button type="primary" @click="zoneSave()" style="padding:10px;">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="提示" :visible.sync="zoneDeleteVisible" width="30%">
        你确定删除该分区吗？
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancelDeleteZone()" style="padding:10px;">取消</el-button>
            <el-button type="danger" @click="agreeDeleteZone()" style="padding:10px;">删除</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 摄像头明细 -->
    <div class="rightVideoBox">
      <el-card>
        <div slot="header" class="clearfix">
          <span>{{DetailTitle}}</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="cameraDetaileEdit('add')">添加摄像头</el-button>
        </div>
        <div class="text item">
          <el-table :data="cameraDetail" border style="width: 100%" height="710">
            <el-table-column prop="id" label="NO." align="center" width="60"></el-table-column>
            <el-table-column prop="cameraName" label="摄像头名称" align="left"></el-table-column>
            <el-table-column prop="streamName" label="视频流名称" align="left"></el-table-column>
            <el-table-column prop="cameraIp" label="IP地址" align="left"></el-table-column>
            <el-table-column label="操作" width="150" align="center">
              <template slot-scope="scope">
                <el-button size="mini" round type="danger" @click="cameraDetaileDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <el-dialog :title="cameraDetailTitle" :visible.sync="cameraDetailVisible" width="500px">
        <el-form ref="cameraDetailData" :rules="rulesDetai" :model="cameraDetailData" label-width="100px">
          <el-form-item label="摄像头名称" style="margin-bottom:15px;" prop="cameraName">
            <el-input v-model="cameraDetailData.cameraName"></el-input>
          </el-form-item>
          <el-form-item label="视频流名称" style="margin-bottom:15px;" prop="streamName">
            <el-input v-model="cameraDetailData.streamName"></el-input>
          </el-form-item>
          <el-form-item label="IP地址" style="margin-bottom:15px;" prop="cameraIp">
            <el-input v-model="cameraDetailData.cameraIp"></el-input>
          </el-form-item>
          <!-- <el-form-item label="端口" style="margin-bottom:15px;">
            <el-input v-model="cameraDetailData.cameraPort"></el-input>
          </el-form-item> -->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cameraDetaileCancel()" style="padding:10px;">取 消</el-button>
          <el-button type="primary" @click="cameraDetaileSave()" style="padding:10px;">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="提示" :visible.sync="cameraDetaileDeleteVisible" width="30%">
        你确定删除该摄像头吗？
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancelDeleteCameraDetaile()" style="padding:10px;">取消</el-button>
            <el-button type="danger" @click="agreeDeleteCameraDetaile()" style="padding:10px;">删除</el-button>
        </span>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
export default {
  created(){
    this.getCode()
  },
  data(){
    return{
      //分区部分
      main_camera:[],
      zoneTitle:"",
      zoneVisible:false,
      zoneType:"",
      zoneData:{ name:"",cnt:"",},
      zoneDeleteVisible:false,
      //详情部分
      cameraDetailAll:[],
      cameraDetail:[],
      cameraDetailName:"",
      cameraDetailTitle:"",
      cameraDetailVisible:false,
      cameraDetailType:"",
      cameraDetailData:{},
      cameraDetaileDeleteVisible:false,
      disabledInp:false,
      camID:"1",
      DetailTitle:"",
      rules: {
        name: [ { required: true, message: '请输入分区名称', trigger: 'blur' },]
      },
      rulesDetai:{
        cameraName: [ { required: true, message: '请输入摄像头名称', trigger: 'blur' },],
        streamName: [ { required: true, message: '请输入视频流名称', trigger: 'blur' },],
        cameraIp: [ { required: true, message: '请输入IP', trigger: 'blur' },],
      }
    }
  },
  methods:{
    // 区域单击
    gridClick (row, index) {
      this.DetailTitle = row.name;
      this.camID = row.id;
      this.getCode1(row.id);
    },
    formatter(row, column) {
		  return row.brand === 1? "海康威视" : "大华";
	  },
    getCode() {
      let param = {};
      HttpReq.truckDispatching.mineMonitoringPartitionQuery(param).then((res) => {
				this.main_camera = res.content;
        if(res.content.length > 0){
          this.DetailTitle = res.content[0].name;
          this.getCode1(res.content[0].id);
        }
			})
    },
    getCode1(id) {
      HttpReq.truckDispatching.mineMonitoringCameraQuery({page:0,size:100,cameraId:id}).then((res) => {
        console.log("mainCameraDetail",res);
        this.cameraDetail = res.content
			})
    },
    //分区部分
    zonechecked(row){
      this.cameraDetailName = row.name + "分区详情表";
      HttpReq.truckDispatching.mineMonitoringCameraQuery({page:0,size:100,cameraId:id}).then((res) => {
        console.log("mainCameraDetail",res);
        this.cameraDetail = res.content
			})
    },
    zoneEdit(type,row){
      this.zoneData = {};
      this.zoneVisible = true;
      this.zoneType = type;
      if(this.zoneType == "add"){
        this.zoneTitle = "增加分区";
      }else if(this.zoneType == "change"){
        this.zoneTitle = "修改分区";
        this.zoneData = {...row};
      }
    },
    zoneSave(){
      this.$refs['zoneData'].validate((valid) => {
          if (valid) {
            if(this.zoneType == "add"){
              console.log(this.zoneData);
              let param = {};
              HttpReq.truckDispatching.mineMonitoringPartitionAdd(this.zoneData).then((res) => {
                this.$message.success('添加成功');
                HttpReq.truckDispatching.mineMonitoringPartitionQuery(param).then((res) => {
                  this.main_camera = res.content;
                  console.log("mainCamera",this.main_camera);
                })
              }).catch(function(error) { });
              this.zoneVisible = false;
              this.zoneData = {name: ''};
            }else if(this.zoneType == "change"){
              console.log(this.zoneData);
              let param = {};
              HttpReq.truckDispatching.mineMonitoringPartitionUpdate(this.zoneData).then((res) => {
                this.$message.success('修改成功');
                HttpReq.truckDispatching.mineMonitoringPartitionQuery(param).then((res) => {
                  this.main_camera = res.content;
                  console.log("mainCamera",this.main_camera);
                })
              }).catch(function(error) { });
              this.zoneVisible = false;
              this.zoneData = {id:'',name: ''};
            }
          } else {
            console.log('error submit!!');
            return false;
          }
      });

    },
    zoneCancel(){
      this.zoneVisible = false;
      this.zoneData = {id:'',name: '',cnt:''};
    },
    zoneDelete(row){
      //console.log(row);
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          type: 'warning'
      }).then( () => {
        HttpReq.truckDispatching.mineMonitoringPartitionDel([row.id]).then((res) => {
          this.$message({
            message: res,
            type: 'info'
          });
          let param = {};
          HttpReq.truckDispatching.mineMonitoringPartitionQuery(param).then((res) => {
            this.main_camera = res.content;
            console.log("mainCamera",this.main_camera);
          })
        })
      })
    },
    agreeDeleteZone(){
      let that = this;
      let arrs = [];
      arrs.push(parseInt(that.zoneData.id));
      console.log(arrs);
      HttpReq.truckDispatching.mineMonitoringPartitionDel(arrs).then((res) => {
        this.$message.success('删除成功');
        let param = {};
        HttpReq.truckDispatching.mineMonitoringPartitionQuery(param).then((res) => {
          this.main_camera = res.content;
          console.log("mainCamera",this.main_camera);
        })
      })
      this.zoneDeleteVisible = false;
    },
    cancelDeleteZone(){
      this.zoneDeleteVisible = false;
      this.zoneData = {id:'',name: '',cnt:''};
    },
    //详情部分
    cameraDetaileEdit(type,row){
      this.cameraDetailData = {};
      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(){
      this.$refs['cameraDetailData'].validate((valid) => {
          if (valid) {
                if(this.cameraDetailType == "add"){
                  this.cameraDetailData.cameraId = this.camID;
                  console.log(this.cameraDetailData);
                  HttpReq.truckDispatching.mineMonitoringCameraAdd(this.cameraDetailData).then((res) => {
                    this.$message.success('添加成功');
                    HttpReq.truckDispatching.mineMonitoringCameraQuery({page:0,size:100,cameraId:this.camID}).then((res) => {
                      console.log("mainCameraDetail",res);
                      this.cameraDetail = res.content
                    })
                  }).catch(function(error) { });
                  this.cameraDetailVisible = false;
                  this.cameraDetailData = {};
                }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:"",cameraId:"",cameraName:"",streamName:"",cameraIp:"",cameraPort:"",cameraWay:""};
                }
          } else {
            console.log('error submit!!');
            return false;
          }
      });
    },
    cameraDetaileCancel(){
      this.cameraDetailVisible = false;
      this.cameraDetailData = {};
    },
    cameraDetaileDelete(row){
      console.log(row);
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          type: 'warning'
      }).then( () => {
        HttpReq.truckDispatching.mineMonitoringCameraDel([row.id]).then((res) => {
          this.$message({
            message: "删除成功",
            type: 'success'
          });
          HttpReq.truckDispatching.mineMonitoringCameraQuery({page:0,size:100,cameraId:this.camID}).then((res) => {
            console.log("mainCameraDetail",res);
            this.cameraDetail = res.content
          })
        })
      })
    },
    agreeDeleteCameraDetaile(){
      let that = this;
      let arrs1 = [];
      arrs1.push(parseInt(that.cameraDetailData.id));
      console.log(arrs1);
      HttpReq.truckDispatching.mineMonitoringCameraDel(arrs1).then((res) => {
        this.$message.success('删除成功');
        HttpReq.truckDispatching.mineMonitoringCameraQuery({page:0,size:100,cameraId:this.camID}).then((res) => {
          console.log("mainCameraDetail",res);
          this.cameraDetail = res.content
        })
      })
      this.cameraDetaileDeleteVisible = false;
      this.cameraDetailData = {};
    },
    cancelDeleteCameraDetaile(){
      this.cameraDetaileDeleteVisible = false;
      this.cameraDetailData = {};
    },

  },
}
</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;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.box-card {
  width: 380px;
  height: 100%;
}
</style>
