<template>
    <Card class="worth-total">
        <Row>
            <Col span="8" v-for="data in total" :key="data">
                <table class="total-table" cellspacing="0" cellpadding="0">
                    <tr>
                        <td colspan="2">{{data.title}}<Icon type="help-circled" :title="data.desc"></Icon></td>
                    </tr>
                    <tr>
                        <td width="50%">{{data.value}}</td>
                        <td width="50%">{{data.rate}}</td>
                    </tr>
                </table>
            </Col>
        </Row>
    </Card>
</template>
<script>
import * as service from 'service.pc';

export default {
    name: 'worth-total',
    props: ['config', 'searchFlag'],
    data() {
        return {
            total: []
        }
    },
    created() {
        this.getTotalCount();
    },
    watch: {
        searchFlag() {
            this.getTotalCount();
        }
    },
    methods: {
        changePercent(a, b) {
            if (b) {
                return (a / b * 100).toFixed(2) + '%';
            }

            return '0%';
        },
        getTotalCount() {
            let self = this;

            service.get('worth/total', this.config).then(result => {
                let opt = result.data;

                self.total = [
                    {
                        title: '总SKN数',
                        desc: '上架&有库存SKN数',
                        value: opt.skn,
                        rate: self.changePercent(opt.skn, opt.sknTotal)
                    },
                    {
                        title: '交寄金额',
                        desc: '减当期退货金额',
                        value: opt.g,
                        rate: self.changePercent(opt.g, opt.gTotal)
                    },
                    {
                        title: '毛利额',
                        desc: '平均每件售卖SKN的毛利额，减当期退货',
                        value: opt.p,
                        rate: self.changePercent(opt.p, opt.pTotal)
                    }
                ]
            });
        }
    }
}
</script>
<style lang="scss">
.worth-total {
    .total-table {
        width: 70%;
        margin: 3% auto;

        td {
            border: 1px solid #e3e8ee;
            text-align: center;
            line-height: 40px;
        }

        tr:first-child td {
            border-bottom: none;
            background: #f5f7f9;
        }

        tr:last-child td:first-child {
            border-right: none;
        }

        .ivu-icon {
            color: #3399ff;
            font-size: 17px;
            position: relative;
            margin-left: 10px;
            top: 2px;
        }
    }
}
</style>