<template>

  <div class="iframeBody">

    <!-- 分区设置 -->
    <div class="leftMenuBar">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>监控车队</span>
        </div>
        <div class="text item">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
          <el-tree class="filter-tree" :data="carListTree" :props="defaultProps" highlight-current accordion :filter-node-method="filterNode" @current-change="treeNodeChange" ref="tree"></el-tree>
        </div>
      </el-card>

    </div>
    <!-- 摄像头列表 -->
    <div class="rightVideoBox">
      <el-card>
        <div slot="header" class="clearfix">
          <span>{{ carNumber }}</span>
          <el-button v-show="carNumber" style="float: right; padding: 3px 0" type="text" @click="cameraDetailAdd()">添加摄像头</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="monitorName" label="摄像头名称" align="center" width="150"></el-table-column>
            <el-table-column prop="monitorUrl" label="直播视频源" align="center"></el-table-column>
            <el-table-column prop="updateTime" label="最后更新时间" align="center" width="150"></el-table-column>
            <el-table-column label="操作" width="150" align="center">
              <template slot-scope="scope">
                <el-button size="mini" round type="success" @click="cameraDetailEdit(scope.row)">修改</el-button>
                <el-button size="mini" round type="danger" @click="cameraDetailDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
    <!-- 表单渲染 -->
    <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelForm" :visible.sync="visible" title="摄像头设置" width="600px">
      <el-form :model="formData" :rules="rules" ref="formViewRef" label-width="110px">
        <el-form-item label="摄像头名称：" prop="monitorName">
          <el-input v-model="formData.monitorName" class="cell-input"></el-input>
        </el-form-item>
        <br/>
        <el-form-item label="直播视频源：" prop="monitorUrl">
          <el-input v-model="formData.monitorUrl" class="cell-input"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="cancelForm">取消</el-button>
        <el-button type="primary" @click="submitForm('formViewRef', formData)">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {Tools, HttpReq, Dates} from '@/assets/js/common.js';

export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      visible: false,
      filterText: '',
      carListTree: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      carNumber: ' ',
      cameraDetail: [],
      formData:{
        id:'',
        monitorName:'',
        monitorUrl:'',
      },
      rules: {
        monitorName: {required: true, message: '请输入设备名称', trigger: 'blur'},
        monitorUrl: {required: true, message: '请输入视频源路由', trigger: 'blur'},
      },
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.loadCarListTree();
    })
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    loadCarListTree() {
      HttpReq.truckDispatching.jkCarTree().then((res) => {
        if (res.code == 200) {
          this.carListTree = res.data;
        }
      })
    },
    treeNodeChange(dataObj, node){
      if(!dataObj.children){
        this.carNumber=dataObj.label;
        this.cameraDetailFind()
      }
    },
    cameraDetailAdd() {
      this.visible = true;
      this.formData.id='';
    },
    cancelForm() {
      this.visible = false;
      this.$refs.formViewRef.resetFields();
      this.cameraDetailFind();
    },
    submitForm(validateName, item) {
      this.$refs[validateName].validate(valid => {
        if (valid) {
          if(this.formData.id){
            HttpReq.truckDispatching.jkcarMonitorEdit({carNumber:this.carNumber,...this.formData}).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: 'success'
                });
                this.cancelForm();
              }
            })
          }else{
            HttpReq.truckDispatching.jkcarMonitorAdd({carNumber:this.carNumber,...this.formData}).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: 'success'
                });
                this.cancelForm();
              }
            })
          }
        }
      });
    },
    cameraDetailFind() {
      HttpReq.truckDispatching.jkcarMonitorFind({carNumber:this.carNumber}).then((res) => {
        if (res.code == 200) {
          this.cameraDetail = res.data;
        }
      })
    },
    cameraDetailEdit(item) {
      this.visible = true;
      this.formData = item;
    },
    cameraDetailDelete(item) {
      this.$confirm(  '确认删除该条数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((e) => {
        HttpReq.truckDispatching.jkcarMonitorDelete({id:item.id}).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: 'success'
            });
            this.cameraDetailFind();
          }
        })
      }).catch((e) => {})
    },
  },
}
</script>

<style scoped>


.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>
