<template>
	<v-container fluid>
		<v-row>
			<v-col cols="12" md="4">
				<v-card flat class="pa-4">
					<ShippingMethodCard 
						:item="resourceData_"
						class="v-card--flat"
					></ShippingMethodCard>
					<div class="mt-2">
						<v-btn
							outlined small block
							class="text-capitalize"
							@click="editItem_(resourceData_)"
						>
							<v-icon left small>mdi-pencil</v-icon> Edit Shipping Method
						</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-if="resourceData_.shipping_type_id == FLAT_RATE">
						<div
							v-for="(content,i) in [
								{ title : 'Name', value: resourceData_.name },
								{ title : 'Type', value: resourceData_.shipping_type ? resourceData_.shipping_type.name : '' },
								{ title : 'Cost(RM)', value: resourceData_.flat_rate ? resourceData_.flat_rate.cost : '' },
								{ title : 'Couriers', value: resourceData_.flat_rate && resourceData_.flat_rate.couriers.length > 0 ? resourceData_.flat_rate.couriers.map(x => x.name).join() : '' },
								{ title : 'Geo Zone', value: resourceData_.flat_rate ? resourceData_.flat_rate.geo_zone.name : '' },
								{ title : 'Status', value: resourceData_.is_enabled ? 'Active' : 'Inactive' },
								{ title : 'Created At', value: resourceData_.flat_rate ? $dayjs(resourceData_.flat_rate.created_at).format('YYYY-MM-DD hh:mma') : '' },
								{ title : 'Updated At', value: resourceData_.flat_rate ? $dayjs(resourceData_.flat_rate.updated_at).format('YYYY-MM-DD hh:mma') : '' },
							]"
							:key="i"
							class="pb-1"
						>
							<span class="font-weight-bold text-capitalize">{{ content.title }}:</span>
							<span>{{ content.value }}</span>
						</div>
					</v-window-item>
					<v-window-item v-if="resourceData_.shipping_type_id == FREE_SHIPPING">
						<div
							v-for="(content,i) in [
								{ title : 'Name', value: resourceData_.name },
								{ title : 'Type', value: resourceData_.shipping_type ? resourceData_.shipping_type.name : '' },
								{ title : 'Subtotal(RM)', value: resourceData_.free_shipping ? resourceData_.free_shipping.subtotal : '' },
								{ title : 'Couriers', value: resourceData_.free_shipping && resourceData_.free_shipping.couriers.length > 0 ? resourceData_.free_shipping.couriers.map(x => x.name).join() : '' },
								{ title : 'Geo Zone', value: resourceData_.free_shipping ? resourceData_.free_shipping.geo_zone.name : '' },
								{ title : 'Status', value: resourceData_.is_enabled ? 'Active' : 'Inactive' },
								{ title : 'Created At', value: resourceData_.free_shipping ? $dayjs(resourceData_.free_shipping.created_at).format('YYYY-MM-DD hh:mma') : '' },
								{ title : 'Updated At', value: resourceData_.free_shipping ? $dayjs(resourceData_.free_shipping.updated_at).format('YYYY-MM-DD hh:mma') : '' },
							]"
							:key="i"
							class="pb-1"
						>
							<span class="font-weight-bold text-capitalize">{{ content.title }}:</span>
							<span>{{ content.value }}</span>
						</div>
					</v-window-item>
					<v-window-item v-if="resourceData_.shipping_type_id == WEIGHT_BASED">
						<div
							v-for="(content,i) in [
								{ title : 'Name', value: resourceData_.name },
								{ title : 'Type', value: resourceData_.shipping_type ? resourceData_.shipping_type.name : '' },
								{ title : 'First Weight(g)', value: resourceData_.weight_based ? resourceData_.weight_based.first_weight : '' },
								{ title : 'Price for First Weight(RM)', value: resourceData_.weight_based ? resourceData_.weight_based.price_first_weight : '' },
								{ title : 'Repeating Next Weight(g)', value: resourceData_.weight_based ? resourceData_.weight_based.repeating_weight : '' },
								{ title : 'Price for Repeating Next Weight(RM)', value: resourceData_.weight_based ? resourceData_.weight_based.price_repeating_weight : '' },
								{ title : 'Additional Fee(%)', value: resourceData_.weight_based ? resourceData_.weight_based.additional_fee : '' },
								{ title : 'Couriers', value: resourceData_.weight_based && resourceData_.weight_based.couriers.length > 0 ? resourceData_.weight_based.couriers.map(x => x.name).join() : '' },
								{ title : 'Geo Zone', value: resourceData_.weight_based ? resourceData_.weight_based.geo_zone.name : '' },
								{ title : 'Status', value: resourceData_.is_enabled ? 'Active' : 'Inactive' },
								{ title : 'Created At', value: resourceData_.weight_based ? $dayjs(resourceData_.weight_based.created_at).format('YYYY-MM-DD hh:mma') : '' },
								{ title : 'Updated At', value: resourceData_.weight_based ? $dayjs(resourceData_.weight_based.updated_at).format('YYYY-MM-DD hh:mma') : '' },
							]"
							:key="i"
							class="pb-1"
						>
							<span class="font-weight-bold">{{ content.title }}:</span>
							<span>{{ content.value }}</span>
						</div>
					</v-window-item>
					<v-window-item v-if="resourceData_.shipping_type_id == DYNAMIC_WEIGHT_BASED">
						<div
							v-for="(content,i) in [
								{ title : 'Name', value: resourceData_.name },
								{ title : 'Type', value: resourceData_.shipping_type ? resourceData_.shipping_type.name : '' },
								{ title : 'Couriers', value: resourceData_.dynamic_weight_based && resourceData_.dynamic_weight_based.couriers.length > 0 ? resourceData_.dynamic_weight_based.couriers.map(x => x.name).join() : '' },
								{ title : 'Geo Zone', value: resourceData_.dynamic_weight_based ? resourceData_.dynamic_weight_based.geo_zone.name : '' },
								{ title : 'Status', value: resourceData_.is_enabled ? 'Active' : 'Inactive' },
								{ title : 'Created At', value: resourceData_.dynamic_weight_based ? $dayjs(resourceData_.dynamic_weight_based.created_at).format('YYYY-MM-DD hh:mma') : '' },
								{ title : 'Updated At', value: resourceData_.dynamic_weight_based ? $dayjs(resourceData_.dynamic_weight_based.updated_at).format('YYYY-MM-DD hh:mma') : '' },
							]"
							:key="i"
							class="pb-1"
						>
							<span class="font-weight-bold">{{ content.title }}:</span>
							<span>{{ content.value }}</span>
						</div>
					</v-window-item>
					<v-window-item v-if="resourceData_.shipping_type_id == DYNAMIC_WEIGHT_BASED">
						<v-simple-table>
							<thead>
								<tr>
									<th class="text-left">
										Weight (g)
									</th>
									<th class="text-left">
										Price (RM)
									</th>
								</tr>
							</thead>
							<tbody>
								<tr
									v-for="(row,index) in resourceData_.dynamic_weight_based.weights"
									:key="index"
								>
									<td>{{ row.weight }}</td>
									<td>{{ row.price |formatMoney }}</td>
								</tr>
							</tbody>
						</v-simple-table>
					</v-window-item>
					<v-window-item v-if="resourceData_.shipping_type_id == BOX_TYPE_BASED">
						<div
							v-for="(content,i) in [
								{ title : 'Name', value: resourceData_.name },
								{ title : 'Type', value: resourceData_.shipping_type ? resourceData_.shipping_type.name : '' },
								{ title : 'Cost(RM)', value: resourceData_.box_type_based ? resourceData_.box_type_based.cost : '' },
								{ title : 'Couriers', value: resourceData_.box_type_based && resourceData_.box_type_based.couriers.length > 0 ? resourceData_.box_type_based.couriers.map(x => x.name).join() : '' },
								{ title : 'Box Type', value: resourceData_.box_type_based ? resourceData_.box_type_based.box_type.title : '' },
								{ title : 'Status', value: resourceData_.is_enabled ? 'Active' : 'Inactive' },
								{ title : 'Created At', value: resourceData_.box_type_based ? $dayjs(resourceData_.box_type_based.created_at).format('YYYY-MM-DD hh:mma') : '' },
								{ title : 'Updated At', value: resourceData_.box_type_based ? $dayjs(resourceData_.box_type_based.updated_at).format('YYYY-MM-DD hh:mma') : '' },
							]"
							:key="i"
							class="pb-1"
						>
							<span class="font-weight-bold text-capitalize">{{ content.title }}:</span>
							<span>{{ content.value }}</span>
						</div>
					</v-window-item>
					<!-- <v-window-item>
						<v-col cols="12">
							<div>Description:</div>
							<div
								class="display-paragraph px-4 py-2 overflow-auto radius-05" 
								style="max-height: 60vh; border: 1px solid #AAA; border-left-width: 5px;"
							>	
								<div>{{ resoureceData_.description }}</div>
							</div>
						</v-col>
						<v-col cols="12">
							<div>FAQ:</div>
							<div
								class="display-paragraph px-4 py-2 overflow-auto radius-05" 
								style="max-height: 60vh; border: 1px solid #AAA; border-left-width: 5px;"
							>	
								<div>{{ resoureceData_.faq }}</div>
							</div>
						</v-col>
					</v-window-item> -->
					<!-- <pre>{{ resourceData_ }}</pre> -->
				</v-window>
			</v-col>
		</v-row>

		<v-dialog v-model="form_dialog_" max-width="550px" persistent>
			<ShippingMethodForm
				:item="form_item_" :action="form_action_" :visible.sync="form_dialog_"
				:shipping-type-list="shipping_type_list"
				:geo-zone-list="geo_zone_list"
				:courier-list="courier_list"
				:box-type-list="box_type_list"
				@initialize="initialize_()"
			></ShippingMethodForm>
		</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 ShippingMethodCard from "./ShippingMethodCard"
