<template>
  <div class="container m-auto pt-10">
    <el-form ref="formRef" :model="formState" label-width="100px">

      <el-form-item label="收单条码：">
        <el-input v-model="formState.acquiringBarcode" ></el-input>
      </el-form-item>

      <el-form-item label="客户：">
        <el-input v-model="formState.customerName" disabled>
          <template #append>
            <el-button :icon="MoreFilled" @click="visible = true" />
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="选择文件：">
        <el-upload
          action=""
          accept=".xlsx,.xls"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="changeUpload"
        >
          <el-button type="primary">上传文件</el-button>
          <template #tip>
            <div class="el-upload__tip">选择你要上传的excel文件，仅支持xlsx、xls格式</div>
          </template>
        </el-upload>

        <el-table :data="tableData" border size="small" style="width: 100%">
          <el-table-column prop="filename" label="文件名称" />
          <el-table-column
            prop="filesize"
            label="文件大小"
            :formatter="(r, c, v) => v + ' B'"
            width="180"
          />
          <el-table-column prop="action" label="操作" width="90">
            <template #default="{ $index }">
              <el-button type="danger" size="small" @click="removeFile($index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button type="default" @click="goBack">返回</el-button>
      </el-form-item>
    </el-form>
  </div>

  <CustomerModal v-model:visible="visible" @confirm="confirmCustomer" />
</template>

<script lang="ts" setup>
import axios from 'axios'
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useCommentExcel } from '@/stores/commentExcel'

import { MoreFilled } from '@element-plus/icons-vue'
import CustomerModal from '@/components/CustomerModal/CustomerModal.vue'
import { apiSaveUpload, uploadFile } from '@/api/excel'

const visible = ref(false)
const formRef = ref()
const tableData = ref([])
const formState = reactive({
  customerName: '',
  customerId: '',
  acquiringBarcode:''
})
const emit = defineEmits(['upload'])

const removeFile = (i: number) => tableData.value.splice(i, 1)

const changeUpload = (file: any) => {
  const formData = new FormData()
  formData.append('file', file.raw)

  uploadFile(formData).then(({ data }) => {
    if (data?.code === 200) {
      tableData.value.push({
        filename: file.name,
        filesize: file.size,
        url: data.message
      })
    } else {
      return ElMessage.error('上传失败！')
    }
  })
}
const confirmCustomer = (list: any) => {
  const [item] = list
  if (!item) return

  formState.customerId = item.customerId
  formState.customerName = item.customerName
}

const submitForm = async () => {
  await formRef.value.validate()

  if (!tableData.value.length) {
    return
  }
  const params = {
    filePaths: tableData.value.map((item) => item.url),
    customerId: formState.customerId,
    acquiringBarcode: formState.acquiringBarcode,
  }
  apiSaveUpload(params).then(({ data }) => {
    // const { setFileInfo } = useCommentExcel()
    // setFileInfo(data.result)
    emit('upload', data.result)
  })
}

const goBack = () => {
  const router = useRouter()
  router.go(-1)
}
</script>
<style lang="scss" scoped></style>
