<script setup>
import { date, array, string } from 'alga-js'
import { DatePicker } from 'tedir-calendar'
import { SelectBox } from 'tedir-select'
import { toast } from 'bulma-toast'

const route = useRoute()
const config = useRuntimeConfig()
const organizationId = useCookie('logship_organization_id')
const warehouseId = useCookie('logship_warehouse_id')

const props = defineProps({
  modelValue: Array,
  action: String,
  info: Object
})

const emit = defineEmits(['update:modelValue', 'save'])

const entries = ref(props.modelValue || [])
watch(() => props.modelValue, () => {
  entries.value = props.modelValue
})

const save = async () => {
  emit('update:modelValue', entries.value)
  emit('save', entries.value)
}
</script>

<template>
  <div class="card sd-none rd-0px bd-1px_solid_hexe4e3e6" @mouseleave="save">
    <div class="tableResponsive">
      <table class="table tableList tableFlush">
        <thead>
          <tr> 
            <th>HS Code</th>
            <th>Description</th>
            <th>Product ID</th>
            <th class="w-120px">Quantity</th>
            <th>Value</th>
            <th>Weight</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="Number(entries.length) === 0">
            <td :colspan="action !== 'view' ? 8 : 7" class="align-center">No shipment line</td>
          </tr>
          <template v-for="(entry, index) in entries" :key="index">
            <tr>
              <td>
                <input type="text" v-model="entry.hs_code" class="input" />
              </td>
              <td>
                <input type="text" v-model="entry.description" class="input" />
              </td>
              <td>
                <input type="text" v-model="entry.product_id" class="input" />
              </td>
              <td>
                <input type="text" v-model="entry.quantity" class="input" />
              </td>
              <td>
                <input type="text" v-model="entry.value" class="input" />
              </td>
              <td>
                <input type="text" v-model="entry.weight" class="input" />
              </td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
  </div>
</template>