<!--
 * @Author: Fly
 * @Date: 2025-12-20 09:41:16
 * @LastEditTime: 2025-12-29 09:34:02
 * @Description: 
-->
<template>
    <Drawer :title="DrawerTitle" :visible.sync="DrawerVisible" :showFooter="true" :size="$drawerWidth(800)" :skeleton="skeletonLoading">
        <div class="file-selector">
            <el-button type="primary" :size="ELsize" @click.stop="handleSlelctFile"
                :disabled="submitLoading">选择文件</el-button>
            <p :class="['p-text', ELsize]">仅支持.xlsx, .xls格式文件</p>
            <input ref="fileInput" type="file" accept=".xlsx, .xls" :value="''" class="file-input"
                @change="handleSlelctFileChange" />
        </div>
        <div v-if="uploadFileList.length > 0">
            <!-- <p :class="['p-text', ELsize]">已选择文件：</p> -->
            <p :class="['p-text p-file-item', ELsize]" v-for="(item, index) in uploadFileList" :key="index">
                <span>{{ item.name }}</span>
                <el-button class="del-btn" :size="ELsize" type="text" icon="el-icon-delete" style="color: red;"
                    @click.stop="uploadFileList.splice(index, 1)" />
            </p>
        </div>
        <div v-if="ErrorMsg" class="error-msg">
            <p v-html="ErrorMsg" :class="['p-text p-error-msg', ELsize]"></p>
        </div>
        <template v-slot:footer>
            <el-button :size="ELsize" type="primary" @click="handleImportRequest"
                :loading="submitLoading">上传文件</el-button>
            <el-button :size="ELsize" @click.stop="DrawerVisible = false">取消</el-button>
        </template>
    </Drawer>
</template>

<script>
import { importSubsidyQueueApi } from "@/api/shop";
export default {
    name: '',
    data() {
        return {
            skeletonLoading: false,
            DrawerVisible: false,
            DrawerTitle: '导入',
            submitLoading: false,
            uploadFileList: [],
            ErrorMsg: '',
            businessId: null,
        };
    },
    created() {
        // setTimeout(() => {
        //     this.openHandle({ businessId: 30, businessName: '区代分店其他城市' })
        // }, 100);
    },
    watch: {
        uploadFileList: function (newVal) {
            this.ErrorMsg = '';
        }
    },
    methods: {
        async openHandle(row) { 
            this.skeletonLoading = true;
            this.DrawerVisible = true;
            const { businessId, businessName } = row || {};
            this.DrawerTitle = `${businessName} 导入排队订单`;
            this.businessId = businessId;

            this.submitLoading = false;
            this.uploadFileList = [];
            this.ErrorMsg = '';
            this.skeletonLoading = false;
        },
        beforeUpload(file) {
            console.log('beforeUpload = ', file);
            return true;
        },
        handleChange(file, fileList) {
            console.log('handleChange = ', file, fileList);
            // this.fileList = fileList.slice(-3);
        },
        async handleImportRequest() {
            try {
                if (this.submitLoading) return
                if (!this.uploadFileList.length) {
                    this.$errorMsg('请选择文件');
                    return;
                };
                const file = this.uploadFileList[0];
                const formData = new FormData(); // 创建 FormData 对象
                formData.append("file", file); // 将文件添加到 FormData 对象中
                this.submitLoading = true;
                const { data } = await importSubsidyQueueApi(this.businessId, formData);
                this.ErrorMsg = data.message || '';
                // if (data.message) {
                //     this.$errorMsg('上传失败')
                // } else {
                //     this.$successMsg('上传成功')
                // }
            } catch (error) {
            } finally {
                this.submitLoading = false;
            };
        },


        handleSlelctFile() {
            this.$refs.fileInput.click();
        },
        handleSlelctFileChange(e) {
            console.log('handleSlelctFileChange = ', e);
            const files = e.target.files;
            this.uploadFileList = [files[0]];
            // const file = e.target.files[0];
            // if (file) {
            //     this.uploadFileList.push(file);
            // }
        }







    },
};
</script>
<style lang="scss" scoped>
.file-selector {
    display: flex;
    align-items: center;

    p {
        margin-left: 10px;
    }
}

.p-text {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

.file-input {
    display: none;
}

.p-file-item {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e4e7ed;

    .del-btn {
        display: none;
    }

    &:hover {
        cursor: pointer;

        .del-btn {
            display: inline-block;
        }
    }
}

.error-msg {
    margin-top: 30px;
    padding: 20px;
    border: 1px solid #e4e7ed;
    border-radius: 20px;

    .p-error-msg {
        height: auto;
    }
}
</style>
