<template>
  <app-layout>
    <vue-form
      :menus="menus"
      :default-active="currentActive"
      @page-change="handlePageChange"
      @success="handleSuccess"
      @error="handleError"
      @back="$router.push('/my/account')"
      :backText="$t('application.returnToRegistrationSystem')"
      :prevText="$t('application.back')"
      :nextText="$t('application.next')"
      :submitText="$t('application.save')"
    >
      <template #aside-append>
        <div class="aside-payment">
          <a href="https://accounts.ezijing.com/payment" target="_blank">{{ $t('application.viewPaymentRecords') }}</a>
        </div>
        <div class="aside-logout" @click="$store.dispatch('logout')">
          <span>{{ $t('application.logOut') }}</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: this.$t('application.personalInformation'),
          children: [
            { id: 'account_info', title: this.$t('application.generalInformation') },
            { id: 'account_password', title: this.$t('application.passwordSettings') }
          ]
        }
      ],
      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>
