<template>
    <div id="map" class="map">
        <div class="container" id="map-container" :style="mapStyle"></div>
        <el-cascader
            class="map-cascader"
            v-model="chooseOrg"
            clearable
            :show-all-levels="false"
            :props="orgProps"
            :options="orgOptions"
            @change="handleChangeOrg">
        </el-cascader>
        <div class="map-panel" v-if="chooseMapRegion && chooseMapRegion.length > 0">
            <div class="panel-content" :style="panelStyle">
                <div class="panel-title">
                    <span>数据展示</span>
                </div>
                <div class="panel-line"></div>
                <div class="org" v-for="(org, index) in chooseMapRegion" :key="index">
                    <div class="panel-org">{{org.enforce_org_name}}</div>
                    <div class="panel-info">
                        <div class="panel-info-left">
                            <div>执法人员：<span class="panel-info-left-point">{{org.user_num}}</span>人 </div>
                            <div>检查任务：<span class="panel-info-left-point">{{org.total_num}}</span>条</div>
                            <div>完成率：<span class="panel-info-left-point">{{org.donePercent}}</span>%</div>
                        </div>
                        <div class="panel-info-rate">
                            <el-progress :width="88" type="circle" color="#04AD00" :percentage="org.percent" :show-text="false"></el-progress>
                            <div class="panel-rate">
                                <p>
                                    <span>{{org.percent}}</span>
                                    <span>%</span>
                                </p>
                                <p>合格率</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { showMap, regions } from '../config/map';

import { getOrg } from '@/api/base';
import { getJobTotalInfo } from '@/api/home';

import BUS from '@/bus';

export default {
    data () {
        return {
            chooseOrg: '',
            orgOptions: [],
            orgProps: {
                value: 'enforce_org_id',
                label: 'enforce_org_name',
                checkStrictly: true
            },
            mapData: [],
            chooseMapRegion: [],
            mapHeight: 100,
            panelHeight: 300,
        }
    },
    computed: {
        mapStyle() {
            return {
                height: `${this.mapHeight}px`,
                maxHeight: `${this.mapHeight}px`,
            }
        },
        panelStyle() {
            return {
                maxHeight: `${this.panelHeight}px`,
            }
        },
    },
    mounted () {
        this.getOrgs();
    },
    methods: {
        checkOrgLeaf(arr) {
            if (arr && arr.length > 0) {
                const vm = this
                arr.map(item => {
                    if (item.sub_orgs || item.sub_orgs.length > 0) {
                        item.children = item.sub_orgs;
                        vm.checkOrgLeaf(item.sub_orgs);
                    }
                })
            }
        },
        getOrgs() {
            const vm = this;
            window.onresize = function() {
                vm.resize();
            };
            this.resize();

            getOrg().then(res => {
                if (res && res.data) {
                    const data = res.data;
                    this.checkOrgLeaf(data);
                    this.orgOptions = data;
                }
                this.initMap();
            }).catch(err => {
                this.initMap();
            })
        },
        initMap() {
            const vm = this;
            const map = showMap('map-container', [], 100);
            map.on('click', function(params) {
                // console.log('click: ', params);
                // map.dispatchAction({
                //     type: 'geoSelect',
                //     dataIndex: params.dataIndex,
                // });
                vm.showMapOrg(params.name);
            });

            getJobTotalInfo().then(res => {
                if (res && res.data) {
                    const list = res.data;
                    let pass = 0, total = 0, done = 0;
                    list.map(item => {
                        pass = parseInt(item.pass_num);
                        total = parseInt(item.total_num);
                        done = parseInt(item.done_num);
                        item.percent = done > 0 ? parseFloat((pass / done * 100).toFixed(2)) : 0;
                        item.donePercent = total > 0 ? parseFloat((done / total * 100).toFixed(2)) : 0;
                    });
                    this.mapData = list;
                    this.generateMapData();
                }
            });
        },
        resize() {
            const e = document.querySelector('#map');
            this.mapHeight = e.clientHeight - 20;
            this.panelHeight = this.mapHeight - 120;
        },
        getRegionData(name) {
            if (name) {
                const res = this.mapData.filter(item => name.indexOf(item.administrative_region) >= 0);
                if (res.length > 0) {
                    let pass = 0, total = 0;
                    res.map(item => {
                        pass += parseInt(item.pass_num);
                        total += parseInt(item.done_num);
                    });
                    const percent = total > 0 ? parseFloat((pass / total * 100).toFixed(2)) : 0;
                    return percent;
                }
            }
            return 0;
        },
        generateMapData() {
            let res = [];
            let val = 0, max = 10;
            regions.map(region => {
                val = this.getRegionData(region.name);
                // region.data.map(item => {
                //     res.push([...item, val]);
                // });
                max = Math.max(max, val);
                res.push([...region.center, val]);
            });
            // console.log('map data: ', res, max);
            showMap('map-container', res, max);
        },
        showMapOrg(name) {
            if (this.mapData.length > 0 && name) {
                this.chooseMapRegion = this.mapData.filter(item => item.administrative_region && item.administrative_region.indexOf(name) >= 0);
            }
        },
        handleChangeOrg(data) {
            if (data && data.length > 0) {
                const orgId = data[data.length - 1];
                BUS.$emit('orgChanged', orgId);
            }
            else {
                BUS.$emit('orgChanged', '');
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.map {
    background: #FFFFFF;
    border: 1px solid #E9EAF8;
    border-radius: 4px;
    padding: 10px;
    position: relative;
    .container {
        width: 100%;
        height: 100%;
    }
    &-cascader {
        position: absolute;
        top: 20px;
        left: 18px;
    }
    .panel-content {
        width: 100%;
        height: 100%;
    }
    &-panel {
        position: absolute;
        top: 100px;
        left: 30px;
        background-color: #F9FCFF;
        border: 1px solid #B3B4B4;
        border-radius: 8px;
        padding: 0;
        overflow-y: auto;
        .panel-title {
            position: relative;
            margin-top: 16px;
            margin-left: 16px;
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: bold;
            color: #333333;
        }
        .panel-line {
            margin-top: 12px;
            height: 1px;
            width: 100%;
            background-color: #E9EAF8;
        }
        .panel-title::before {
            content: ' ';
            position: absolute;
            left: -10px;
            top: 3px;
            width: 4px;
            height: 15px;
            background: #3A8FEA;
        }
        .panel-org {
            margin: 8px 12px;
            font-size: 16px;
            color: #333333;
        }
        .panel-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 8px 12px 16px 12px;
            &-left {
                color: #666666;
                font-size: 16px;
                &-point {
                    color: #333333;
                    font-size: 20px;
                }
            }
            &-rate {
                margin-left: 10px;
                width: 88px;
                height: 88px;
                position: relative;
            }
        }
    }
    .panel-rate {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        &>p {
            margin: 0;
            font-size: 16px;
            color: #666666;
            &>span:first-child {
                color: #333333;
                font-weight: bold;
                font-size: 20px;
            }
        }
        &>p:first-child {
            margin-top: 4px;
        }
    }
}
@media screen and (min-width: 1608px) {
    .map {
        margin-left: 10px;
        margin-top: 10px;
    }
}
@media screen and (max-width: 1600px) {
    .map {
        margin-left: 7px;
        margin-top: 5px;
    }
}
@media screen and (max-width: 1300px) {
    .map {
        margin-left: 4px;
        margin-top: 5px;
    }
}
</style>