<template>
    <el-dialog
        append-to-body
        fullscreen
        title="监控"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        :modal="false"
    >
        <div class="dialog-main">
            <div class="left">
                <div class="left-main">
                    <video-player
                        :playerId="'playerDialog'"
                        :cameraIndexCode="active"
                        :isShowScreen="false"
                        ref="player"
                    />
                </div>
            </div>
            <div class="right">
                <span class="option">视频操作</span>
                <div class="right-main">
                    <span
                        class="right-main-item"
                        :class="{active: active == i.cameraIndexCode}"
                        v-for="i in resources"
                        :key="i.cameraIndexCode"
                        @click="hanldeChange(i)"
                    >
                        {{ i.name }}
                    </span>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import videoPlayer from './videoPlayer.vue'
export default {
    name: 'screen-dialog',
    components: {
        videoPlayer,
    },
    data() {
        return {
            dialogVisible: false,
            active: '',
            resources: [],
        }
    },
    methods: {
        open(cameraIndexCode, resources) {
            this.dialogVisible = true
            this.resources = resources
            this.active = cameraIndexCode
            this.$nextTick(() => {
                this.$refs.player.createPlayer(this.active)
            })
        },
        handleClose(done) {
            done()
        },
        hanldeChange({cameraIndexCode}) {
            this.active = cameraIndexCode
            this.$refs.player.closeVideo()
            this.$nextTick(() => {
                this.$refs.player.createPlayer(cameraIndexCode)
            })
            //   this.$refs.player.getVideoURL(cameraIndexCode)
        },
    },
}
</script>

<style lang="scss" scoped>
/deep/ .el-dialog {
  display: flex;
  flex-direction: column;
}
/deep/ .el-dialog__body {
  flex: 1;
}
.dialog-main {
  display: flex;
  height: 100%;
}
.left {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  //   border: 1px solid #037db4;
  margin-right: 10px;
  box-sizing: border-box;
}
.left-main {
  height: 100%;
  width: 100%;
  //   height: 500px;
  //   width: 500px;
}
.right {
  width: 250px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #0f2a3f;
}
.option {
  display: inline-block;
  font-size: 14px;
  line-height: 40px;
  padding-left: 15px;
  border-bottom: 1px solid rgba($color: #037db4, $alpha: 0.7);
  background: rgba($color: #050c14, $alpha: 0.5);
}
.right-main {
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  .right-main-item {
    font-size: 14px;
    line-height: 28px;
    cursor: pointer;
    color: #8cbcde;
    padding-left: 10px;
    &:hover {
      color: #fff;
      background: #8cbcde;
    }
  }
  .active {
    color: #1b67b9;
    font-weight: bold;
  }
}
</style>
