<template>
  <div id="heads">
    <el-row>
      <el-col :span="24">
        <el-col :span="1" style="width: 35px;padding-top: 20px;">
          <el-image style="width: 35px; height: 35px;border-radius: 50%" :src="require('../../assets/top.png')"></el-image>
        </el-col>
        <el-col :span="16" class="title">
          吉企银通管理后台
        </el-col>
        <el-col :span="6" class="admin">
          <el-button  @click="bigAll()">切换全屏</el-button>
          <i class="el-icon-user icon"></i>
          <span class="name">管理员：{{ user.name }}</span>
          <span class="shu">|</span>
          <el-link :underline="false" class="out" @click="toLogout()">退出</el-link>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
import screenfull from 'screenfull'
export default {
  name: 'heads',
  props: {},
  components: {},
  data: () => ({
    isFullscreen: false
  }),
  created() {},
  watch: {},
  computed: {
    ...mapState(['user']),
  },
  methods: {
    ...mapMutations(['deleteUser']),
    async toLogout() {
      this.deleteUser();
      this.$message({
        message: '注销成功',
        type: 'success',
      });
      this.toLogin();
    },
    async toLogin() {
      this.$router.push({ name: 'login' });
    },
    bigAll(){
      // let Logistics= this.$router.resolve({
      //   path:'/bigAll',
      // })
      //
      // window.open(Logistics.href, '_blank',);
      // 如果不允许进入全屏，发出不允许提示
      if (!screenfull.isEnabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      // let Logistics= this.$router.resolve({
      //   path:'/bigAll',
      // })
      //
      // window.open(Logistics.href, '_blank',);
      this.$router.push({ path: '/bigAll' });
      screenfull.toggle()


    }
  },
};
</script>

<style lang="less" scoped>
.title {
  font-size: 18px;
  font-family: Source Han Sans SC;
  font-weight: bold;
  color: #ffffff;
  padding: 23px 10px;

}
.admin {
  text-align: right;
  padding: 24px 30px;
}
.admin .icon {
  color: #fff;
  padding: 0 5px;
}
.admin .name {
  font-size: 14px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}
.admin .shu {
  padding: 0 10px;
  color: rgba(255, 255, 255, 1);
}
.admin .out {
  font-size: 14px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: rgba(233, 2, 29, 1);
}
 /deep/ .el-button {
   color: white;
   border-color: #e9021d;
   background-color: #e9021d;
 }
/deep/.el-button:focus, /deep/.el-button:hover {
  color: white;
  border-color: #e9021d;
  background-color: #e9021d;
}
</style>
