<template>
    <div>
        <div class="button-box">
            <a-upload
                name="file"
                :multiple="true"
                accept=".xlsx"
                :action="uploadProps.action"
                :showUploadList = 'false'
                @change="handleChange"
                ref="table"
            >
                <a-button type="primary" style="margin-right:15px">
                    导入
                </a-button>
                <a-button type="" @click="stockExportModel">
                    模板下载
                </a-button>
            </a-upload>
        </div>
        <a-table
            style="margin-top:40px"
            :columns="columns"
            :row-key="record => record.id"
            :data-source="data"
            :pagination="pagination"
            @change="handleGetCameraIoList"
        >
            <span slot="actions" slot-scope="text">
            <template>
                <span>{{text.shelveId}} {{text.column}}列{{text.row}}行</span>
            </template>
          </span>
        </a-table>
    </div>
</template>


<script>
import {importStockExcelUrl} from "@/api/importExcel";
const columns = [
    {
        title: '序号',
        // dataIndex: 'id',
        customRender: (text, record, index) => {
            return (
                (record.pageNumber - 1) * 10 + index + 1
            )
        }
    },
    {
        title: '条码',
        dataIndex: 'trayCode',
    },
    
    {
        title: '货位',
        scopedSlots: {customRender: 'actions'}
    },
    {
        title: '导入时间',
        dataIndex: 'exportTime',
    },
];
export default {
    data() {
        return {
            pageNum:1,
            pageSize:10,
            data: [],
            pagination:{
                total:0,
                current:1,
                defaultPageSize:10, // 默认每页显示数量
                showTotal: total => `共 ${total} 条数据`, // 显示总数
                showSizeChanger:true, // 显示可改变每页数量
                pageSizeOptions: ['10', '20', '30'],
                onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize // 改变每页数量时更新显示
            },
            loading: false,
            columns,
            visible:false,
            modelType:'',
            modelData:[],
        };
    },
    computed:{
        uploadProps() {
            return {
                action: importStockExcelUrl//上传Excel文件的路径
            }
        }
    },
    mounted() {
        this.handleGetCameraIoList()
    },
    methods: {
        handleChange(data) {
            console.log(data)
            if (data.file.status == "done") { // 导入表格之后成功的回调
                this.$message.success(data.file.response.message)
                this.handleGetCameraIoList();
            } else if (data.file.status == 'error') { // 导入表格之后失败的回调
                this.$message.error(data.file.response.message)
            }
        },
        handleGetCameraIoList(pagination) {
            console.log(pagination)
            if(pagination){
                this.pagination.current = pagination.current;
                this.pagination.pageSize = pagination.pageSize;
                this.pageNum = pagination.current;
                this.pageSize = pagination.pageSize;
            }
            this.request();
        },
        request(){
            this.$api.httpApi.getStockpage({
                data: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                }
            }).then(res => {
                const pagination = {...this.pagination};
                pagination.total = res.data.total;
                this.data = res.data.list;
                this.pagination = pagination;
                res.data.list.forEach((value, index) => {
                    value.pageNumber = this.pagination.current
                });
            }).catch(err => {

            });
        },
        stockExportModel() {
            this.$api.httpApi.stockExportModel({
                params: {}
            }).then(res => {
                let blob = new Blob([res], {type: "application/vnd.ms-excel"})
                this.$utils.downloadFile('库存模板.xls', blob)
            }).catch(err => {

            });
        },
    },
    components:{

    }
};
</script>
<style lang="scss" scoped>
    .button-box{
        position: absolute;
        top:20px;
        right: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        .add{
            margin-right: 20px;
        }
    }
</style>
