<template>
  <div
    ref="basic"
    id="basic"
  >
    <el-container>
      <!-- 导航栏 -->
      <el-header>
        <div class="left">
          <el-image :src="nav.icon" />
          <span>人员能力评估系统</span>
        </div>
        <div class="right">
          <div
            v-for="(item,index) in nav.btns"
            :key='index'
            class="btns"
            @click="Success(item.success)"
          >{{item.name}}</div>
        </div>
      </el-header>
      <!-- 主体内容 -->
      <el-main>
        <slot />
      </el-main>
    </el-container>
  </div>
</template>

<script>
import icon from "@/assets/home/u25.png"
export default {
  props: {
    Type: {
      type: Boolean,
      default: false,
    }
  },
  data () {
    return {
      // 导航栏
      nav: {
        icon,
        btns: [{
          name: "账户设置", success (that) {
            alert("账户设置")
          }
        },
        {
          name: "退出登录",
          success (that) {
            sessionStorage.clear();
            that.$router.push("/login")
          }
        }
        ]
      },
    }
  },
  methods: {
    Success (func) {
      let that = this;
      func(that)
    },
    // 正式考试 严格模式
    Static () {
      // window.onbeforeunload = function (e) {
      //   var e = window.event || e;
      //   e.returnValue = ("确定离开当前页面吗？");
      // }
      // console.log(this.Type, this.$refs)
      // this.$refs["basic"].addEventListener("mouseleave", function () {
      //   alert("123")
      // })
    }
  },
  mounted () {
    this.Type ? this.Static() : '';
  },
}
</script>
<style lang="less" >
#basic {
  min-height: 100vh;
  .el-container {
    // h:60 p:0 20
    .el-header {
      background-color: #3867b7;
      position: relative;
      .left {
        display: flex;
        align-items: center;
        span {
          font-family: "Arial Negreta", "Arial Normal", "Arial";
          font-weight: 700;
          font-style: normal;
          font-size: 20px;
          color: #ffffff;
          line-height: 60px;
        }
      }
      .right {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        align-items: center;
        .btns {
          line-height: 60px;
          color: #ccc;
          padding: 0 20px;
          &:hover {
            color: #fff;
            background-color: #1abc9c;
          }
        }
      }
    }
    .el-main {
      width: 1200px;
      margin: auto;
    }
  }
}
</style>
