<!-- card อัปโหลดเอกสาร -->
<template>
  <HeaderTop
    v-model:edit="edit"
    header="อัปโหลดเอกสาร(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)"
    icon="mdi-file-document"
    :addData="true"
    :editOnly="true"
    :cancel="cancelData"
    :editData="status == 'register' || status == 'rejectRegister'"
  />

  <div v-if="edit" class="row justify-center row col-12">
    <q-input
      class="q-mt-sm col-12"
      :outlined="edit"
      dense
      lazy-rules
      :readonly="!edit"
      :borderless="!edit"
      v-model="name"
      :rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
      :label="`${'ชื่อเอกสาร'}`"
    />
    <q-uploader
      color="blue"
      type="file"
      flat
      auto-upload
      :factory="fileUpload"
      class="full-width"
      :max-size="10000000"
      accept=".jpg,.png,.pdf,.csv,.doc"
      bordered
      label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]"
    />
  </div>
  <q-card bordered flat class="full-width q-my-md">
    <q-list separator>
      <q-item v-for="file in files" :key="file.key" class="q-my-xs">
        <q-item-section>
          <q-item-label class="full-width ellipsis">
            {{ file.name }}
          </q-item-label>

          <q-item-label caption> สถานะ: {{ file.status }} / {{ file.sizeLabel }} </q-item-label>
        </q-item-section>
        <q-item-section top side>
          <div class="q-gutter-sm">
            <q-btn size="12px" flat dense round color="blue" icon="mdi-download-outline">
              <q-tooltip>ดาวน์โหลด</q-tooltip>
            </q-btn>
            <q-btn
              size="12px"
              flat
              dense
              round
              color="red"
              icon="mdi-delete-outline"
              v-if="edit"
            >
              <q-tooltip>ลบไฟล์</q-tooltip>
            </q-btn>
          </div>
        </q-item-section>
      </q-item>
    </q-list>
  </q-card>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import HeaderTop from '@/components/top.vue'

const props = defineProps({
  loader: {
    //หน้า main มีการอัพเดทค่าให้ refresh data
    type: Boolean,
    required: true
  },
  statusEdit: {
    type: Boolean,
    required: true
  },
  notiNoEdit: {
    type: Function,
    default: () => console.log('not function')
  },
  status: {
    type: String,
    required: true
  }
})

const edit = ref<boolean>(props.status == 'register' || props.status == 'rejectRegister')
const name = ref<string>('')
const files = ref<any>([
  {
    key: 1,
    name: 'เอกสารข้อมูลการเปลี่ยนชื่อ',
    status: 'อัปโหลดเสร็จสิ้น',
    sizeLabel: '176MB'
  },
  {
    key: 2,
    name: 'เอกสารข้อมูลการสมรส',
    status: 'อัปโหลดเสร็จสิ้น',
    sizeLabel: '89MB'
  }
])
const emit = defineEmits(['update:loader', 'update:statusEdit'])

watch(edit, (count: boolean, prevCount: boolean) => {
  emit('update:statusEdit', count)
})

onMounted(async () => {})

const fileUpload = async (file: any) => {
  name.value = file[0].name
  return {
    url: 'http://localhost:4444/upload',
    method: 'POST'
  }
}

const cancelData = () => {}
</script>
