<template>
    <layout-print>
        <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>
    </layout-print>
</template>

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

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

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

                this.tradeService.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: #f00;
            }
        }
    }

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

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

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