<template>
	<div>
		<v-card class="radius-10">
			<v-card-title>
				<span class="headline">{{ (action == 'edit') ? 'Edit Box Type' : 'New Box Type' }}</span>
			</v-card-title>
			<v-divider class="mb-2"></v-divider>
			<v-card-text class="py-4">
				<v-row dense>
					<v-col cols="12" md="12">
						<v-text-field
							v-model="form.title"
							label="Title" placeholder="Title"
							dense
							counter="20"
							:error-messages="errors.title"
						></v-text-field>
					</v-col>
					<v-col cols="12" md="4">
						<v-text-field
							v-model="form.length"
							label="Length" placeholder="Length"
							type="number" step="0.1" min="0"
							dense
							:error-messages="errors.length"
						></v-text-field>
					</v-col>
					<v-col cols="12" md="4">
						<v-text-field
							v-model="form.width"
							label="Width" placeholder="Width"
							type="number" step="0.1" min="0"
							dense
							:error-messages="errors.width"
						></v-text-field>
					</v-col>
					<v-col cols="12" md="4">
						<v-text-field
							v-model="form.height"
							label="Height" placeholder="Height"
							type="number" step="0.1" min="0"
							dense
							:error-messages="errors.height"
						></v-text-field>
					</v-col>
					<v-col cols="12" md="6">
						<v-text-field
							v-model.number="form.booking_fees"
							outlined dense
							label="Booking Fees (per 60min)" placeholder="Booking Fees"
							type="number" min="0" step="0.01"
							:error-messages="errors.booking_fees"
						>
							<template #prepend-inner>
								<span class="body-2 pr-1">RM</span>
							</template>
						</v-text-field>
					</v-col>
					<v-col cols="12" md="6">
						<v-text-field
							v-model.number="form.overtime_fees"
							outlined dense
							label="Overtime Fees (per 60min)" placeholder="Overtime Fees"
							type="number" min="0" step="0.01"
							:error-messages="errors.overtime_fees"
						>
							<template #prepend-inner>
								<span class="body-2 pr-1">RM</span>
							</template>
						</v-text-field>
					</v-col>
					<v-col cols="12" md="12">
						<v-textarea
							v-model="form.description"
							label="Description" placeholder="Description"
							dense
							outlined
							rows="3"
							counter="100"
							:error-messages="errors.description"
						></v-textarea>
					</v-col>
				</v-row>
			</v-card-text>
			<v-card-actions>
				<v-spacer></v-spacer>
				<v-btn 
					color="blue darken-1" text title="Cancel" 
					@click="closeDialog()"
				>
					Cancel
				</v-btn>
				<v-btn 
					color="blue darken-1" 
					text title="Save" 
					:loading="submit_loading"
					@click="submitForm(form)"
				>
					Save
				</v-btn>
			</v-card-actions>
		</v-card>
	</div>
</template>

<script>
import { errorHandlerMixin } from "@/js/mixins/ErrorHandlerMixin"
export default{
	components:{
	},
	mixins: [ 
		errorHandlerMixin
	],
	props:{
		visible: {
			type: Boolean,
			required: true,
		},
		item: {
			type: Object,
			required: true,
			default: ()=>{
				return {}
			}
		},
		action: {
			type: String,
			required: true,
		},
		roleTypes:{
			type: Array,
			default: ()=>{
				return []
			}
		}
	},
	data () {
		return {
			form : {},
			errors : {},
			submit_loading : false,
		}
	},
	watch:{
		'item':{
			handler(){
				this.form = this.item
			},
			immediate: true,
		},
		'visible':{
			handler: function (newVal){
				if(!newVal){
					// reset
					this.form = {}
					this.errors = {}
				}
			},
			immediate : true,
		},
	},
	created(){
	},
	methods: {
		initialize(){
			this.closeDialog()
			this.$emit('initialize')
		},
		closeDialog(){
			this.$emit('update:visible',false)
		},
		submitForm(item){
			this.saveModel(item)
		},
		saveModel(item){
			this.submit_loading = true
			this.errors = {}
			let payload = {
				id : item.id,
				title : item.title,
				length : item.length,
				width: item.width,
				height: item.height,
				booking_fees : item.booking_fees,
				overtime_fees : item.overtime_fees,
				description: item.description,
			}	
			let theApi = (this.action == "new") ? this.$api.createLockerBoxType(payload) : this.$api.updateLockerBoxType(payload)
			theApi.then((res)=>{
				this.$toast.success(res.data.message)
				this.initialize()
			}).catch((err) => {
				this.errors = this.errorHandler_(err,[
					"title",
					"length",
					'width',
					'height',
					'booking_fees',
					'overtime_fees',
					'description',
				])
			}).finally(()=>{
				this.submit_loading = false
			})
		},
	}
}
</script>