<template>
  <el-dialog
    v-model="historyShow"
    top="5%"
    width="700px"
    title="个人中心"
    :visible.sync="dialogVisible"
    :close-on-click-modal=false
    class="usercenterBody"
    @close="closeHandler">
      <div class="userCenter body">
        <!-- <div class="sidebar">
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="vertical">
            <el-menu-item :index="defRoute+'/userInfo'">个人信息</el-menu-item>
            <el-menu-item :index="defRoute+'/modifyPass'">修改密码</el-menu-item>
          </el-menu>
        </div>
        <div class="content">
          <user-info v-if=""></user-info>
          <modify-pass></modify-pass>
        </div> -->
        <el-tabs :tab-position="tabPosition" type="border-card">
          <el-tab-pane label="个人信息"><user-info></user-info></el-tab-pane>
          <el-tab-pane label="修改密码"><modify-pass></modify-pass></el-tab-pane>
        </el-tabs>
      </div>
  </el-dialog>
</template>

<script>
  import modifyPass from '../components/ModifyPass.vue'
  import userInfo from '../components/UserInfo.vue'
  export default {
    data() {
      return {
        historyShow: true,
        defRoute: '/home/userCenter',
        activeIndex: null,
        dialogVisible: true,
        tabPosition: 'left'
      }
    },
    components: {
      modifyPass,
      userInfo
    },
    computed: {
      userInfo() {
        return this.$store.state.userInfo
      }
    },
    mounted() {
      // this.activeIndex = this.defRoute + '/modifyPass'
    },
    methods: {
      closeHandler() {
        this.$emit('close-handle', false)
      }
    }
  }
</script>

<style lang="scss">
  .usercenterBody {
    .el-dialog__body {
      padding: 30px;
    }
  }
  .userCenter {
    display: flex;
    flex-direction: row;

    .el-tabs--border-card {
      width: 100%;
    }

    .el-tabs__item {
      height: 46px;
      line-height: 46px;
      padding: 0 25px;
    }

    .el-tabs--left .el-tabs__item.is-left {
      text-align: center;
    }

    /* .sidebar {
      display: flex;
      overflow: auto;
      width: 150px;
      height: 100%;
    
      .el-menu {
        width: 100%;
        height: 100%; 
      }
    }
    .content {
      flex: 1;
      min-height: 300px;
      padding: 0 12px;
    } */
  }
</style>
