<template>
  <div>
    <div class="module-title">设施设备</div>
    <div class="module-item"><label>泵站</label><el-switch v-model="pump"></el-switch></div>
    <div class="module-item"><label>视频</label><el-switch v-model="video"></el-switch></div>
    <PumpMonitor ref="PumpMonitor" />
    <VideoMonitor ref="VideoMonitor" />
  </div>
</template>

<script>
import PumpMonitor from "./PumpMonitor.vue";
import VideoMonitor from "./VideoMonitor.vue"
export default {
    name:"FacilityDevice",//编码显示
    components:{
        PumpMonitor,
        VideoMonitor
    },
    data() {
      return {
        pump:false,
        video:false,
      }
    },
    watch:{
        pump(n,o){
        	if(n){
                this.$refs.PumpMonitor.addModel()
            }else{
                this.$refs.PumpMonitor.removeAll()
            }
        },
        video(n,o){
        	if(n){
                this.$refs.VideoMonitor.addModel()
            }else{
                this.$refs.VideoMonitor.removeAll()
            }
        },
    },
    methods:{
        removeSource(){
            this.$refs.PumpMonitor.removeAll()
            this.$refs.VideoMonitor.removeSource()
        }
    }
}
</script>

<style lang="scss" scoped>
    .module-title{
        padding: 8px 20px;
        text-align: center;
        font-size: 1.0rem;
        background:#99c3e8;
    }
    .module-item{
        padding: 8px 20px;
        display: flex;
        justify-content: space-between;
        label{
            vertical-align: middle;
        }
    }
</style>