<template>
  <div>
    <el-dialog title="个人设置" :visible.sync="show" @close="resetPasswordForm" class="user-setting-dialog">
      <el-tabs v-model="activeName" @tab-click="handleClick" class='tabs-wrap'>
        <!-- 偏好设置 -->
        <el-tab-pane label="偏好设置" name="UserPreferences">
          <user-preferences ref="UserPreferences" @close-dialog="show=false;"></user-preferences>
        </el-tab-pane>
        <!-- 委托管理 -->
        <el-tab-pane label="委托管理" name="EntrustManage">
          <user-entrust-manage ref="EntrustManage"></user-entrust-manage>
        </el-tab-pane>
        <!-- 修改密码 -->
        <el-tab-pane label="修改密码" name="ChangePassword">
          <user-change-password ref="ChangePassword" @close-dialog="show=false;"></user-change-password>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer">
        <el-button @click="show = false" v-if="activeName !== 'EntrustManage'">取 消</el-button>
        <el-button type="primary" @click="confirm" v-if="activeName !== 'EntrustManage'">确 定</el-button>
        <el-button type="primary" @click="show = false" v-else>关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import userPreferences from './components/UserPreferences.vue'
import entrustManageDialog from './components/EntrustManageDialog.vue'
import changePasswordDialog from './components/ChangePasswordDialog.vue'

export default {
  components: {
    'user-preferences': userPreferences,
    'user-entrust-manage': entrustManageDialog,
    'user-change-password': changePasswordDialog
  },

  props: ['showDialog'],

  data() {
    return {
      activeName: 'UserPreferences'
    }
  },

  computed: {
    show: {
      get() {
        return this.showDialog
      },
      set(val) {
        this.$emit('update:showDialog', val)
      }
    }
  },

  methods: {
    handleClick(tab) {
      if (tab.name === 'UserPreferences') {
        this.$refs.UserPreferences.loadPreferences()
      } else if (tab.name === 'EntrustManage') {
        this.$refs.EntrustManage.loadEntrustListData()
      } else if (tab.name === 'ChangePassword') {
      }
    },

    confirm() {
      if (this.activeName === 'UserPreferences') {
        this.$refs.UserPreferences.savePreferences()
      } else if (this.activeName === 'ChangePassword') {
        this.$refs.ChangePassword.changePassword()
      }
    },

    resetPasswordForm() {
      this.$refs.ChangePassword.$refs.changePasswordForm.clearValidate()
    }
  }
}
</script>
