<template>
  <!-- <JessibucaDemo /> -->
  <div class="warp">
    <div class="left">
      <button @click="handleOpenChannel(1)">打开通道1</button>
      <button @click="handleOpenChannel(2)">打开通道2</button>
      <button @click="handleOpenChannel(3)">打开通道3</button>
    </div>
    <div class="right">
      <VideoPlayerPlatform ref="playerPlayform" />
    </div>
  </div>

</template>

<script>
// import JessibucaDemo from './components/JessibucaDemo.vue'
import VideoPlayerPlatform from './components/videoPlayerPlatform'
export default {
  name: 'App',
  components: {
    // JessibucaDemo,
    VideoPlayerPlatform
  },
  mounted () {
    console.log(this.$refs.playerPlayform)

  },
  methods: {
    handleOpenChannel (id) {
      this.$refs.playerPlayform.openChannel({ deviceName: '1号机', deviceId: 'dev_0000001', channelId: 'c_000000'+id });
    },
    handleCloseChannel () {
      this.$refs.playerPlayform.closeChannel({ deviceName: '1号机', deviceId: 'dev_0000001', channelId: 'c_0000001' });
    }
  }
}
</script>
<style lang="scss" scoped>
.warp {
  display: flex;
  height: 100%;
  width: 100%;
  .left {
    width: 200px; //设备树
    height: 100%;
  }
  .right {
    flex: 1;
    height: 100%;
    width: 100%;
  }
}
</style>
<style>
html,
body,
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
</style>