<template>
    <LayoutBody>
        <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>
        <LayoutList>
            <Table border :columns="table.cols" :data="table.list"></Table>
        </LayoutList>
    </LayoutBody>
</template>

<script>
    import _ from 'lodash';
    import moment from 'moment';
    import service from 'trade-service';

    export default {
        data() {
            return {
                table: {
                    cols: [
                        {
                            title: 'sku',
                            key: 'sku',
                            align: 'center'
                        }, {
                            title: '条码',
                            key: 'skuFactoryCode',
                            align: 'center'
                        }, {
                            title: '商品图片',
                            align: 'center',
                            render() {
                                return `<div>
                                    <img v-prod-img.sku="row.sku">
                                </div>`;
                            }
                        }, {
                            title: '商品名称',
                            key: 'productName',
                            align: 'center'
                        }, {
                            title: '规格',
                            align: 'center',
                            render(row) {
                                return `${row.colorName || ''}/${row.size}`;
                            }
                        }, {
                            title: '调拨单号/已发数',
                            align: 'center',
                            render(row) {
                                let $html = '';

                                _.each(row.boList, i => {
                                    $html += `<p>${i.proRequisitionFormId}/${i.num}</p>`;
                                });

                                return $html;
                            }
                        }
                    ],
                    list: []
                },
                expressNo: 0,
                expressTime: ''
            };
        },
        created() {
            this.expressNo = this.$route.query.expressNo;
            this.expressDetail();
        },
        methods: {
            print(){
                window.print();

            },
            backExpList() {
                this.$router.push({
                    name: 'trade.allot.express'
                });
            },
            expressDetail() {
                service.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 = moment.unix(data[0].createTime).format(fmt);
            }
        },
        components: {
        }
    };
</script>

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

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