<template>
	<div>
	    <h2 class="intro-y text-lg font-medium mt-10">Lista de Vehiculos</h2>
	    <div class="grid grid-cols-12 gap-6 mt-5">
	        <div class="intro-y col-span-12 flex flex-wrap sm:flex-nowrap items-center mt-2">
	        	<router-link :to="{ name: 'vehicles-add'}">
            		<button class="btn btn-primary shadow-md mr-2">Registrar Nuevo</button>
                </router-link>
	            <div class="dropdown" data-tw-placement="bottom-end" @click="toggle('dropdown-menu-vehicle')">
	                <button class="dropdown-toggle btn px-2 box" aria-expanded="false" data-tw-toggle="dropdown">
	                    <span class="w-5 h-5 flex items-center justify-center">
	                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide w-4 h-4">
	                            <line x1="12" y1="5" x2="12" y2="19"></line>
	                            <line x1="5" y1="12" x2="19" y2="12"></line>
	                        </svg>
	                    </span>
	                </button>
	            </div>
	            <div class="hidden md:block mx-auto text-slate-500"> Mostrando 11 a 20 de 98 registros </div>
	            <div class="w-full sm:w-auto mt-3 sm:mt-0 sm:ml-auto md:ml-0">
	                <div class="w-56 relative text-slate-500">
	                    <input type="text" class="form-control w-56 box pr-10" placeholder="Search...">
	                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide w-4 h-4 absolute my-auto inset-y-0 mr-3 right-0">
	                        <circle cx="11" cy="11" r="8"></circle>
	                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
	                    </svg>
	                </div>
	            </div>
	        </div>
	        <div class="intro-y col-span-12 overflow-auto lg:overflow-visible">
	            <table class="table table-report -mt-2">
	                <thead>
	                    <tr>
	                        <th class="whitespace-nowrap">TIPO</th>
	                        <th class="whitespace-nowrap">DUEÑO</th>
	                        <th class="text-center whitespace-nowrap">PLACA</th>
	                        <th class="text-center whitespace-nowrap">MARCA</th>
	                        <th class="text-center whitespace-nowrap">AÑO</th>
	                        <th class="text-center whitespace-nowrap">ACCIONES</th>
	                    </tr>
	                </thead>
	                <tbody>
	                    <tr class="intro-x" v-for="(item, index) in vehicles" :key="index + 'regiustre'">
	                        <td class="w-40">
	                            <div class="flex">
	                                <div class="w-10 h-10 ">
	                                    <img alt="Tipo de Auto" class="" src="@/assets/3ejes.png">
	                                    <!-- <img src="{{item.type}}" alt="Tipo de Auto" class="" /> -->
	                                </div>
	                            </div>
	                        </td>
	                        <td>
	                            <a href="" class="font-medium whitespace-nowrap">{{ item.owner }}</a>
	                            <!-- <div class="text-slate-500 text-xs whitespace-nowrap mt-0.5">PC &amp; Laptop</div> -->
	                        </td>
	                        <td class="text-center">{{item.plate}}</td>
	                        <td class="text-center">{{item.brand}}</td>
	                        <td class="text-center">{{item.year}}</td>
	                        <td class="table-report__action w-56">
	                            <div class="flex justify-center items-center">
	                                <a class="flex items-center mr-3" href="javascript:;">
	                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide w-4 h-4 mr-1">
	                                        <polyline points="9 11 12 14 22 4"></polyline>
	                                        <path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"></path>
	                                    </svg> Editar </a>
	                                <a class="flex items-center text-danger" href="javascript:;">
	                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide w-4 h-4 mr-1">
	                                        <polyline points="3 6 5 6 21 6"></polyline>
	                                        <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"></path>
	                                        <line x1="10" y1="11" x2="10" y2="17"></line>
	                                        <line x1="14" y1="11" x2="14" y2="17"></line>
	                                    </svg> Borrar </a>
	                            </div>
	                        </td>
	                    </tr>
	                </tbody>
	            </table>
	        </div>
	        <div class="intro-y col-span-12 flex flex-wrap sm:flex-row sm:flex-nowrap items-center">
	            <nav class="w-full sm:w-auto sm:mr-auto">
	                <ul class="pagination">
	                    <li class="page-item">
	                        <a class="page-link" href="#">
	                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide w-4 h-4">
	                                <polyline points="11 17 6 12 11 7"></polyline>
	                                <polyline points="18 17 13 12 18 7"></polyline>
	                            </svg>
	                        </a>
	                    </li>
	                    <li class="page-item">
	                        <a class="page-link" href="#">
	                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide w-4 h-4">
	                                <polyline points="15 18 9 12 15 6"></polyline>
	                            </svg>
	                        </a>
	                    </li>
	                    <li class="page-item">
	                        <a class="page-link" href="#">...</a>
	                    </li>
	                    <li class="page-item">
	                        <a class="page-link" href="#">1</a>
	                    </li>
	                    <li class="page-item active">
	                        <a class="page-link" href="#">2</a>
	                    </li>
	                    <li class="page-item">
	                        <a class="page-link" href="#">3</a>
	                    </li>
	                    <li class="page-item">
	                        <a class="page-link" href="#">...</a>
	                    </li>
	                    <li class="page-item">
	                        <a class="page-link" href="#">
	                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide w-4 h-4">
	                                <polyline points="9 18 15 12 9 6"></polyline>
	                            </svg>
	                        </a>
	                    </li>
	                    <li class="page-item">
	                        <a class="page-link" href="#">
	                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide w-4 h-4">
	                                <polyline points="13 17 18 12 13 7"></polyline>
	                                <polyline points="6 17 11 12 6 7"></polyline>
	                            </svg>
	                        </a>
	                    </li>
	                </ul>
	            </nav>
	            <select class="w-20 form-select box mt-3 sm:mt-0">
	                <option>10</option>
	                <option>25</option>
	                <option>35</option>
	                <option>50</option>
	            </select>
	        </div>
	    </div>
	    <div id="dropdown-menu-vehicle" class="dropdown-menu w-40" style="width: 160px; position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-969px, 218.25px, 0px);">
	    	<ul class="dropdown-content" @click="toggle('dropdown-menu-vehicle')">
	    		<li>
	    			<a class="dropdown-item cursor-pointer">
	    				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide w-4 h-4 mr-2">
	    					<polyline points="6 9 6 2 18 2 18 9"></polyline>
	    					<path d="M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2"></path>
	    					<rect x="6" y="14" width="12" height="8"></rect>
	    				</svg> Imprimir </a>
	    			</li>
	    			<li>
	    				<a class="dropdown-item cursor-pointer">
	    					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide w-4 h-4 mr-2">
	    						<path d="M14.5 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V7.5L14.5 2z"></path>
	    						<polyline points="14 2 14 8 20 8"></polyline>
	    						<line x1="16" y1="13" x2="8" y2="13"></line>
	    						<line x1="16" y1="17" x2="8" y2="17"></line>
	    						<line x1="10" y1="9" x2="8" y2="9"></line>
	    					</svg> Exportar a Excel </a>
	    				</li>
	    				<li>
	    					<a class="dropdown-item cursor-pointer">
	    						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide w-4 h-4 mr-2">
	    							<path d="M14.5 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V7.5L14.5 2z"></path>
	    							<polyline points="14 2 14 8 20 8"></polyline>
	    							<line x1="16" y1="13" x2="8" y2="13"></line>
	    							<line x1="16" y1="17" x2="8" y2="17"></line>
	    							<line x1="10" y1="9" x2="8" y2="9"></line>
	    						</svg> Exportar a PDF </a>
	    					</li>
	    				</ul>
	    			</div>

	</div>
