<template>
    <layout-print>
        <h2>代销结算明细</h2>
        <p>供应商：{{supplierName}}</p>
        <p>对账日期：{{date}}</p>
        <h4>商品款</h4>
        <div class="stock-list">
            <table width="100%">
                <thead>
                    <tr>
                        <th v-for="item in tableCols">{{item.title}}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in tableData">
                        <td>{{item.productSku}}</td>
                        <td>{{item.productName}}</td>
                        <td>{{item.factoryCode}}</td>
                        <td>{{item.sizeName}}</td>
                        <td>{{item.salesAmount}}</td>
                        <td>{{item.salesNums}}</td>
                        <td>{{item.brandName}}</td>
                        <td>{{item.clearingInterval}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <h4 class="mgt20">代销抵冲</h4>
        <div class="stock-list">
            <table width="100%">
                <thead>
                    <tr>
                        <th v-for="item in tableCols2">{{item.title}}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in tableData2">
                        <td>{{item.productSku}}</td>
                        <td>{{item.productName}}</td>
                        <td>{{item.factoryCode}}</td>
                        <td>{{item.sizeName}}</td>
                        <td>{{item.salesAmount}}</td>
                        <td>{{item.agencyTypeDesc}}</td>
                        <td>{{item.brandName}}</td>
                        <td>{{item.clearingInterval}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <p class="price">费用小计：￥{{deduction}}</p>
        <p class="price">实际应付款(元)：￥{{count}}</p>
        <p class="price"><b>总计：￥{{count}}</b></p>
        <p><b>请您按照上述商品款小计金额开具发票。</b></p>
        <div class="seal">盖章确认</div>  	
        <p>请您在SPM系统将结算对账单和库存对账单各打印一份，并盖章确认后与发票一并寄至：</p>
        <p>江苏省南京市建邺区嘉陵江东街18号南京国家广告产业园05栋17楼 --品牌经理（210000）</p>
        <p>电话：025-87781000</p>
        <p>传真：025-87781000</p>
        <p><br><br>以下为贵公司汇款信息及地址，请核对。如有变更请将新的信息盖章同账单一并寄至我公司。并请及时与我公司商品部联系，在业务系统中进行更新。<br><br></p>
        <p>公司名称： </p>
        <p>开户行名称：</p>
        <p>帐    号：</p>  
        <p>地    址： </p>
        <p>财务联系人：</p>
        <p>联系电话：</p>
        <p><br>备注：盖章确认后发现对账单存在任何问题的，我公司不承担任何责任。</p>
    </layout-print>
</template>

<script>
    import _ from 'lodash';
    import detail from '../payment/store/detail-print';
    import FinanceService from 'services/finance/finance-service';
    import moment from 'moment';

    export default {
        data() {
            return _.assign(detail.call(this), {
                deduction: 0,
                count: 0
            });
        },
        created() {
            this.FinanceService = new FinanceService();
            this.search();
        },
        computed: {
            date() {
                return moment(this.$route.query.createTime).startOf('month').format('YYYY-MM-DD');
            },
            supplierName() {
                return this.$route.query.supplierName;
            }
        },
        methods: {
            search() {
                let params = {
                    balanceId: +this.filters.balanceId.model,
                    brandId: +this.filters.brandId.model,
                    productSku: +this.filters.sku.model,
                    pageSize: +this.$route.query.totalCount,
                    pageNo: this.$route.query.page
                };

                params = _.pickBy(params, val => val);

                this.FinanceService.settlementList(params).then(ret => {
                    let list = _.get(ret, 'data.records', []);
                    let list1 = []; // 商品款
                    let list2 = []; // 代销抵冲
                    let deduction, count;
                    let type1 = ['销售出库', '换货入库', '换货出库', '退货入库', '促销出库', '盘亏', 'vip折扣', '优惠券分摊'];
                    let type2 = ['其他抵冲', '折扣抵冲', '经销抵冲'];

                    _.each(list, item => {
                        if (type1.indexOf(item.agencyTypeDesc) > -1) {
                            list1.push(item);
                        }

                        if (type2.indexOf(item.agencyTypeDesc) > -1) {
                            list2.push(item);
                        }
                    });

                    this.tableData = list1;
                    this.tableData2 = list2;
                    count = _.sum(_.map(list1, 'salesAmount'));
                    deduction = _.sum(_.map(list2, 'salesAmount'));

                    this.tableData.push(
                        {
                            productSku: '合计',
                            salesAmount: count
                        }
                    );

                    this.tableData2.push(
                        {
                            productSku: '合计',
                            salesAmount: deduction
                        }
                    );

                    this.deduction = deduction;
                    this.count = count;
                });
            }
        }
    };
</script>

<style lang="scss" scoped>
h2 {
    line-height: 50px;
    border-bottom: 1px solid #f2f2f2;
    margin-bottom: 10px;
}

h4 {
    font-size: 16px;
    text-align: center;
    font-weight: bold;
}

.print-detail {
    margin-bottom: 20px;
    color: #333;
}

p {
    line-height: 20px;
}

.price {
    font-size: 16px;
    line-height: 20px;
    margin-top: 15px;
    text-align: right;

    b {
        font-size: 18px;
    }
}

.seal {
    text-align: right;
    padding-right: 250px;
    line-height: 50px;
    font-weight: bold;
}

.mgt20 {
    margin-top: 20px;
}

.stock-list {
    table,
    th,
    td {
        border: 1px solid black;
        color: #333;
        font-size: 12px;
        text-align: center;
        padding: 8px 0;
    }

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