<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.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 { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import {useRouter} from 'vue-router'
import axios from 'axios'

import { MoreFilled } from '@element-plus/icons-vue'
import CustomerModal from '@/components/CustomerModal/CustomerModal.vue'

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

const emit = defineEmits(['upload'])

const removeFile = (i) => tableData.value.splice(i, 1)
const changeUpload = (file) => {
  const formData = new FormData()
  formData.append('file', file.raw)
  axios
    .post('/api/excel/upload', formData, {
      headers: { 'Content-Type': 'multipart/form-data' }
    })
    .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) => {
  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
    };
    axios.post("/api/excel/saveUpload", params).then(({ data }) => {
        //

        emit('upload', data.result)
    });
}

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