<template>
  <div class="edit-container">
    <el-tabs v-model="activeTab" @tab-click="clickTab">
      <el-tab-pane :label="$t('system:userlist:tab:User')" name="user">
        <user-info :user-id="userId" />
      </el-tab-pane>
      <el-tab-pane :label="$t('system:userlist:tab:Password')" name="account">
        <Account v-if="load.account" :user-id="userId" />
      </el-tab-pane>
      <el-tab-pane
        :label="$t('system:userlist:tab:retrospect')"
        name="retrospect"
      >
        <Retrospect v-if="load.retrospect" :user-id="userId" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import UserInfo from '../components/UserInfo'
import Account from '../components/Account'
import Retrospect from '../components/Retrospect'
export default {
  name: 'EditUser',
  components: { UserInfo, Account,Retrospect },
  data() {
    return {
      activeTab: 'user',
      userId: '',
      load: {
        role: false,
        account: false,
        retrospect: 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>
