<template>
<#if ctrl.render??>
    ${ctrl.render.code}
<#else>
<div class="map-container">
    <div ref="map" class="map"></div>
</div>
</#if>
</template>

<#assign import_block>
import echarts from 'echarts';
import 'echarts/map/js/china.js'
import { Http } from "@/utils";
</#assign>

<#ibizinclude>
../@MACRO/CONTROL/CONTROL_HEADER-BASE.vue.ftl
</#ibizinclude>

    /**
     * 地图对象
     *
     * @type {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public map: any;

    /**
     * 显示处理提示
     *
     * @type {boolean}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    @Prop({ default: true }) public showBusyIndicator?: boolean;

    /**
     * 部件行为--update
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    @Prop() public updateAction!: string;

    /**
     * 部件行为--fetch
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    @Prop() public fetchAction!: string;

    /**
     * 部件行为--remove
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    @Prop() public removeAction!: string;
    
    /**
     * 部件行为--load
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    @Prop() public loadAction!: string;
    
    /**
     * 部件行为--loaddraft
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    @Prop() public loaddraftAction!: string;
    
    /**
     * 部件行为--create
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    @Prop() public createAction!: string;

    /**
     * 地图数据项模型
     *
     * @type {}
     * @memberof ${srfclassname('${ctrl.name}')}Base
     */
    public mapItems: any = {
    <#if ctrl.getPSSysMapItems?? && ctrl.getPSSysMapItems()??>
      <#list ctrl.getPSSysMapItems() as mapitem>
        '${mapitem.getItemType()?lower_case}': {
            bkcolor: '<#if mapitem.getBKColorPSAppDEField?? && mapitem.getBKColorPSAppDEField()??>${mapitem.getBKColorPSAppDEField().getCodeName()?lower_case}</#if>',
            color:'<#if mapitem.getColorPSAppDEField?? && mapitem.getColorPSAppDEField()??>${mapitem.getColorPSAppDEField().getCodeName()?lower_case}</#if>',
            content:'<#if mapitem.getContentPSDEField?? && mapitem.getContentPSDEField()??>${mapitem.getContentPSDEField().getCodeName()?lower_case}</#if>',
            latitude:'<#if mapitem.getLatitudePSAppDEField?? && mapitem.getLatitudePSAppDEField()??>${mapitem.getLatitudePSAppDEField().getCodeName()?lower_case}</#if>',
            longitude:'<#if mapitem.getLongitudePSAppDEField?? && mapitem.getLongitudePSAppDEField()??>${mapitem.getLongitudePSAppDEField().getCodeName()?lower_case}</#if>',
            text:'<#if mapitem.getTextPSAppDEField?? && mapitem.getTextPSAppDEField()??>${mapitem.getTextPSAppDEField().getCodeName()?lower_case}</#if>',
            tips:'<#if mapitem.getTipsPSAppDEField?? && mapitem.getTipsPSAppDEField()??>${mapitem.getTipsPSAppDEField().getCodeName()?lower_case}</#if>',
            code:'${mapitem_index}'
        }<#if mapitem_has_next>,</#if>
      </#list>
    </#if>
    };

    /**
     * 数据集
     *
     * @type {}
     * @memberof ${srfclassname('${ctrl.name}')}Base
     */
    public items: any[] = [];

    /**
     * 初始化配置
     *
     * @type {}
     * @memberof ${srfclassname('${ctrl.name}')}Base
     */
    public initOptions: any = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'horizontal',
            x: 'center',
            data: [
            <#if ctrl.getPSSysMapItems?? && ctrl.getPSSysMapItems()??>
              <#list ctrl.getPSSysMapItems() as mapitem>
                 '${mapitem.getName()}'<#if mapitem_has_next>,</#if>
              </#list>
            </#if>
            ]
        },
        geo: {
            map: 'china',
            zoom: 1.2,
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#4FADFD',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#0CD3DB'
                }
            }
        },
        visualMap: [
        <#if ctrl.getPSSysMapItems?? && ctrl.getPSSysMapItems()??>
          <#list ctrl.getPSSysMapItems() as mapitem>
            {
                type: 'piecewise',
                left: 'left',
                top: 'bottom',
                splitNumber: 1,
                seriesIndex: ${mapitem_index},
                pieces: [{ 
                    label: '${mapitem.getName()}',
                    min: ${mapitem_index * 10},
                    max: ${(mapitem_index+1) * 10},
                    <#if mapitem.getColor?? && mapitem.getColor()??>
                    color: '${mapitem.getColor()}',
                    </#if><#t>
                    <#if mapitem.getBKColor?? && mapitem.getBKColor()??>
                    backgroundColor: '${mapitem.getBKColor()}',
                    </#if><#t>
                    <#if mapitem.getBorderColor?? && mapitem.getBorderColor()??>
                    borderColor: '${mapitem.getBorderColor()}',
                    </#if><#t>
                    <#if mapitem.getBorderWidth?? && mapitem.getBorderWidth()??>
                    borderWidth: '${mapitem.getBorderWidth()}',
                    </#if><#t>
                }],
                show: false
            }<#if mapitem_has_next>,</#if>
          </#list>
        </#if>
        ],
        series: [
        <#if ctrl.getPSSysMapItems?? && ctrl.getPSSysMapItems()??>
          <#list ctrl.getPSSysMapItems() as mapitem>
            {
                name: '<#if mapitem.getName()??>${mapitem.getName()}</#if>',
                <#-- 类型判断 Start (默认 POINT )-->
                <#-- 目前支持 POINT -->
                <#if mapitem.getItemStyle?? && mapitem.getItemStyle()??>
                  <#if mapitem.getItemStyle() == 'POINT'>
                type: 'scatter',
                  <#else>
                type: 'scatter',
                  </#if>
                <#else>
                type: 'scatter',
                </#if>
                <#-- 类型判断 End -->
                coordinateSystem: 'geo',
                <#if mapitem.getItemType?? && mapitem.getItemType()??>
                itemType: '${mapitem.getItemType()?lower_case}',
                </#if><#t>
                <#if mapitem.getColor?? && mapitem.getColor()??>
                color: '${mapitem.getColor()}',
                </#if><#t>
                geoIndex: 0,
                symbolSize: 14,
                label: {
                    show: false
                },
                emphasis: {
                    label: {
                        show: false
                    }
                },
                tooltip: {
                    formatter: '{a}'
                },
                seriesDataIndex: ${(mapitem_index + 1) * 10 - 5},
                data: []
            }<#if mapitem_has_next>,</#if>
          </#list>
        </#if>
        ]
    }

    /**
     * 应用状态事件
     *
     * @public
     * @type {(Subscription | undefined)}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public appStateEvent: Subscription | undefined;


    /**
     * 刷新
     *
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public refresh(args?: any) {
        this.load();
    }



    /**
     * 选中的数据
     *
     * @returns {any[]}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public selections: any[] = [];

    /**
     * 获取多项数据
     *
     * @returns {any[]}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public getDatas(): any[] {
        return this.selections;
    }

    /**
     * 获取单项树
     *
     * @returns {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public getData(): any {
        return null;
    }
             
    /**
     * vue 生命周期
     *
     * @returns
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public created() {
        this.afterCreated();
    }

    /**
     * 执行created后的逻辑
     *
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public afterCreated() {
        if(AppCenterService && AppCenterService.getMessageCenter()){
            this.appStateEvent = AppCenterService.getMessageCenter().subscribe(({ name, action, data }) =>{
                if(!Object.is(name,"${ctrl.getPSAppDataEntity().getCodeName()}")){
                    return;
                }
                if(Object.is(action,'appRefresh')){
                    this.refresh();
                }
            })
        }
        this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => {
            if (!Object.is(tag, this.name)) {
                return;
            }
            if (Object.is('load', action)) {
                this.load(data);
            }
        });
    } 

    /**
     * vue生命周期
     *
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public mounted() {
        this.afterMounted();
    }

    /**
     * 执行mounted后的逻辑
     *
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public afterMounted() {
        let map: any = (this.$refs.map as any);
        this.map = echarts.init(map);
        this.map.setOption(this.initOptions);
    }

    /**
     * 加载数据
     *
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public load(data: any = {}, type: string = "",isloadding = this.showBusyIndicator) {
        this.items = [];
        const parentData: any = {};
        this.$emit('beforeload', parentData);
        Object.assign(data, parentData);
        let tempViewParams: any = parentData.viewparams ? parentData.viewparams : {};
        Object.assign(tempViewParams, JSON.parse(JSON.stringify(this.viewparams)));
        Object.assign(data, { viewparams: tempViewParams });
        this.service.search(this.fetchAction, this.context, data, isloadding).then((response: any) => {
            if(!response || response.status !== 200) {
                this.$notify.warning({
                    title: '警告',
                    message: response.error.message
                })
            }
            this.$emit('load', response.data ? response.data : []);
            this.items = response.data;
            this.handleOptions(response.data);
            this.setOptions();
        });
    }

    /**
     * 设置配置
     *
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public setOptions() {
        if(!this.map) {
            return;
        }
        const options = JSON.parse(JSON.stringify(this.initOptions));
        this.map.setOption(options);
    }

    /**
     * 处理数据集
     *
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public handleOptions(items: any[]) {
        if(!items || items.length == 0) {
            return;
        }
        items.forEach((item: any) => {
            let longitudeArr: Array<any> = [];
            let latitudeArr: Array<any> = [];
            for(let key in this.mapItems) {
                if(Object.is(key, item.itemType)) {
                    item.longitude ? longitudeArr.push(item.longitude) : '';
                    item.latitude ? latitudeArr.push(item.latitude) : '';
                }
            }
            this.handleMapOptions(longitudeArr, latitudeArr, item);
        })
    }

    /**
     * 配置整合
     *
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public handleMapOptions(longitude: Array<any>, latitude: Array<any>, arg: any) {
        let series: Array<any> = this.initOptions.series;
        if(!series || series.length==0) {
            return;
        }
        series.forEach((item: any) => {
            if(Object.is(arg.itemType, item.itemType)) {
                longitude.forEach((jd: any, index: number) => {
                    let tempItem: any[] = [];
                    tempItem.push(parseFloat(jd));
                    tempItem.push(parseFloat(latitude[index]));
                    this.handleSeriesOptions(tempItem, item, arg);
                    item.data.push(tempItem);
                })
            }
        });
        Object.assign(this.initOptions.series, series);
    }

    /**
     * 数据整合
     *
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public handleSeriesOptions(tempItem: any, item: any, data: any) {
        //  序列
        tempItem.push(item.seriesDataIndex);
    }


    /**
     * vue 生命周期
     *
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public destroyed() {
        this.afterDestroy();
    }

    /**
     * 执行destroyed后的逻辑
     *
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public afterDestroy() {
        if(this.appStateEvent){
            this.appStateEvent.unsubscribe();
        }
        if(this.viewStateEvent){
            this.viewStateEvent.unsubscribe();
        }
        <#if destroyed_block??>
        ${destroyed_block}
        </#if>
    }

<#ibizinclude>
../@MACRO/CONTROL/CONTROL_BOTTOM-BASE.vue.ftl
</#ibizinclude>

<#ibizinclude>
../@MACRO/CONTROL/CONTROL-BASE.style.ftl
</#ibizinclude>