<template>
    <div class="chart-box">
        <div class="title-top">
            <span>toB 区域销量</span>
            <el-select v-model="areatValue" size="mini" class="select" placeholder="请选择" @change="areaChange">
                <el-option v-for="item in options" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
            </el-select>
        </div>
        <div class="chart" :id="id"></div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;

@Component
export default class Pie01 extends Vue {
    id = this.randomString();
    areatValue = 1
    options: Array<any> = [{
        label: '省级',
        value: 1
    }, {
        label: '市级',
        value: 2
    }]
    mounted() {
        this.getData()
    }

    randomString() {
        const str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
        let result = '';
        for (let i = 10; i > 0; --i)
            result += str[Math.floor(Math.random() * str.length)];
        return result;
    }
    areaChange() {
        this.getData()
    }
    initChart(data: Array<any>) {
        let chartDom: any = document.getElementById(this.id);
        let myChart = echarts.init(chartDom);
        let option: EChartsOption;
        let _data: Array<any> = []
        for (const item of data) {
            if (item.area === undefined) continue;
            _data.push({
                name: item.area,
                value: item.total
            })
        }
        option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                // orient: 'vertical',
                show: true,
                bottom: 0,
                type: 'scroll',
                orient: 'horizontal',
            },
            series: [
                {
                    type: 'pie',
                    radius: '50%',
                    data: _data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    label: {
                        formatter: '{b}: \n{d}' + '%'
                    }
                }
            ]
        };

        option && myChart.setOption(option);
    }
    getData() {
        (this as any).$request({
            url: '/omsOrder/orderReport/businessSale',
            method: 'GET',
            params: {
                region: this.areatValue
            }
        }).then((res: any) => {
            if (res.data) {
                this.initChart(res.data)
            }
        }).catch(() => { })
    }
}
</script>

<style lang="scss" scoped>
.chart-box {
    height: 100%;
    width: 100%;

    .title-top {
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 100%;

        >span {
            font-size: 16px;
            font-weight: 700;
        }

        .select {
            width: 100px;
            position: absolute;
            top: 6px;
            right: 0;
        }
    }
}

.chart {
    height: calc(100% - 40px);
    width: 100%;
}
</style>