<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="发票上传"
    width="500px"
    :bodyStyle="{ height: '240px' }"
    @ok="handleOk"
    ><a-upload-dragger
      v-model:fileList="fileList"
      name="file"
      :beforeUpload="beforeUpload"
      :max-count="1"
      :multiple="true"
      :action="updateInvoiceUrl"
      @change="handleChange"
      @drop="handleDrop"
      :disabled="status === 10"
    >
      <p class="ant-upload-drag-icon">
        <inbox-outlined></inbox-outlined>
      </p>
      <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
    </a-upload-dragger>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { computed, ref } from 'vue';
  import type { UploadProps, UploadChangeParam } from 'ant-design-vue';
  import { InboxOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';
  import { updateInvoiceInfo } from '@/api/project/invoice';

  const emit = defineEmits(['success']);
  const uploadUrl = ref('http://47.104.8.35:80/api/localStorage/upload_file_oss?name=');
  const updateInvoiceUrl = ref('http://47.104.8.35:80/api/localStorage/upload_file_oss?name=');
  const invoiceUrl = ref();
  const id = ref();
  const status = ref();
  const [register, { closeModal }] = useModalInner(async (data) => {
    console.log(data);
    status.value = data.data.status;
    // fileList.value = [];
    fileList.value = [];
    invoiceUrl.value = data.data.invoiceUrl;
    id.value = data.data.id;
  });

  const handleChange = (info) => {
    if (info.file.status == 'done') {
      updateInvoiceUrl.value = info.file.response.data.fileUrl;
      invoiceUrl.value = updateInvoiceUrl.value;
    }
  };
  function beforeUpload(info) {
    updateInvoiceUrl.value = uploadUrl.value + info.name;
  }
  function handleDrop(e: DragEvent) {
    console.log(e);
  }
  const fileList = ref<UploadProps['fileList']>([]);

  async function handleOk() {
    await updateInvoiceInfo({
      id: id.value,
      invoiceUrl: invoiceUrl.value,
    });
    fileList.value = [];
    emit('success');
    closeModal();
  }
</script>