<template>
    <layout-body>
        <layout-filter :no-line="true" :col="1">
            <filter-item>
                <div class="import-title">导出</div>
            </filter-item>
        </layout-filter>
        <layout-filter :no-line="true" :col="1">
            <filter-item label="文件类型">
                <Select v-model="fileType.model">
                    <Option v-for="item in fileType.list" :value="item.id" :key="item">{{ item.label }}</Option>
                </Select>
            </filter-item>
            <filter-item label="选择类目">
                <select-category @select-change="sortChange">
                </select-category>
            </filter-item>
            <filter-item>
                <Button type="primary" @click="exportFile">导出</Button>
            </filter-item>
        </layout-filter>

        <layout-filter :no-line="true" :col="1">
            <filter-item>
                <div class="import-title">批导文件上传</div>
            </filter-item>
        </layout-filter>

        <layout-filter :no-line="true" :col="1">
            <filter-item label="操作类型">
                <Select v-model="operator.model">
                    <Option v-for="item in operator.list" :value="item.id" :key="item">{{ item.label }}</Option>
                </Select>
            </filter-item>

            <filter-item label="品牌">
                <select-brand v-model="brandId"></select-brand>
            </filter-item>

            <filter-item label="销售类型">
                <select-sell-type v-model="sellType" :brandId="brandId"></select-sell-type>
            </filter-item>

            <filter-item label="上传文件">
                <Input v-model="xlsxFile" style="width: 300px"></Input>

                <upload-xlsx
                        ref="xlsxUpload"
                        :action="action"
                        :on-change="onChange"
                        :on-success="onSuccess"
                        :on-error="onError"
                        :on-progress="onProgress">
                    <Button type="ghost">浏览</Button>
                    <a @click="download">下载 Excel 模板</a>
                </upload-xlsx>
            </filter-item>

            <filter-item>
                <Button type="primary" :loading="loading" @click="upload">开始上传</Button>
            </filter-item>
        </layout-filter>

        <div v-if="importInfo">
            <div v-if="importInfo.length !== 0">
                <div class="error-title">导入错误记录</div>
                <div class="error-content" v-for="e in importInfo"> {{e}} </div>
            </div>
        </div>
    </layout-body>
</template>

<script>
    import _ from 'lodash';

    export default {
        data() {
            return {
                fileType: {
                    model: 0,
                    list: [
                        {
                            id: 0,
                            label: '我的商品表'
                        }
                    ]
                },
                operator: {
                    model: 0,
                    list: [
                        {
                            id: 0,
                            label: '创建商品'
                        }
                    ]
                },
                xlsxFile: '',
                brandId: '',
                sellType: '',
                action: '/importSeller',
                sort: {
                    first: {
                        label: '选择类目',
                        holder: '选择一级类目',
                        labelSpan: 6,
                        fieldSpan: 18,
                        model: ''
                    },
                    second: {
                        label: '二级类目',
                        holder: '选择二级类目',
                        labelSpan: 6,
                        fieldSpan: 18,
                        model: ''
                    },
                    third: {
                        label: '三级类目',
                        holder: '选择三级类目',
                        labelSpan: 6,
                        fieldSpan: 18,
                        model: ''
                    }
                },
                loading: false,
                importInfo: null
            };
        },
        methods: {
            exportFile() {
                const max = this.sort.first.model;
                const mid = this.sort.second.model;
                const min = this.sort.third.model;

                const href = '/Api/platform/exportSellerProductList?' +
                `maxSortId=${max}&middleSortId=${mid}&smallSortId=${min}`;

                window.open(href, '_blank');
            },
            sortChange(val) {
                this.sort.first.model = val.max;
                this.sort.second.model = val.mid;
                this.sort.third.model = val.min;
            },
            onChange(files) {
                if (files.length !== 1) {
                    return;
                }

                this.importInfo = null;
                this.xlsxFile = files[0].name;
            },
            upload() {
                this.loading = true;
                this.$refs.xlsxUpload.upload({
                    brandId: this.brandId,
                    sellType: this.sellType
                }).then(() => {
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                });
            },
            onSuccess(data) {
                if (data.code === 200) {
                    if (_.has(data.data, 'failFileReason')) {
                        this.$Message.error('部分导入成功');
                        this.importInfo = data.data.failFileReason;
                    } else {
                        this.$Message.info('全部导入成功');
                    }
                } else {
                    this.$Message.error('导入失败');
                }
            },
            onError() {
                this.loading = false;
            },
            onProgress() {

            },
            download() {
                window.open('/Api/platform/downloadFile', '_blank');
            }
        }
    };
</script>

<style lang="scss" scoped>
.import-title {
    font-size: 15px;
    font-weight: bold;
    background-color: #fafafa;
    height: 40px;
    line-height: 40px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.error-title {
    color: red;
    font-size: 15px;
    font-weight: bold;
    background-color: #fafafa;
    height: 40px;
    line-height: 40px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.error-content {
    color: red;
    line-height: 25px;
}
</style>