import ShippingMethodForm from "./ShippingMethodForm"
import configShippingType from '@/js/configs/shippingType'
export default{
	components: {
		// WDropdownMenu,
		ShippingMethodCard,
		ShippingMethodForm
	},
	mixins: [
		resourceMixin,
		formActionMixin,
		errorHandlerMixin
	],
	data(){
		return {
			infoID: null,
			action: '',
			step: 0,
			tab_items: [],
			refs:{},
			dialog: false,
			shipping_type_list: [],
			geo_zone_list: [],
			courier_list: [],
			box_type_list: [],
			FLAT_RATE: configShippingType.FLAT_RATE,
			FREE_SHIPPING: configShippingType.FREE_SHIPPING,
			WEIGHT_BASED: configShippingType.WEIGHT_BASED,
			DYNAMIC_WEIGHT_BASED: configShippingType.DYNAMIC_WEIGHT_BASED,
			BOX_TYPE_BASED: configShippingType.BOX_TYPE_BASED,
		}
	},
	created(){
		if(this.$route.params.id){
			this.infoID = this.$route.params.id;
		}
		this.initialize_()
		if(this.$route.params.id){
			this.productID = this.$route.params.id;
		}
		this.getAllRefs_([
			this.getShippingTypeListRef(),
			this.getGeoZoneListRef(),
			this.getCourierListRef(),
			this.getBoxTypeListRef(),
		])
	},
	methods:{
		getResourceData_(){
			this.$api.getShippingMethodInfo(this.infoID).then((res) => {
				this.resourceData_ = res.data.result
				if(this.resourceData_.shipping_type_id == this.DYNAMIC_WEIGHT_BASED)
				{
					this.tab_items = [
						{ title: "Overview" },
						{ title: "Weight" }
					]
				}
				else
				{
					this.tab_items = [
						{ title: "Overview" }
					]
				}
			}).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) }
				},
			]
		},
		getShippingTypeListRef(){
			this.$api.getShippingTypeList({}).then((res)=>{
				this.shipping_type_list = res.data.result
			}).catch((err)=>{
				this.errorHandler_(err)
			})
		},
		getGeoZoneListRef(){
			this.$api.getGeoZoneList({}).then((res)=>{
				this.geo_zone_list = res.data.result
			}).catch((err)=>{
				this.errorHandler_(err)
			})
		},
		getCourierListRef(){
			this.$api.getCourierAll({}).then((res)=>{
				this.courier_list = res.data.result
			}).catch((err)=>{
				this.errorHandler_(err)
			})
		},
		getBoxTypeListRef(){
			let payload = {
				itemsPerPage: 99,
				only_bookable: 1
			}
			this.$api.getLockerBoxTypeList(payload).then((res)=>{
				let { data } = res.data.result
				this.box_type_list = data
			}).catch((err)=>{
				this.errorHandler_(err)
			})
		},
	}
}
</script>