</template>

<script>
	export default{
		components: {},
		methods: {
			toggle(module) {
				let element = document.getElementById(module);
				console.log(module)
				if (element) {
					element.classList.toggle("show")
				}
			},
		},
		computed: {
            vehicles() {
                return [
                    {
                    	owner: 'Catherine Zeta-Jones',
                    	type: '3ejes.png',
                    	brand: 'Ford',
                    	year: '2012',
                    	plate: '123-456',
                    },
                    // {
                    // 	owner: 'Bruce Willis',
                    // 	type: '@/assets/4ejes.png',
                    // 	brand: 'Ford',
                    // 	year: '2012',
                    // 	plate: '123-456',
                    // },
                    // {
                    // 	owner: 'Robert De Niro',
                    // 	type: '@/assets/camion350.png',
                    // 	brand: 'Ford',
                    // 	year: '2012',
                    // 	plate: '123-456',
                    // },
                    // {
                    // 	owner: 'Vin Diesel',
                    // 	type: '@/assets/sedan.png',
                    // 	brand: 'Ford',
                    // 	year: '2012',
                    // 	plate: '123-456',
                    // },
                    // {
                    // 	owner: 'Denzel Washington',
                    // 	type: '@/assets/camion750.png',
                    // 	brand: 'Ford',
                    // 	year: '2012',
                    // 	plate: '123-456',
                    // },
                    // {
                    // 	owner: 'Edward Norton',
                    // 	type: '@/assets/6ejes.png',
                    // 	brand: 'Ford',
                    // 	year: '2012',
                    // 	plate: '123-456',
                    // },
                    // {
                    // 	owner: 'Richard Gere',
                    // 	type: '@/assets/5ejes.png',
                    // 	brand: 'Ford',
                    // 	year: '2012',
                    // 	plate: '123-456',
                    // },
                    // {
                    // 	owner: 'Sean Connery',
                    // 	type: '@/assets/4ejes.png',
                    // 	brand: 'Ford',
                    // 	year: '2012',
                    // 	plate: '123-456',
                    // },
                    // {
                    // 	owner: 'Christian Bale',
                    // 	type: '@/assets/sedan.png',
                    // 	brand: 'Ford',
                    // 	year: '2012',
                    // 	plate: '123-456',
                    // },
                    // {
                    // 	owner: 'Keira Knightley',
                    // 	type: '@/assets/3ejes.png',
                    // 	brand: 'Ford',
                    // 	year: '2012',
                    // 	plate: '123-456',
                    // },
                ]
            }
        }
	}
</script>