<template>
    <LayoutPrint>
        <div class="print-detail">
            <div class="detail-header">
                <p class="exp-no">物流单号 - {{expressNo}}</p>
                <p class="supply">数量：{{totalNum}}</p>
                <p class="address high-light">{{destAddress}}</p>
            </div>
            <div class="detail-list">
                <table>
                    <thead>
                        <tr>
                            <th>SKN</th>
                            <th>SKU</th>
                            <th>条码</th>
                            <th>吊牌价</th>
                            <th>销售价</th>
                            <th>商品名称</th>
                            <th>数量</th>
                            <th>单号</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in dataList">
                            <td>{{item.skn}}</td>
                            <td>{{item.sku}}</td>
                            <td>{{item.skuFactoryCode}}</td>
                            <td>{{item.retailPrice}}</td>
                            <td>{{item.salesPrice}}</td>
                            <td>{{item.productName}}</td>
                            <td>{{item.num}}</td>
                            <td>{{item.proRequisitionFormId}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </LayoutPrint>
</template>

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

    export default {
        data() {
            return {
                expressNo: 0,
                destAddress: '',
                totalNum: 0,
                dataList: []
            };
        },
        created() {
            this.expressNo = this.$route.query.expressNo;
            this.allotPrintExpressDetail();
        },
        methods: {
            allotPrintExpressDetail() {
                this.$Loading.start();
                service.allotWarehouseInfo()
                    .then(res => {
                        const data = res.data;

                        this.destAddress = `发往：${data.address} ${data.adminName} ${data.phone}`;
                    });

                service.allotPrintExpressDetail(this.expressNo)
                    .then(res => {
                        this.$Loading.finish();
                        this.resolveData(res.data);
                    });
            },
            resolveData(data) {
                _.each(data, item => {
                    this.totalNum += item.num || 0;
                });
                this.dataList = data;
            }
        }
    };
</script>

<style lang="scss" scoped>
    .print-detail {
        margin-bottom: 20px;
        color: #333;

        .detail-header {
            .exp-no {
                font-size: 25px;
            }

            .supply {
                font-size: 15px;
            }

            .address {
                font-size: 15px;

                &.high-light {
                     color: #ff0000;
                }
            }
        }

        .detail-list {
            margin-top: 20px;

            table, th, td{
                padding: 5px;
                border: 1px solid black;
                padding: 5px 30px;
                color: #333;
                font-size: 15px;
            }

            table {
                border-spacing: 0px;
                border-collapse: collapse;
            }
        }
    }
</style>