<template>
  <div class="main-content">
    <div class="personal-center">
      <div class="personal-center-menu">
        <el-menu default-active="1" @select="handleSelect">
          <el-menu-item index="1">
            <i class="el-icon-edit"></i>
            <span slot="title">个人设置</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-key"></i>
            <span slot="title">修改密码</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="personal-center-content" v-if="curIndex == 1">
        <PersonalSetting :userInfo="userInfo" />
      </div>
      <div class="personal-center-content" v-if="curIndex == 2">
        <PersonalPwd />
      </div>
    </div>
  </div>
</template>

<script>
import PersonalSetting from '@views/personal/personal-setting';
import PersonalPwd from '@views/personal/personal-pwd';
import { getStore } from '@utils/store';
export default {
  name: 'PersonalCenter',
  components: {
    PersonalSetting,
    PersonalPwd
  },
  data() {
    return {
      curIndex: 1,
      userInfo: getStore('userInfo')
    };
  },
  methods: {
    handleSelect(index) {
      this.curIndex = index;
    }
  },
  created() {}
};
</script>

<style lang="less" scoped>
.personal-center {
  display: flex;

  .personal-center-menu {
    width: 260px;

    :deep(.el-menu) {
      border: none;
      background: none;

      .el-menu-item {
        &:hover {
          color: @theme-color;
          background: none;

          i {
            color: @theme-color;
          }
        }

        &.is-active {
          background-color: @theme-gray-color + 70;
          border-right: 4px solid @theme-color;
        }
      }
    }
  }

  .personal-center-content {
    flex: 1;
    padding-left: 30px;

    :deep(.el-form) {
      .el-form-item {
        .el-form-item__label {
          line-height: 30px;
          padding-bottom: 0;
        }
      }
    }
  }
}
</style>
