<template>
    <div class="conent">
        <el-card :body-style="{ padding: '20px 20px 0 20px' }">
            <el-form ref="form" :inline="true" :model="form">

                <el-form-item label="日期:">
                    <el-date-picker v-model="form.date" type="date" placeholder="日期"></el-date-picker>
                </el-form-item>

                <el-form-item label="商品名称:">
                    <el-input v-model="form.goods_title" placeholder="商品名称"></el-input>
                </el-form-item>

                <el-form-item label="商品编码:">
                    <el-input v-model="form.goods_code" placeholder="商品编码"></el-input>
                </el-form-item>

                <el-form-item label="完整编码:">
                    <el-input v-model="form.external_sku_id" placeholder="完整编码"></el-input>
                </el-form-item>
                <el-form-item label="货架号:">
                    <el-input v-model="form.location" placeholder="货架号"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="handleChoose">筛选</el-button>
                    <el-button plain @click="handleReChoose">重置筛选</el-button>
                    <el-upload ref="myUpload" action="/api/goods_sku_location" :multiple="false" name="goodsSkuLocation"
                        :show-file-list="false" :on-success="uploadSuccess" :before-upload="beforeUpload"
                        :on-error="uploadError" style="display:inline-block;margin: 0 10px 0 10px;">
                        <el-button type="primary" plain>商品货架导入</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card style="margin-top: 10px">
            <el-table v-loading="loading" ref="multipleTable" :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="日期"></el-table-column>
                <el-table-column label="种类">
                    <template slot-scope="scope">
                        {{ scope.row.goods.type.name }}
                    </template>
                </el-table-column>
                <el-table-column label="品牌">
                    <template slot-scope="scope">
                        {{ scope.row.goods.brand.name }}
                    </template>
                </el-table-column>
                <el-table-column label="商品名称" prop="goods_name"></el-table-column>
                <el-table-column label="完整编码" prop="external_sku_id"></el-table-column>
                <el-table-column label="库存">
                    <template slot-scope="scope">
                        {{ scope.row.goods_sku.stock }}
                    </template>
                </el-table-column>
                <el-table-column prop="location" label="货架号"></el-table-column>
                <el-table-column prop="today_init_num" label="导入时数量"></el-table-column>
                <!-- <el-table-column prop="status" label="状态"></el-table-column>
                <el-table-column prop="note" label="备注"></el-table-column> -->
            </el-table>

            <!-- 分页功能 -->
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="current_page" :page-sizes="[15, 50, 100]" :page-size="per_page"
                    layout="total, sizes, prev, pager, next, jumper" :total="Paginationdata.total">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import { goodsSkuLocation } from "../../api/goods";
export default {
    data() {
        return {
            form: {
                date: "",
                goods_title: "",
                goods_code: "",
                external_sku_id: "",
                location: "",
            },
            dialogVisible: false,
            loading: true,
            tableData: [],
            Paginationdata: {}, //分页相关数据
            current_page: 1, //当前页
            per_page: 10, //每页显示数量
        };
    },
    mounted() {
        this.goodsSkuLocation();
    },
    methods: {
        // 店铺列表
        goodsSkuLocation(params = {}) {
            params.page = this.current_page;
            params.per_page = this.per_page;

            goodsSkuLocation(params).then((res) => {
                this.tableData = res.data.data;
                this.Paginationdata = res.data.meta;
            });
            this.loading = false;
        },
        //分页功能
        handleSizeChange(val) {
            //当前条数
            this.current_page = 1;
            this.per_page = val;
            this.goodsSkuLocation();
        },
        handleCurrentChange(val) {
            //当前页
            this.current_page = val;
            this.goodsSkuLocation();
        },
        // 筛选
        handleChoose() {
            this.form = {
                ...this.form,
                page: 1,
                per_page: this.per_page,
            };
            this.goodsSkuLocation(this.form);
        },

        // 重置筛选
        handleReChoose() {
            this.form = {
                shipping_status: "",
                is_supplier: "",
                cancel_status: "",
                after_sales_status: "",
            };
            this.goodsSkuLocation();
        },
        beforeUpload() {
            this.loadingModule = this.$loading({
                lock: true,
                text: '表格导入中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
        },
        uploadSuccess(response) {
            this.$message({
                message: response.message,
                type: "success",
            });
            this.loadingModule.close();
        },
        uploadError(err) {
            this.$message({
                message: err.errorMessage,
                type: "error",
            });
            this.loadingModule.close();
        }
    },
};
</script>

<style lang="scss" scoped>
.block {
    margin-top: 20px;
}
</style>
