<template>
  <app-layout>
    <vue-form
      :menus="menus"
      :default-active="currentActive"
      @page-change="handlePageChange"
      @success="handleSuccess"
      @error="handleError"
      @back="$router.push('/my/account')"
    >
      <template #aside-append>
        <div class="aside-payment"><a href="https://accounts.ezijing.com/payment" target="_blank">查看缴费记录</a></div>
        <div class="aside-logout" @click="$store.dispatch('logout')"><span>退出登录</span></div>
      </template>
      <!-- 首页 -->
      <app-home v-if="currentActive === 'account'" />

      <template #content>
        <!-- 基本信息 -->
        <app-info v-if="currentActive === 'account_info'" />
        <!-- 密码修改 -->
        <app-password v-if="currentActive === 'account_password'" />
      </template>
    </vue-form>
  </app-layout>
</template>

<script>
import AppLayout from '../layout.vue'
import AppHome from './home.vue'
import AppInfo from './info.vue'
import AppPassword from './password.vue'
export default {
  components: { AppLayout, AppHome, AppInfo, AppPassword },
  data() {
    return {
      menus: [
        {
          id: 'account',
          title: '个人信息',
          children: [
            { id: 'account_info', title: '基本信息' },
            { id: 'account_password', title: '密码修改' }
          ]
        }
      ],
      currentActive: 'account'
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(route) {
        const { query = {} } = route
        this.currentActive = query.active || 'account'
      }
    }
  },
  methods: {
    handlePageChange(value) {
      this.currentActive = value
      this.$router.push({ path: this.$route.path, query: { active: value } })
      console.log('页面切换了', value)
    },
    handleSuccess(data) {
      console.log('提交成功了', data)
      this.$message({ type: 'success', message: data.message })
    },
    handleError(data) {
      console.log('提交失败了', data)
      this.$message({ type: 'error', message: data.message })
    }
  }
}
</script>
