<template>
  <div class="wrapper">
    <header-nav :index_num="index_num"></header-nav>
    <div id="box">
      <div class="left"
           :style="{height:heightVal+'px'}">
        <div class="list"
             @click="btn(index)"
             v-for="(list,index) in text"
             :key="index"
             :class="sub == index ? 'color' : ''">{{list}}</div>
      </div>
      <div class="right">
        <apply v-if="sub == 0"
               @listenToChildExen="showMsgFromChild"></apply>
        <collection v-if="sub == 1"
                    @listenToChildExen="showMsgFromChild"></collection>
        <declare v-if="sub == 2"
                 @listenToChildExen="showMsgFromChild"></declare>
        <modify v-if="sub == 3"
                @listenToChildExen="showMsgFromChild"></modify>
      </div>
    </div>
    <footer-nav class="footer"></footer-nav>
  </div>
</template>

<script>
/* eslint-disable */
import HeaderNav from "../../components/HeaderNav";
/* eslint-disable */
import FooterNav from "../../components/FooterNav";
import Apply from "./Apply";
import Collection from "./Collection";
import Declare from "./Declare";
import Modify from "./Modify";

export default {
  components: {
    HeaderNav,
    FooterNav,
    Apply,
    Collection,
    Declare,
    Modify
  },
  props: {},
  data() {
    return {
      index_num: 3,
      text: ["党组织申请", "我的收藏", "项目申报", "个人中心-修改密码"],
      sub: 0,
      heightVal: 1050
    };
  },
  computed: {},
  watch: {},
  methods: {
    showMsgFromChild(data) {
      this.heightVal = data;
    },
    btn(index) {
      let s = this.sub;
      s = index;
      this.sub = s;
    }
  },
  created() {},
  mounted() {}
};
</script>

<style lang='scss' scoped>
.wrapper {
  min-width: 1280px;

  #box {
    width: 1200px;
    margin: 40px auto 0;
    box-sizing: border-box;
    // padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      width: 241px;
      background-color: #ffffff;
      box-shadow: 0px 7px 11px 0px rgba(231, 231, 231, 0.7);
      border-radius: 2px;

      .list {
        width: 100%;
        height: 48px;
        margin-top: 21px;
        text-align: left;
        line-height: 48px;
        padding-left: 37px;
        box-sizing: border-box;
        font-family: "MicrosoftYaHei";
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
      }

      .color {
        position: relative;
        color: #e60012;
        &::after {
          content: "";
          width: 5px;
          height: 48px;
          background-color: #e60012;
          border-radius: 8px;
          position: absolute;
          left: 0%;
          top: 0%;
        }
      }
    }

    .right {
      width: 934px;
      background-color: #ffffff;
    }
  }

  .footer {
    margin-top: 80px;
  }
}
</style>
