<template>
    <el-row class="pie-list">
        <div class="date-tabs">
            <div :class="active==i ? 'tab active' : 'tab'" v-for="(item,i) in tabs" @click="clickTab(item, i)">{{ item.label }}</div>
        </div>
        <el-col :span="6">
            <p class="tip">终端分布</p>
            <div ref="pieChart" :class="className" :style="{height:height,width:width}"/>
        </el-col>
        <el-col :span="17">
            <p class="tip">机型分布</p>
            <el-table border :data="phoneData" style="width: 100%;margin-top: 20px;">
                <el-table-column prop="model" label="机型" align="center"></el-table-column>
                <el-table-column prop="count" label="用户数" align="center" width="80"></el-table-column>
                <el-table-column label="示意图" align="center">
                    <template slot-scope="scope">
                        <div class="bar"><div class="pbar" :style="{width: scope.row.percent}"></div></div>
                    </template>
                </el-table-column>
                <el-table-column prop="percent" label="占比" align="center" width="80"></el-table-column>
            </el-table>
        </el-col>
    </el-row>
</template>

<script>
    import echarts from 'echarts'
    require('echarts/theme/macarons') // echarts theme
    import { debounce } from '@/utils'
    import api from '@/api/home'
    export default {
        name: "pie-chart",
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '100%'
            },
            height: {
                type: String,
                default: '300px'
            }
        },
        data() {
            return {
                dataQuery: {
                    num: 3,
                    type: 1
                },
                active: 0,
                tabs: [
                    { value: 3, label: '3天' },
                    { value: 7, label: '7天' },
                    { value: 30, label: '30天' },
                    { value: 180, label: '180天' }
                ],
                chart: null,
                phoneData: []
            }
        },
        mounted() {
            this.getData()
            this.initChart()
            this.__resizeHandler = debounce(() => {
                if (this.chart) {
                    this.chart.resize()
                }
            }, 100)
            window.addEventListener('resize', this.__resizeHandler)
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            window.removeEventListener('resize', this.__resizeHandler)
            this.chart.dispose()
            this.chart = null
        },
        methods: {
            getData() {
                api.getRankData(this.dataQuery).then(res => {
                    console.log(res)
                    this.phoneData = res.results.top10
                    let pieData = [],
                        legendData =[]
                    res.results.platformCount.forEach((item, i) => {
                        legendData.push(item.platform)
                        pieData.push({
                            value: item.count,
                            name: item.platform
                        })
                    })
                    this.initChart(legendData, pieData)
                }).catch(err => {
                    console.log(err)
                })
            },
            clickTab(item, i) {
                this.active = i
                this.dataQuery.num = item.value
                this.getData()
            },
            initChart(legendData, pieData) {
                this.chart = echarts.init(this.$refs.pieChart, 'macarons')

                this.chart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        bottom: 'bottom',
                        data: legendData
                    },
                    series : [
                        {
                            name: '手机类型',
                            type: 'pie',
                            radius : '60%',
                            center: ['50%', '50%'],
                            data: pieData,
                            label: {
                                show: false,
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .pie-list {
        background-color: #fff;
        min-height: 485px;
        margin-left: -20%;
        position: relative;
        .bar {
            width: 100%;
            height: 20px;
            background-color: #eee;
            margin: 0;
            .pbar {
                /*width: 20%;*/
                height: 20px;
                background-color: #40c9c6;
            }
        }
        .tip {
            text-align: center;
        }
        .date-tabs {
            display: flex;
            position: absolute;
            top: -20px;
            right: 30px;
            z-index: 1;
            .tab {
                font-size: .9rem;
                color: #36a3f7;
                border: 1px solid #36a3f7;
                border-right: none;
                padding: 5px 12px;
                cursor: pointer;
                &:last-child {
                    border-right: 1px solid #36a3f7;
                }
            }
            .active {
                color: #fff;
                background: #36a3f7;
            }
        }
    }
</style>
