<template>
    <layout-body>
        <layout-filter>
            <filter-item :label="filters.id.label">
                <Input v-model.trim="filters.id.model"
                       :placeholder="filters.id.holder"></Input>
            </filter-item>

            <filter-item :label="filters.expressNumber.label">
                <Input v-model.trim="filters.expressNumber.model"
                       :placeholder="filters.expressNumber.holder"></Input>
            </filter-item>

            <filter-item :label="filters.productSkn.label">
                <Input v-model.trim="filters.productSkn.model"
                       :placeholder="filters.productSkn.holder"></Input>
            </filter-item>

            <filter-item :label="filters.sknFactoryCode.label">
                <Input v-model.trim="filters.sknFactoryCode.model"
                       :placeholder="filters.sknFactoryCode.holder"></Input>
            </filter-item>

            <filter-item :label="filters.skuFactoryCode.label">
                <Input v-model.trim="filters.skuFactoryCode.model"
                       :placeholder="filters.skuFactoryCode.holder"></Input>
            </filter-item>

            <filter-item :label="filters.createTime.label">
                <Date-picker v-model="filters.createTime.model"
                             type="datetimerange" format="yyyy-MM-dd" placeholder="选择日期和时间">
                </Date-picker>
            </filter-item>

            <filter-item :label="filters.auditStatus.label">
                <Select v-model.trim="filters.auditStatus.model">
                    <Option v-for="option in filters.auditStatus.options"
                            :value="option.value"
                            :key="option.value">{{option.label}}</Option>
                </Select>
            </filter-item>

            <filter-item>
                <Button type="primary" @click="getOrders">筛选</Button>
                <Button @click="clearFilters">清空条件</Button>
            </filter-item>
        </layout-filter>

        <layout-action>
            <Button type="warning" @click="onClickCreate">创建入库单</Button>
        </layout-action>

        <layout-list>
            <Table border :columns="tableCols" :data="tableData"></Table>
            <Page :total="pageData.total" :current="pageData.current"
                  @on-change="pageChange" :page-size="20" show-total></Page>
        </layout-list>

        <create-modal ref="createModal" @on-success="getOrders"></create-modal>
        <Modal ref="modal"
                v-model="modal.show"
                :title="modal.title"
                @on-ok="modal.onSuccess">
            <p>{{modal.content}}</p>
        </Modal>
    </layout-body>
</template>

