<template>
    <layout-body>
        <div class="detail-header">
            <Button type="primary" @click="backExpList">返回发货物流表</Button>
            <Button type="primary" @click="print">打印</Button>
            <span class="no">物流单号：{{expressNo}}</span>
            <span class="time">发货时间：{{expressTime}}</span>
        </div>
        <layout-list>
            <Table border :columns="table.cols" :data="table.list"></Table>
        </layout-list>
    </layout-body>
</template>

<script>
    import moment from 'moment';
    import TradeService from 'services/trade/trade-service';

    export default {
        data() {
            return {
                table: {
                    cols: [
                        {
                            title: 'sku',
                            key: 'sku',
                            align: 'center'
                        }, {
                            title: '条码',
                            key: 'skuFactoryCode',
                            align: 'center'
                        }, {
                            title: '商品图片',
                            align: 'center',
                            render: (h, params) => {
                                const row = params.row;
                                const directives = [
                                    { name: 'prod-img', value: row.sku, modifiers: { sku: true } }
                                ];

                                return (
                                    <div>
                                        <img {...{ directives }}></img>
                                    </div>
                                );
                            }
                        }, {
                            title: '商品名称',
                            key: 'productName',
                            align: 'center'
                        }, {
                            title: '规格',
                            align: 'center',
                            render(h, params) {
                                const row = params.row;

                                return (
                                    <span>{row.colorName || ''}/{row.size}</span>
                                );
                            }
                        }, {
                            title: '调拨单号/已发数',
                            align: 'center',
                            render(h, params) {
                                const row = params.row;

                                return (
                                    <div>
                                        {row.boList.map(item => {
                                            return <p>{item.proRequisitionFormId}/{item.num}</p>;
                                        })}
                                    </div>
                                );
                            }
                        }
                    ],
                    list: []
                },
                expressNo: 0,
                expressTime: ''
            };
        },
        created() {
            this.tradeService = new TradeService();
            this.expressNo = this.$route.query.expressNo;
            this.expressDetail();
        },
        methods: {
            print() {
                const href = `/trade/printDetail.html?expressNo=${this.expressNo}`;

                window.open(href, '_blank');
            },
            backExpList() {
                this.$router.push({
                    name: 'trade.allot.express'
                });
            },
            expressDetail() {
                this.tradeService.allotExpressDetail(this.expressNo)
                    .then(res => {
                        this.resolveData(res.data);
                    });

            },
            resolveData(data) {
                const fmt = 'YYYY-MM-DD HH:mm:ss';

                this.table.list = data;
                this.expressTime = '-';
                if (data.length) {
                    this.expressTime = moment.unix(data[0].createTime).format(fmt);
                }
            }
        },
        components: {
        }
    };
</script>

<style lang="scss" scoped>
.detail-header {
    margin-bottom: 20px;

    .no,
    .time {
        margin-left: 10px;
    }
}
</style>