<template>
	<v-container fluid>
		<v-row align="center" justify="end">
			<v-col cols="12" md="4">
				<v-select
					v-model="view_mode"
					label="Mode"
					:items="['History','Collect','Drop-off','On-going-history-paginate']"
					class="caption"
					outlined
					dense hide-details
					@change="getResourceData_()"
				></v-select>
			</v-col>
			<v-spacer></v-spacer>
			<v-col cols="auto">
				<w-action-btn-group
					:items="action_btn_group_items()"
				></w-action-btn-group>
			</v-col>
		</v-row>
		<v-card class="mt-4" color="transparent" flat>
			<v-data-table
				ref="dataTable"
				:headers="table_headers"
				:items="resourceDataSet_"
				:options.sync="settings_"
				:server-items-length="totalData_"
				:footer-props="{
					'items-per-page-options': [5, 10, 25, 50]
				}"
				:loading="model_loading_"
				disable-sort
				:item-class="row_classes_"
			>
				<template #[`item.booking_type`]="{ item }">
					<span class="text-capitalized">{{ item.booking_type }}</span>
				</template>
				<template #[`item.created_at`]="{ item }">
					{{ $dayjs(item.created_at).format('YYYY-MM-DD hh:mma') }}
				</template>
				<template #[`item.collected_at`]="{ item }">
					{{ item.collected_at || '-' }}
				</template>
				<template #[`item.status`]="{ item }">
					<span :class="item.status.class">{{ item.status.message }}</span>
				</template>
				<template #[`item.action`]="{ item }">
					<v-btn icon small @click="viewMore_(item)">
						<v-icon small>mdi-eye</v-icon>
					</v-btn>
				</template>
			</v-data-table>
		</v-card>

		<!-- filter dialog -->
		<w-side-dialog
			v-model="filter_dialog"
			title="Filters"
			clearable
			@clear="initFilters()"
		>
			<template #default>
				<v-row dense>
					<template v-for="(filter,i) in filter_options">
						<v-col :key="i" cols="12">
							<v-select
								v-model="filters_[filter.model]"
								:label="filter.label"
								:items="filter.items"
								class="caption"
								outlined
								dense hide-details
							></v-select>
						</v-col>
					</template>
				</v-row>
			</template>
			<template #actions>
				<div class="text-right">
					<v-btn 
						rounded block color="primary"
						@click="searchData_()"
					>
						Apply
					</v-btn>
				</div>
			</template>
		</w-side-dialog>

		<!-- model info dialog -->
		<v-navigation-drawer
			v-model="view_dialog_"
			floating
			app
			right
			temporary
			:style="$vuetify.breakpoint.mdAndUp ? 'min-width: 350px;' : '' "
		>	
			<v-card height="100%">
				<pre>{{ view_item_ }}</pre>
			</v-card>
		</v-navigation-drawer>
	</v-container>
</template>

<script>
import WActionBtnGroup from "@components/WActionBtnGroup"
import WSideDialog from "@components/WSideDialog"
import { resourceMixin } from "@/js/mixins/ResourceMixin"
import { formActionMixin } from "@/js/mixins/FormActionMixin"
import { errorHandlerMixin } from "@/js/mixins/ErrorHandlerMixin"
export default{
	components:{
		WActionBtnGroup,
		WSideDialog,
	},
	mixins: [
		resourceMixin,
		formActionMixin,
		errorHandlerMixin
	],
	props:{
		user: {
			type: Object,
			default: ()=>{
				return {}
			}
		},
	},
	data(){
		return {
			table_headers: [
				{ text: '#', value: 'id' },
				{ text: 'Booking Type', value: 'booking_type' },
				{ text: 'Action Type', value: 'inventory_type' },
				{ text: 'Locker', value: 'locker[0].name' },
				{ text: 'Compartment No', value: 'box.box_no' },
				{ text: 'Start at', value: 'created_at' },
				{ text: 'Collected at', value: 'collected_at' },
				{ text: 'Expired at', value: 'expired_at' },
				{ text: 'Status', value: 'status' },
				// { text: 'Actions', value: 'action', class: 'text-center' },
			],

			filter_dialog: false,

			filter_options:[],
			sort_options:[],
			view_mode: "History",
		}
	},
	created(){
		this.getAllRefs_([
		]).then(()=>{
			this.setupFilterBar()
			this.initFilters()
		}).then(()=>{
			this.initialize_()
		})
	},
	methods:{
		emitIntialize(){
			this.$emit('initialize')
			this.initialize_()
		},
		initFilters(){
			this.filters_ = {
				user_id : this.user.id || 0,
				type_id : null,
			}
		},
		getResourceData_(){
			let payload = {
				...this.setPagination_(),
				...this.search_,
				...this.filters_,
				...this.sort_,
			}
			this.model_loading_ = true

			this.$api.getBoxBookingList(this.view_mode.toLowerCase(), payload).then((res)=>{
				let { data, total } = res.data.result
				this.resourceDataSet_ = data
				this.totalData_ = total

				this.resourceDataSet_.forEach((item)=>{
					let classes = "grey--text"
					if(item.status.polar_id == 1){
						classes = "error--text"
					}else if(item.status.polar_id == 2){
						classes = "success--text"
					}
					item.status.class = classes
				})
			}).catch((err)=>{
				this.errorHandler_(err)
			}).finally(()=>{
				this.model_loading_ = false
			})
		},
		action_btn_group_items(){
			return [
				{
					icon: "mdi-refresh",
					disabled: this.model_loading_,
					action: () => { this.searchData_() }
				},
				// {	
				// 	icon: "mdi-filter-outline",
				// 	action: () => { this.filter_dialog = true }
				// },
			]
		},
		setupFilterBar(){
			this.filter_options = [
				{	
					cols: 12,
					model: "type_id",
					label: "Type",
					items: [ { value: null, text: "All" }, ...this.options_.credit_type || [] ],
				},
			]
		},
	}
}
</script>