<!-- card อัปโหลดเอกสาร -->
<template>
  <q-card flat bordered class="col-12 q-px-lg q-py-md">
    <div class="col-12">
      <HeaderTop
        v-model:edit="edit"
        header="อัปโหลดเอกสาร(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)"
        icon="mdi-file-document"
        :addData="true"
        :editOnly="true"
        :cancel="cancelData"
        :editData="step == 2"
      />
    </div>
    <div class="col-12">
      <div v-if="edit" class="row justify-center q-pa-md">
        <div class="col-4">
          <q-input
            class="q-my-sm"
            hide-bottom-space
            :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"
            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            bordered
            label="[ไฟล์ jpg,png,pdf,csv,doc]"
          />
        </div>
      </div>
      <q-separator class="q-mt-sm" />
      <q-card bordered flat class="full-width">
        <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>
    </div>
  </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')
  },
  step: {
    type: Number,
    required: true
  }
})

const edit = ref<boolean>(false)
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>
