<template>
  <div class="edit-container">
    <el-tabs v-model="activeTab" @tab-click="clickTab">
      <el-tab-pane label="User " name="user">
        <user-info :user-id="userId" />
      </el-tab-pane>
      <el-tab-pane label="Password " name="account">
        <Account v-if="load.account" :user-id="userId" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import UserInfo from '../components/UserInfo'
import Account from '../components/Account'
export default {
  name: 'EditUser',
  components: { UserInfo, Account },
  data() {
    return {
      activeTab: 'user',
      userId: '',
      load: {
        role: false,
        account: false
      }
    }
  },
  created() {
    this.userId = this.$router.currentRoute.query.Id
  },
  methods: {
    clickTab(tab, event) {
      if (this.load[tab.name] === false) {
        this.load[tab.name] = true
      }
    }
  }
}
</script>
