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

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

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

            <FilterItem label="品牌">
                <SelectBrand v-model="brandId"></SelectBrand>
            </FilterItem>

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

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

            <FilterItem>
                <Button type="primary"  @click="upload">开始上传</Button>
            </FilterItem>
        </LayoutFilter>
    </LayoutBody>
</template>

<script>
    import {SelectCategory, SelectBrand} from 'components/select';
    import _ from 'lodash';

    export default {
        data() {
            return {
                fileType: {
                    model: 0,
                    list: [
                        {
                            id: 0,
                            label: '我的商品表'
                        }
                    ]
                },
                operator: {
                    model: 0,
                    list: [
                        {
                            id: 0,
                            label: '创建商品'
                        }
                    ]
                },
                xlsxFile: '',
                brandId: '',
                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: ''
                    }
                }
            };
        },
        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.xlsxFile = files[0].name;
            },
            upload() {
                this.$refs.xlsxUpload.upload({brandId: this.brandId});
            },
            onSuccess(data) {
                if (data.code === 200) {
                    if (_.has(data.data, 'failFileReason')) {
                        this.$Message.error('部分导入成功');
                    } else {
                        this.$Message.info('全部导入成功');
                    }
                } else {
                    this.$Message.error('导入失败');
                }
            },
            onError() {

            },
            onProgress() {

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

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