<template>
  <div class="ibox">
    <iframe allow="camera *; microphone *;display-capture;midi;encrypted-media;" sandboxed="*" webkitallowfullscreen mozallowfullscreen allowfullscreen :src="src" frameborder="0" style="width: 100%;" :style="{height: iframeSrc.length > 1 ? 'calc(100% - 30px)' : '100%'}"></iframe>
    <div v-if='iframeSrc.length > 1' class="ibox-tools">
        <span class="tool" v-for="(item, index) in iframeSrc" :key="index" @click="setSrc(index)" :class="{active: index == checkIndex}">
            {{ item.name }}
        </span>
    </div>
  </div>
</template>

<script>
export default {
    props: {
        iframeSrc: {
            type: Array,
            default: []
        },
    },
    watch: {
        iframeSrc: {
            handler: function(newVal, oldVal) {
                if (newVal) {
                    this.checkIndex = 0
                    this.src =newVal[this.checkIndex].src
                    console.log('-------------------',this.src);
                    this.$forceUpdate();
                }
            },
            deep: true
        }
    },
    data() {
        return {
            checkIndex: 0,
            src: ""
        }
    },
    methods: {
        setSrc(index) {
            this.checkIndex = index
            this.src = this.iframeSrc[index] && this.iframeSrc[index].src ? this.iframeSrc[index].src : ''
        }
    },
    mounted(){
        this.setSrc(0);
    },
}
</script>

<style scoped>
.ibox {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 10px 0 0 10px;
  overflow: hidden;
}

.ibox-tools{
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 10px;
  overflow: auto;
  position: absolute;
  bottom: 0px;
}

.ibox-tools > .tool{
  width: auto;
  box-sizing: border-box;
  padding: 0 10px;
  height: 25px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 阴影 */
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.363);
  border-radius: 15px;
  font-size: 14px;
  cursor: pointer;
  margin-right: 10px;
  white-space: nowrap;
}

.ibox-tools > .tool.active {
  background-color: #3781fc;
  color: #fff;
}
</style>