<template>
	<v-container>
		<!-- introduction -->
		<v-row align="end">
			<v-col>
				<div class="headline font-weight-bold">Report</div>
				<div class="subtitle-2 grey--text">Reports that can be generated by the system.</div>
			</v-col>
		</v-row>
		<v-card class="mt-4" color="transparent" flat>
			<v-data-table
				ref="dataTable"
				:headers="table_headers"
				:items="resourceDataSet_"
				:footer-props="{
					'items-per-page-options': [5, 10, 25, 50]
				}"
				:loading="model_loading_"
				disable-sort
				:hide-default-header="view_module"
				:item-class="row_classes_"
				:class="view_module ? 'row-gap' : '' "
			>
				<template v-if="view_module" #body="{ items, headers }">
					<td :colspan="headers.length">
						<v-row dense class="ma-0">
							<v-col
								v-for="item in items" :key="item.id"
								cols="12" sm="6" md="4" 
								lg="3"
							>
							</v-col>
						</v-row>
					</td>
				</template>

				<template #[`item.download`]="{ item }">
					<v-btn icon small @click="download(item.download, item.payload, item.type_id)">
						<v-icon small>mdi-download</v-icon>
					</v-btn>
				</template>
			</v-data-table>
		</v-card>

		<!-- form dialog -->
		<v-dialog v-model="delivery_form" max-width="550px" persistent>
			<DeliveryInstructionExport
				:visible.sync="delivery_form"
			></DeliveryInstructionExport>
		</v-dialog>

		<v-dialog v-model="report_date_form" max-width="550px" persistent>
			<ReportDateForm
				:visible.sync="report_date_form" :type_id="report_date_type_id"
			></ReportDateForm>
		</v-dialog>
	</v-container>
</template>

<script>
import DeliveryInstructionExport from '../BoxDeliveries/BoxDeliveryInstructionForm'
import ReportDateForm from './ReportDateForm'

import { resourceMixin } from "@/js/mixins/ResourceMixin"
import { formActionMixin } from "@/js/mixins/FormActionMixin"
import { errorHandlerMixin } from "@/js/mixins/ErrorHandlerMixin"
export default{
	components:{
		DeliveryInstructionExport,
		ReportDateForm
	},
	mixins: [
		resourceMixin,
		formActionMixin,
		errorHandlerMixin
	],
	data(){
		return {
			table_headers: [
				{ text: '#', value: 'id' },
				{ text: 'Name', value: 'name' },
				{ text: 'Download', value: 'download', class: 'text-center' },
			],
			show_statistics: false,
			view_module: false,
			delivery_form: false,
			report_date_form: false,
			report_date_type_id: null

		}
	},
	created(){
		this.initialize_()

	},
	methods:{
		getResourceData_(){
			this.resourceDataSet_ = [
				{
					id: 1,
					name: 'User (All)',
					download: 'exportUserList',
					payload: {},
				},
				{
					id: 2,
					name: 'User (Partner)',
					download: 'exportUserList',
					payload: {role_id: 2},
				},
				{
					id: 3,
					name: 'User (Customer)',
					download: 'exportUserList',
					payload: {role_id: 1},
				},
				{
					id: 4,
					name: 'Locker',
					download: 'exportLockerList',
					payload: {},
				},
				{
					id: 5,
					name: 'Booking History (Inventory)',
					download: 'toggle_date_form',
					type_id: 1,
					payload: {},
				},
				{
					id: 6,
					name: 'Booking History (Delivery)',
					download: 'toggle_date_form',
					type_id: 2,
					payload: {},
				},
				{
					id: 7,
					name: 'Delivery Instruction',
					download: 'toggle_form',
					payload: {},
				},
			]
		},
		download(type, payload={}, type_id = null){
			if(type != 'toggle_form' && type != "toggle_date_form")
			{
				console.log(this.resourceDataSet_)
				let api = this.$api[type](payload)
				this.model_loading_ = true
				api.then((res)=>{
					let result = res.data.result
					this.downloadFile_(result.fileUrl, result.fileName)
				}).catch((err)=>{
					this.errorHandler_(err)
				}).finally(()=>{
					this.model_loading_ = false
				})
			}


			if(type == "toggle_form")
			{
				this.delivery_form = true
			}

			if(type == "toggle_date_form")
			{
				this.report_date_type_id = type_id
				this.report_date_form = true
			}
			
		},
	}
}
</script>