<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="editItem_(resourceData_)"
						>
							<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-1"
						>
							<span class="font-weight-bold text-capitalize">{{ content.title }}:</span>
							<span>{{ content.value }}</span>
						</div>
						<!-- <pre>{{ resourceData_ }}</pre> -->
					</v-window-item>
					<v-window-item value="Credit Transaction">
						<user-credit-list
							:user="resourceData_"
							@initialize="initialize_()"
						></user-credit-list>
					</v-window-item>
					<v-window-item value="Booking">
						<box-booking-list
							:user="resourceData_"
							@initialize="initialize_()"
						></box-booking-list>
					</v-window-item>
					<v-window-item value="Lockers">
						<locker-list
							hide-header
							:payload="{
								partner_id : resourceData_.id
							}"
							@initialize="initialize_()"
						></locker-list>
					</v-window-item>
				</v-window>
			</v-col>
		</v-row>

		<v-dialog v-model="form_dialog_" max-width="550px" persistent>
			<UserForm
				:item="form_item_" :action="form_action_" :visible.sync="form_dialog_"
				:role-types="options_.user_type"
				:gender-types="options_.gender_types"
				:partner-packages="options_.partner_packages"

				@initialize="initialize_()"
			></UserForm>
		</v-dialog>
	</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 "./UserCard"
import UserForm from "./UserForm"
import UserCreditList from "@views/UserCredits/UserCreditList"
import LockerList from "@views/Lockers/LockerList"
import BoxBookingList from "@views/BoxBookings/BoxBookingList"
export default{
	components: {
		// WDropdownMenu,
		UserCard,
		UserForm,
		UserCreditList,
		BoxBookingList,
		LockerList,
	},
	mixins: [
		resourceMixin,
		formActionMixin,
		errorHandlerMixin
	],
	data(){
		return {
			infoID: null,
			action: '',
			step: 0,
			tab_items: [],
			refs:{},
			dialog: false,
			items: [],
		}
	},
	computed:{
	},
	created(){
		if(this.$route.params.id){
			this.infoID = this.$route.params.id;
		}
		this.initialize_()
		this.getUserTypeRefs()
		this.getGenderTypes()
		this.getPartnerPackages()
	},
	methods:{
		test(){
			// console.log(a,b)
			// this.step = b.value
			// this.$emit('change')
		},
		getResourceData_(){
			this.$api.getUserInfo(this.infoID).then((res) => {
				this.resourceData_ = res.data.result
				this.setTabItems()
				this.initItems()
			}).catch((err) => {
				this.errorHandler_(err)
			})
		},
		setTabItems(){
			let base_tabs = [
				{ value: "overview", title: "Overview"},
			]

			if(this.resourceData_.isPartner){
				this.tab_items = [
					... base_tabs,
					{ value: "Lockers", title: "Lockers" }
				]
			}else{
				this.tab_items = [
					... base_tabs,
					{ value: "Credit Transaction", title: "Credit Transaction"},
					{ value: "Booking", title: "Booking" }
				]
			}
		},
		menu_items(item = {}){
			return [
				{
					icon: "mdi-delete",
					icon_class: "red--text", 
					title: "Delete",
					title_class: "red--text",
					action: () => { this.confirmArchive(item) }
				},
			]
		},
		getUserTypeRefs(){
			this.$api.getUserRefs().then((res)=>{
				let result = res.data.result
				this.options_.user_type = result
			}).catch((err)=>{
				this.errorHandler_(err)
			})
		},
		getGenderTypes(){
			this.$api.getGenderTypes().then((res)=>{
				let result = res.data.result
				this.options_.gender_types = result
			}).catch((err)=>{
				this.errorHandler_(err)
			})
		},
		getPartnerPackages(){
			this.$api.getPartnerPackageList().then((res)=>{
				let {data} = res.data.result
				this.options_.partner_packages = data
			}).catch((err)=>{
				this.errorHandler_(err)
			})

		},
		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_.partner_package ? this.resourceData_.partner_package.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>