<template>
  <div id="main-layout">
    <div @click="checkBind()" v-if="!toLogin()">
      <el-container style="background:#e7e8eb;">
        <el-header height="4rem" class="head">
          <heads></heads>
        </el-header>
        <el-container class="contain">
          <el-aside width="13rem" class="side">
            <menus></menus>
          </el-aside>
          <el-main class="main">
            <router-view />
          </el-main>
        </el-container>
      </el-container>
      <bind :display="dialog" v-if="!$isBindWx()">
        <el-col :span="24" style="text-align:center;font-size:1.25rem;padding-top:1rem;">
          绑定微信,开始您的招聘!
        </el-col>
      </bind>
    </div>
    <div v-else>
      <router-view />
    </div>
  </div>
</template>

<script>
import bind from '@/components/bind.vue';
import heads from '@/layout/layout-part/heads.vue';
import menus from '@/layout/layout-part/menus.vue';
import { mapActions, mapState } from 'vuex';
export default {
  name: 'main-layout',
  props: {},
  components: {
    menus,
    heads,
    bind,
  },
  data: () => ({
    dialog: false,
  }),
  created() {},
  computed: {
    ...mapState(['user']),
  },
  methods: {
    ...mapActions(['corpOperation']),
    async getInfo() {
      let { base } = await this.corpOperation({ type: 'search', data: { corpid: this.user.corpid } });
      if (base.state === '已认证') return true;
    },
    async checkBind() {
      //平台未审核/审核拒绝,只能进入基本信息去复审
      if (!(await this.getInfo())) {
        this.$message.error('您的企业还未通过审核,请检查您的信息');
        this.$router.push({ path: '/info/base/index' });
        return;
      }
      if (!this.$isBindWx()) this.dialog = true;
    },
    toLogin() {
      let route = window.location.pathname;
      return route.includes('login') || route.includes('register');
    },
  },
};
</script>

<style lang="less" scoped>
.head {
  margin: 0;
  padding: 0;
  width: 100%;
  background: #fff;
}
.contain {
  height: 100%;
  margin: 2rem 3.5rem;
  border: 1px solid #a2a2b6;
  background: #eeeeee;
}
.side {
  margin: 0;
  padding: 0;
  width: 2rem;
  border-right: 1px solid #a2a2b6;
  background: #ffffff;
}
.main {
  margin: 0;
  padding: 0 2rem;
  background: #ffffff;
}
</style>
