<template>
    <widget-card :bodyStyle="bodyStyle">
        <template #header>
            <div class="header">
                <span>月度统计</span>
                <el-select
                    style="width: 120px;"
                    size="mini"
                    v-model="value"
                    @change="changeSelect"
                    placeholder="请选择"
                >
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </template>
        <div class="box-content">
            <div class="box">
                <div class="text1">官方销售额/二手市场</div>
                <div class="text2">
                    <span v-html="getNum(order.official, true)"></span>/
                    <span v-html="getNum(order.transfer, true)"></span>
                </div>
            </div>
            <div class="box">
                <div class="text1">拉新数(人)</div>
                <div class="text2">{{ user }}</div>
            </div>
        </div>
    </widget-card>
</template>
<script>
import { format, parse, addMonths } from 'date-fns';
import WidgetCard from './WidgetCard';
import acc from '../mixins/acc';

export default {
    data() {
        return {
            bodyStyle: {
                overflow: 'auto'
            },
            value: '',
            options: [],
            user: 0,
            order: {
                official: 0,
                transfer: 0
            }
        };
    },
    mixins: [acc],
    components: {
        WidgetCard
    },
    mounted() {
        let options = [];
        this.value = format(new Date(), 'yyyy-MM');
        for (let i = 0; i < 7; i++) {
            options.push({
                label: format(addMonths(new Date(), 0 - i), 'yyyy-MM'),
                value: format(addMonths(new Date(), 0 - i), 'yyyy-MM')
            });
        }
        this.options = options;

        this.changeSelect();
    },
    methods: {
        changeSelect() {
            this.$nextTick(() => {
                this.$http
                    .get('/statistic/userTrendV2', {
                        yearMonth: this.value
                    })
                    .then(res => {
                        this.user = Object.keys(res).map(item => {
                            return res[item];
                        })[0];
                    });
                this.$http
                    .get('/statistic/orderPriceTrendV2', {
                        yearMonth: this.value
                    })
                    .then(res => {
                        this.order = res;
                    });
            });
        }
    }
};
</script>
<style lang="less" scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/deep/.el-card {
    overflow: hidden;
}

.box-content {
    display: flex;
    align-items: center;
    justify-content: space-around;
    align-self: stretch;
    padding: 30px;
    height: 100%;
    box-sizing: border-box;
}
.box {
    padding: 0 20px;
    height: 125px;
    background: #f5f7fa;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 153px;
    box-sizing: border-box;
    .text1 {
        font-size: 14px;
        font-weight: bold;
        color: #666666;
        line-height: 20px;
        white-space: nowrap;
    }
    .text2 {
        color: #feb30e;
        font-size: 22px;
        font-weight: bold;
        line-height: 29px;
        margin-top: 2px;
        white-space: nowrap;
        /deep/small {
            font-size: 12px;
        }
    }

    &:nth-child(2) {
        .text2 {
            color: #4dcc6f;
        }
    }
}
</style>
