<template>
	<v-container fluid>
		<v-row>
			<v-col cols="12" md="4">
				<v-card flat class="pa-4">
					<div>
						<div>Locker Name: {{ resourceData_.locker[0].name }}</div>
						<div>Compartment No: {{ resourceData_.box.box_no }}</div>
						<br>
						<div>Delivery ID: {{ resourceData_.id }}</div>
						<div>Delivery Status: {{ resourceData_.status.message }}</div>
						<div>Tracking Number: {{ resourceData_.tracking_num }}</div>
						<div>Delivery Partner: {{ resourceData_.delivery_partner.name }}</div>
						<br>
						<div>Dropper Unique ID: {{ resourceData_.dropper.unique_id }}</div>
						<div>Dropper Name: {{ resourceData_.dropper_name }}</div>
						<div>Dropper Number: {{ resourceData_.dropper_num }}</div>
						<br>
						<div>Parcel Info : {{ resourceData_.parcel_info }}</div>
						<div>Parcel Type : {{ resourceData_.parcel_type_info }}</div>
						<div>Parcel Dimension : {{ resourceData_.parcel_dimension }}</div>
						<div>Parcel Weight : {{ resourceData_.parcel_weight }} kg</div>
						<div v-if="resourceData_.partner">Manage By: {{ resourceData_.partner.full_name }}</div>
						<div v-if="resourceData_.available_box_types">{{ resourceData_.available_box_types.map((item)=>item.title) }}</div>
					</div>
					<div class="mt-2">
						<v-btn
							v-if="$authUser.isAdmin()"
							outlined small block
							class="text-capitalize"
							@click="prepareEdit()"
						>
							<v-icon left small>mdi-pencil</v-icon> Edit Box Delivery
						</v-btn>
					</div>
				</v-card>
			</v-col>
			<v-col cols="12" md="8">
				<div class="relative">
					<v-slide-group
						v-model="step"
						center-active mandatory show-arrows
					>
						<v-slide-item
							v-for="(tab_item,i) in tab_items"
							:key="i"
							v-slot="{ active, toggle }"
						>
							<v-btn
								text
								class="text-capitalize"
								:input-value="active" active-class="primary--text rounded-b-0"
								@click="toggle"
							>
								{{ 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>
						<v-row class="ma-0">
							<v-col cols="12">
								<div 
									v-for="(content,i) in [
										{ title : 'receiver name', value: resourceData_.receiver_name },
										{ title : 'receiver number', value: resourceData_.receiver_num },
										{ title : 'receiver email', value: resourceData_.receiver_email },
										{ title : 'receiver house number', value: resourceData_.receiver_house_num },
										{ title : 'receiver adddress', value: resourceData_.receiver_address },
										{ title : 'receiver postcode', value: resourceData_.receiver_postcode },
										{ title : 'receiver city', value: resourceData_.receiver_city },
										{ title : 'receiver state', value: resourceData_.receiver_state },
										{ title : 'remarks', value: resourceData_.remarks },
									]"
									:key="i"
									class="pb-1"
								>
									<span class="font-weight-bold text-capitalize">{{ content.title }}:</span>
									<span>{{ content.value }}</span>
								</div>
							</v-col>
						</v-row>
					</v-window-item>
				</v-window>
			</v-col>
		</v-row>

		<v-dialog v-model="form_dialog_" max-width="550px" persistent>
			<BoxDeliveryForm
				:item="form_item_" :action="form_action_" :visible.sync="form_dialog_"
				:role-type="options_.user_type"
				@initialize="initialize_()"
			></BoxDeliveryForm>
		</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 BoxDeliveryForm from "./BoxDeliveryOverviewForm"
export default{
	components: {
		BoxDeliveryForm,
	},
	mixins: [
		resourceMixin,
		formActionMixin,
		errorHandlerMixin
	],
	data(){
		return {
			infoID: null,
			action: '',
			step: 0,
			tab_items: [
				{ title: "Overview" },
			],
			refs:{},
			dialog: false,
		}
	},
	created(){
		if(this.$route.params.id){
			this.infoID = this.$route.params.id;
		}
		this.initialize_()
	},
	methods:{
		prepareEdit(){
			this.editItem_(this.resourceData_)
		},
		getResourceData_(){
			this.$api.getBoxDeliveryInfo(this.infoID).then((res) => {
				this.resourceData_ = res.data.result
			}).catch((err) => {
				this.errorHandler_(err)
			})
		},
	}
}
</script>