<template>
	<NavBar />
	<view class="container">
		<view class="title">
			<PageTitle :title="$t('personal.personalData')" />
		</view>
    <view style="margin-top: 33px">
      <Segmented
          styleType="text"
          fontSize="18px"
          gap="22px"
          :current="current"
          :activeFontWeight="activeFontWeight"
          :values="infoTypeOptionsText"
          @clickItem="onClickItem"
          inActiveColor="#999999"
          activeColor="#333333"
      ></Segmented>
    </view>
		<view v-if="infoType === 'personal'"><PersonalInformation :authStatus="authStatus" /></view>
		<view v-if="infoType === 'financial'"><FinancialInformation /></view>
		<view v-if="infoType === 'accountSecurity'"><AccountSecurity /></view>
	</view>
</template>

<script>
import Segmented from '@/pages/components/segmented/index.vue';
import PersonalInformation from './personalInformation/index.vue';
import FinancialInformation from './financialInformation/index.vue';
import AccountSecurity from './accountSecurity/index.vue';
import { getPersonalAuthStatus } from '@/services/user.ts';
export default {
	data() {
		return {
      activeFontWeight: 700,
      current: 0,
			infoType: 'personal',
			infoTypeOptionsValue: [
        'personal',
        'financial',
        'accountSecurity'
      ],
      infoTypeOptionsText: [
        this.$t('form.personalData.personalInformation.title'),
        this.$t('form.personalData.financialInformation.title'),
        this.$t('form.personalData.accountSecurity.title'),
			],
			authStatus: {}
		};
	},
	methods: {
		async getAuthStatus() {
			const res = await getPersonalAuthStatus();
			if (res && res.code === 0) {
				this.authStatus = res.data;
			}
		},
    async onClickItem(e) {
      if (this.current != e.currentIndex) {
        this.current = e.currentIndex;
      }
      this.infoType = this.infoTypeOptionsValue[this.current];
    }
	},
	onShow() {
		if (this.infoType === 'personal') {
			// this.getAuthStatus();
		}
	},
	components: {
    Segmented,
		PersonalInformation,
		FinancialInformation,
		AccountSecurity
	}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
