<template>
    <div class="home-container">
        <!-- <div class="home-text">name:{{ name }}</div>
        <div class="home-text">roles:<span v-for="role in roles" :key="role">{{ role }}</span></div> -->
        <panel-group :panel-data="panelData" />

        <el-row :gutter="20" class="line-chart">
            <el-col :span="12" class="todo">
                <div class="todo-title">待办事项</div>
                <el-row :gutter="20" type="flex" justify="space-around" class="todo-list">
                    <div class="todo-list-item" v-for="item in todoList">
                        <p :style="{color: item.color}">{{ item.value }}</p>
                        <span>{{ item.label }}</span>
                    </div>
                </el-row>

                <line-chart :chartData="lineChartData[2]" height="500px" style="margin-top: 20px" />

                <rank-list />
            </el-col>
            <el-col :span="12">
                <line-chart :chartData="lineChartData[0]" />
                <line-chart :chartData="lineChartData[1]" style="margin-top: 20px" />

                <div class="pie-title">手机统计</div>
                <pie-chart />
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import RankList from './components/RankList'
import PieChart from './components/PieChart'
import api from '@/api/home'
export default {
    name: 'Home',
    components: {
        PanelGroup,
        LineChart,
        PieChart,
        RankList
    },
    data() {
        return {
            todoList: [
                { value: 0, label: '低电车辆', color: '#f4516c'},
                { value: 0, label: '24小时未骑车辆', color: '#000'},
                { value: 0, label: '24小时未还车辆', color: '#000'},
                { value: 0, label: '故障车辆', color: '#f4516c'},
                { value: 0, label: '报警信息', color: '#f4516c'}
            ],
            lineChartData: [{
                title: '新用户增长',
                desc: '新用户',
                type: 0,
                dateData: [],
                numData: [],
                ymin: 0,
                ymax: 0
            }, {
                title: '新订单增长',
                desc: '新订单',
                type: 1,
                dateData: [],
                numData: [],
                ymin: 0,
                ymax: 0
            }, {
                title: '总收益',
                desc: '总收益',
                type: 2,
                dateData: [],
                numData: [],
                ymin: 0,
                ymax: 0
            }],
            panelData: []
        }
    },
    computed: {
        ...mapGetters([
            'name',
            'roles'
        ])
    },
    methods: {
        getData() {
            api.getHomeData().then(res => {
                console.log(res)
                const data = res.results

                this.panelData = [
                    { type:'document', name:'新订单', total:data.totalOrder.addBikeOrder, change:data.totalOrder.bikeOrderDayAdd },
                    { type:'peoples', name:'总用户', total:data.totalMember.totalMember, change:data.totalMember.addMember},
                    { type:'order', name:'总订单', total:data.totalOrder.totalBikeOrder, change:data.totalOrder.addBikeOrder },
                    { type:'gains', name:'总收益', total:data.totalProfit.totalProfit, change:data.totalProfit.addProfit }
                ]
                this.todoList[0].value = data.othertotal.lowBatteryPowerBike
                this.todoList[1].value = data.othertotal.bikeNotUse24
                this.todoList[2].value = data.othertotal.useMoreThan24
                this.todoList[3].value = data.othertotal.troubleBike
                this.todoList[4].value = data.othertotal.trouble


            }).catch(err => {
                console.log(err)
            })
        }
    },
    created() {
        this.getData()
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.home-container {
    padding: 20px;
    background-color: #f0f2f5;
    .line-chart {
        .todo {
            &-title {
                background-color: #fff;
                color: #36a3f7;
                font-size: 1.2rem;
                padding-top: 15px;
                padding-left: 15px;
            }
            &-list {
                background-color: #fff;
                text-align: center;
                padding: 20px 0 30px;
                margin: 0 !important;
                &-item {
                    background-color: rgba(220,220,220, .05);
                    padding: 10px 15px;
                    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
                    p {
                        margin: 5px 0;
                        font-size: 1.4rem;
                    }
                    span {
                        color: #6f7180;
                        font-size: .9rem;
                    }
                }
            }
        }
        .pie-title {
            margin-top: 20px;
            background-color: #fff;
            color: #36a3f7;
            font-size: 1.2rem;
            padding-top: 15px;
            padding-left: 15px;
            margin-left: -20%;
        }
    }
}
</style>
