<template>
  <div id="detail">
    <el-row>
      <div class="w_0100">
        <div class="w_1200">
          <el-col :span="24" class="top">
            <top-Deatil></top-Deatil>
          </el-col>
        </div>
      </div>
    </el-row>
    <el-row>
      <div class="w_0100 menu">
        <div class="w_1200">
          <el-col :span="24" class="menuTit">
            <top-menu> </top-menu>
          </el-col>
        </div>
      </div>
    </el-row>
    <el-row>
      <div class="w_0100 main">
        <div class="w_1200">
          <el-col :span="24" class="mainInfo">
            <el-col :span="24" class="mainInfoTop">
              <slot name="mainInfoTop">
                主体头部导航
              </slot>
            </el-col>
            <el-col :span="24" class="mainInfoMain">
              <el-col :span="leftSpan" class="mainLeft">
                <slot name="mainLeft">
                  主体左边内容
                </slot>
              </el-col>
              <el-col :span="rightSpan" class="mainRight" v-if="needRight">
                <slot name="mainRight">
                  主体右边内容
                </slot>
              </el-col>
            </el-col>
          </el-col>
        </div>
      </div>
    </el-row>
    <el-row>
      <div class="w_0100 footer">
        <div class="w_1200">
          <el-col :span="24" class="footerTit">
            <foots></foots>
          </el-col>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import topMenu from '@/layout/layout-part/top-menu.vue';
import foots from '@/layout/layout-part/foot.vue';
import topDeatil from '@/layout/layout-part/top-Deatil.vue';
import { mapActions, mapState, mapMutations } from 'vuex';
const jwt = require('jsonwebtoken');
export default {
  name: 'detail',
  props: {
    needRight: { type: Boolean, default: true },
  },
  components: {
    topMenu,
    foots,
    topDeatil,
  },
  data: () => ({
    leftSpan: 18,
    rightSpan: 6,
  }),
  created() {
    this.checkUrl();
    this.setUser();
  },
  mounted() {
    if (!this.needRight) {
      this.$set(this, `leftSpan`, 24);
      this.$set(this, `rightSpan`, 0);
    }
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    ...mapMutations(['setUser']),
    ...mapActions(['userOperation']),
    checkUrl() {
      if (location.search.length > 0) {
        let params = location.search.replace('?', '').split('&');
        let paramToken = params.filter(item => item.includes(`token`));
        if (paramToken.length > 0) {
          let tokenArr = paramToken[0].split('=');
          let token = tokenArr[1];
          sessionStorage.setItem('token', token);
          let info = jwt.decode(token);
          this.setUser(info);
          let pageParam = params.filter(item => !item.includes(`token`));
          let turnTo = window.location.href.replace(window.location.search, `?${pageParam}`);
          window.location.href = turnTo;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.w_0100 {
  float: left;
  width: 100%;
}
.w_1200 {
  margin: 0 auto;
  width: 1200px;
}
.top {
  float: left;
  width: 100%;
  height: 100px;
  background: #fff;
}
.menu {
  float: left;
  width: 100%;
  height: 40px;
  background: #850000;
}
.main {
  background: #f6f6f6;
  min-height: 500px;
}
.mainInfo {
  float: left;
  width: 100%;
  margin: 20px 0;
}
.mainInfoTop {
  height: 50px;
  margin: 20px 0 0 0;
}
.mainInfoMain {
  width: 100%;
  min-height: 1000px;
  padding: 15px 0;
  background: #fff;
}
.mainLeft {
  // width: 900px;
  min-height: 1000px;
  padding: 0 15px;
  border-right: 1px solid #f6f6f6;
}
.mainRight {
  float: right;
  // width: 299px;
  min-height: 1000px;
  padding: 0 30px;
}
.footer {
  float: left;
  width: 100%;
  height: 64px;
  background-color: #333;
  padding: 0.8rem 0 3rem 0;
}
.footerTit {
  float: left;
  width: 100%;
  height: 64px;
}
</style>
