<template>
    <layout-body>
        <layout-filter>
            <filter-item :label="filters.id.label">
                <Input v-model.trim="filters.id.model"
                       :placeholder="filters.id.holder" :maxlength="9"></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" :maxlength="9"></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="filterSearch">筛选</Button>
                <Button @click="clearFilters">清空条件</Button>
            </filter-item>
        </layout-filter>

        <layout-action>
            <Button type="primary" @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 list from './store/list';
    import CreateModal from './components/create-modal';
    import InvoiceService from 'services/repository/invoice-service';

    export default {
        created() {
            this.invoiceService = new InvoiceService();
        },
        data() {
            return list.call(this);
        },
        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.error(result.message);
                        }
                    });
                };
            },
            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(result.message);
                        }
                    });
                };
            },
            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) {
                    if (this.isNumber(this.filters.id.model)) {
                        params.id = this.filters.id.model;
                    } else {
                        return Promise.reject('入库单必须为数字');
                    }
                }

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

                if (this.filters.productSkn.model) {
                    if (this.isNumber(this.filters.productSkn.model)) {
                        params.productSkn = this.filters.productSkn.model;
                    } else {
                        return Promise.reject('skn必须为数字');
                    }
                }

                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() {
                this.$Loading.start();
                return this.filtersParams().then((params) => {
                    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;
                    } else {
                        this.pageData.total = 0;
                        this.pageData.current = 1;
                        this.tableData = [];
                    }

                    this.$Loading.finish();
                }).catch((err) => {
                    this.$Message.error(err);
                    this.$Loading.finish();
                });
            },
            filterSearch() {
                this.pageData.current = 1;
                this.getOrders();
            },
            showAuditStatus(status) {
                switch (status) {
                    case 10:
                        return '未提交';
                    case 20:
                        return '待审核';
                    case 40:
                        return '通过';
                    case 41:
                        return '驳回';
                    default:
                        return '未提交';
                }
            },
            onSuccess() {

            },
            isNumber(numStr) {
                const isNumber = /^[0-9]+$/;

                return isNumber.test(numStr);
            }
        },
        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>