<script>
    import _ from 'lodash';
    import {tableCols, tableData} from './store/list-table';
    import CreateModal from './components/create-modal';
    import InvoiceService from 'services/repository/invoice-service';

    export default {
        created() {
            this.invoiceService = new InvoiceService();
        },
        data() {
            return {
                tableCols: tableCols.call(this),
                tableData,
                pageData: {
                    total: 0,
                    current: 1,
                    pageSize: 20
                },
                filters: {
                    id: {
                        label: '入库单号',
                        labelSpan: 6,
                        model: '',
                        holder: '',
                        fieldSpan: 18
                    },
                    expressNumber: {
                        label: '物流单号',
                        labelSpan: 6,
                        model: '',
                        holder: '',
                        fieldSpan: 18
                    },
                    productSkn: {
                        label: 'SKN编码',
                        labelSpan: 6,
                        model: '',
                        holder: '',
                        fieldSpan: 18
                    },
                    sknFactoryCode: {
                        label: '商家编码',
                        labelSpan: 6,
                        model: '',
                        holder: '',
                        fieldSpan: 18
                    },
                    skuFactoryCode: {
                        label: '商品条码',
                        labelSpan: 6,
                        model: '',
                        holder: '',
                        fieldSpan: 18
                    },
                    createTime: {
                        label: '创建时间',
                        labelSpan: 6,
                        model: '',
                        holder: '',
                        fieldSpan: 18
                    },
                    auditStatus: {
                        label: '审核状态',
                        labelSpan: 6,
                        model: '',
                        holder: '',
                        fieldSpan: 18,
                        options: [
                            {
                                value: -1,
                                label: '全部'
                            },
                            {
                                value: 10,
                                label: '未提交'
                            },
                            {
                                value: 20,
                                label: '待审核'
                            },
                            {
                                value: 41,
                                label: '驳回'
                            },
                            {
                                value: 40,
                                label: '通过'
                            }
                        ]
                    }
                },
                modal: {
                    show: false,
                    title: '',
                    content: '',
                    onSuccess: null
                }
            };
        },
        mounted() {
            this.getOrders();
        },
        methods: {
            onClickCreate() {
                this.$refs.createModal.show();
            },
            onClickEdit(params) {
                this.$router.push({
                    name: 'repository.invoice.edit',
                    params: {
                        id: params.row.id
                    },
                    query: {
                        brandId: params.row.brandId
                    }
                });
            },
            onClickInfo(params) {
                this.$router.push({
                    name: 'repository.invoice.info',
                    params: {
                        id: params.row.id
                    },
                    query: {
                        brandId: params.row.brandId
                    }
                });
            },
            onClickCommit(params) {
                this.modal.show = true;
                this.modal.title = '提交操作提醒';
                this.modal.content = `确定提交入库单号为  ${params.row.id} 发货入库单`;
                this.modal.onSuccess = () => {
                    this.invoiceService.commitOrder(params.row.id).then((result) => {
                        if (result.code === 200) {
                            this.$Message.info('操作成功');
                            this.getOrders();
                        } else {
                            this.$Message.info('操作失败');
                        }
                    });
                };
            },
            onClickDelete(params) {
                this.modal.show = true;
                this.modal.title = '删除操作提醒';
                this.modal.content = `确定删除入库单号为  ${params.row.id} 发货入库单`;
                this.modal.onSuccess = () => {
                    this.invoiceService.deleteOrder(params.row.id).then((result) => {
                        if (result.code === 200) {
                            this.$Message.info('操作成功');
                            this.getOrders();
                        } else {
                            this.$Message.info('操作失败');
                        }
                    });
                };
            },
            onClickDeliver(params) {
                this.$router.push({
                    name: 'repository.invoice.deliver',
                    params: {
                        id: params.row.id,
                    }
                });
            },
            pageChange(val) {
                this.pageData.current = val;
                this.getOrders();
            },
            clearFilters() {
                this.filters.id.model = null;
                this.filters.expressNumber.model = null;
                this.filters.productSkn.model = null;
                this.filters.sknFactoryCode.model = null;
                this.filters.skuFactoryCode.model = null;
                this.filters.createTime.model = null;
                this.filters.auditStatus.model = -1;
                this.pageData.current = 1;
                this.pageData.total = 0;

                this.getOrders();
            },
            filtersParams() {
                let params = {};

                if (this.filters.id.model) {
                    params.id = this.filters.id.model;
                }

                if (this.filters.expressNumber.model) {
                    params.expressNumber = this.filters.expressNumber.model;
                }

                if (this.filters.productSkn.model) {
                    params.productSkn = this.filters.productSkn.model;
                }

                if (this.filters.sknFactoryCode.model) {
                    params.sknFactoryCode = this.filters.sknFactoryCode.model;
                }

                if (this.filters.skuFactoryCode.model) {
                    params.skuFactoryCode = this.filters.skuFactoryCode.model;
                }

                if (this.filters.auditStatus.model !== -1) {
                    params.auditStatus = this.filters.auditStatus.model;
                }

                if (this.startTime && this.endTime) {
                    params.startTime = this.startTime;
                    params.endTime = this.endTime;
                }

                params.pageSize = this.pageData.pageSize;
                params.pageNo = this.pageData.current;

                return Promise.resolve(params);
            },
            getOrders() {
                return this.filtersParams().then((params) => {
                    this.$Loading.start();
                    return this.invoiceService.listOrder(params);
                }).then((result) => {
                    if (result.code === 200) {
                        this.pageData.total = result.data.totalCount;
                        this.pageData.current = result.data.pageNo;
                        this.tableData = result.data.records;
                    }

                    this.$Loading.finish();
                });
            },
            showAuditStatus(status) {
                switch (status) {
                    case 10:
                        return '未提交';
                    case 20:
                        return '待审核';
                    case 40:
                        return '通过';
                    case 41:
                        return '驳回';
                    default:
                        return '未提交';
                }
            },
            onSuccess() {

            }
        },
        computed: {
            startTime() {
                let createTime = this.filters.createTime.model;

                if (_.isEmpty(createTime)) {
                    return 0;
                } else {
                    return createTime[0] ? createTime[0].getTime() / 1000 : 0;
                }
            },
            endTime() {
                let createTime = this.filters.createTime.model;

                if (_.isEmpty(createTime)) {
                    return 0;
                } else {
                    return createTime[1] ? createTime[1].getTime() / 1000 : 0;
                }
            }
        },
        watch: {
        },
        components: {
            CreateModal
        }
    };
</script>