<template>
  <el-container class="app-wrapper">
    <div class="container" style="width: 100%;height:100%">
      <div class="head">
        <div class="side">
          <div v-show="showBack"><i class="el-icon-arrow-left" @click="backPage"/></div>
        </div>
        <div>{{ title }}</div>
        <div class="side"/>
      </div>
      <iframe :src="url" class="iframe"/>
    </div>
  </el-container>
</template>

<script>

export default {
  name: 'Layout',
  data() {
    return {
      showBack: true,
      title: '标题', // 标题
      url: 'http://www.baidu.com' // iframe内嵌地址
    }
  },
  created() {
    if (this.$route.query) {
      console.log(this.$route.query)
      this.title = this.$route.query.name
      this.url = this.$route.query.url
    }
    if(this.baseConfig.toDashboard===false){
      this.showBack = false
    }
  },
  methods: {
    backPage() {
      this.$router.back()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";
  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;
    &.mobile.openSidebar{
      position: fixed;
      top: 0;
    }
    .container{
      .head{
        height: 44px;
        width:100vw;
        background-color: #54A2F7;
        color:#ffffff;
        text-align: center;
        line-height: 44px;
        font-size:16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .side{
          width:44px;
          margin:0px 5px;
          font-size:20px;
        }
      }
      .iframe{
        width: 100%;
        border: medium none;
        height: calc(100% - 44px);
        overflow:hidden;
        -webkit-overflow-scrolling: touch;
      }
    }
  }
</style>