<template>
	<v-container fluid>
		<v-row>
			<v-col cols="12" md="4">
				<v-card flat class="pa-4">
					<UserCard 
						:item="resourceData_"
						class="v-card--flat"
					></UserCard>
					<div class="mt-2">
						<v-btn
							outlined small block
							class="text-capitalize"
							@click="$router.push('/my/profile/update')"
						>
							<v-icon left small>mdi-pencil</v-icon> Edit User
						</v-btn>
					</div>
				</v-card>
			</v-col>
			<v-col cols="12" md="8">
				<div class="relative">
					<v-slide-group center-active mandatory show-arrows>
						<v-slide-item v-for="(tab_item,i) in tab_items" :key="i">
							<v-btn
								text
								class="text-capitalize"
								:input-value="step == tab_item.value" active-class="primary--text rounded-b-0"
								@click="step = tab_item.value"
							>
								{{ tab_item.title }}
							</v-btn>
						</v-slide-item>
					</v-slide-group>
				</div>
				<v-divider class="ma-0"></v-divider>
				<v-window v-model="step">
					<v-window-item value="overview">
						<div 
							v-for="(content,i) in items"
							:key="i"
							class="pb-2"
						>
							<span class="font-weight-bold text-capitalize">{{ content.title }}:</span>
							<span>{{ content.value }}</span>
						</div>
						<!-- <pre>{{ resourceData_ }}</pre> -->
					</v-window-item>
				</v-window>
			</v-col>
		</v-row>
	</v-container>
</template>

<script>
// import WDropdownMenu from "@components/WDropdownMenu"
import { resourceMixin } from "@/js/mixins/ResourceMixin"
import { formActionMixin } from "@/js/mixins/FormActionMixin"
import { errorHandlerMixin } from "@/js/mixins/ErrorHandlerMixin"
import UserCard from "../Users/UserCard"
export default{
	components: {
		UserCard,
	},
	mixins: [
		resourceMixin,
		formActionMixin,
		errorHandlerMixin
	],
	data(){
		return {
			action: '',
			step: 0,
			tab_items: [
				{ value: "overview", title: "Overview"},
			],
			refs:{},
			dialog: false,
			items: [],
		}
	},
	computed:
	{
	},
	created(){
		this.initialize_()
	},
	methods:{
		getResourceData_(){
			this.$api.getAuthProfile().then((res) => {
				this.resourceData_ = res.data.result.user
				this.initItems()
			}).catch((err) => {
				this.errorHandler_(err)
			})
		},
		menu_items(item = {}){
			return [
				{
					icon: "mdi-delete",
					icon_class: "red--text", 
					title: "Delete",
					title_class: "red--text",
					action: () => { this.confirmArchive(item) }
				},
			]
		},
		initItems()
		{
			this.items = [
				{ title : 'full name', value: this.resourceData_.full_name ?? '-' },
				{ title : 'role', value: this.resourceData_.role_name ?? '-' },
				{ title : 'gender', value: this.resourceData_.gender ?? '-' },
			]

			if(this.resourceData_.isPartner)
			{
				this.items = [
					...this.items,
					{ title : 'partner package', value: this.resourceData_.partnerPackage ? this.resourceData_.partnerPackage.name : '-' },
					{ title : 'company name', value: this.resourceData_.company_name ?? '-' },
					{ title : 'business registration number', value: this.resourceData_.business_reg_num ?? '-' },
				]
			}

			this.items = [
				...this.items,
				{ title : 'address', value: this.resourceData_.address ?? '-' },
				{ title : 'postcode', value: this.resourceData_.postcode ?? '-' },
				{ title : 'city', value: this.resourceData_.city ?? '-' },
				{ title : 'state', value: this.resourceData_.state ?? '-' },
				{ title : 'email', value: this.resourceData_.email ?? '-' },
				{ title : 'birthday', value: this.resourceData_.dob ?? '-' },
				{ title : 'ic no.', value: this.resourceData_.ic_num ?? '-' },
				{ title : 'mobile no.', value: this.resourceData_.mobile_num ?? '-' },
				{ title : 'registered at', value: this.resourceData_.created_at ?? '-' },
			]
		}
	}
}
</script>