(function () {
    Vue.prototype.$echarts = echarts;
    Vue.prototype.$layui = layui;

    let vm = new Vue({
        el: '#app',
        data() {
            return {
                items: [{
                    title: "测距",
                    name: 'length',
                    icon: './img/cj.png'
                },{
                    title: "测面积",
                    name: 'area',
                    icon: './img/cmj.png'
                },{
                    title: "角度测量",
                    name: 'angle',
                    icon: './img/jdcl.png'
                },{
                    title: "清除",
                    name: 'clear',
                    icon: './img/qc.png'
                },{
                    title: "打印",
                    name: 'print',
                    icon: './img/dy.png'
                },{
                    title: "标记",
                    name: 'mark',
                    icon: './img/bj.png'
                }],
                myMap: '',   // 地图实例
                myView: '',

                searchVal: '',
                xmlxtjChart: null,//项目类型统计
                chscChart: null,//策划生成图表
                table: null,
                activityTab: 0, // table or charts
                chscChartOpt: {},
                xmlxtjChartOpt: {},
                bgcolor: ['background: #FF4D4F', 'background: #FF7A45', 'background: #F5A623'],
                bcolor: ['background: #FF4D4F'],
                chscContent: [],
                xmspContent: [],
                phjgContent: [
                    { id: 9, fname: '开工逾期', count: 133 },
                    { id: 10, fname: '竣工逾期', count: 34 },
                    { id: 11, fname: '税收未完成', count: 34 }
                ],
                echartData: {
                    chsc: [],
                    xmlxtj: [
                        { value: 50, name: '可研协调' },
                        { value: 71, name: '可研协调' },
                        { value: 63, name: '可研协调' },
                        { value: 88, name: '可研协调' },
                        { value: 35, name: '可研协调' },
                    ]
                },
                fName: '',
                fId: '',
                xmmc: '',
                searchVal: '',
                cols: [[
                    {
                        field: 'xh',
                        width: "22%",
                        minWidth: '22%',
                        title: '序号',
                        type: 'numbers'
                    },
                    {
                        field: 'xmmc',
                        width: "48%",
                        title: '项目名称',
                        templet: function (d) {
                            if (d.xmmc === null) {
                                return '<span>-----</span>'
                            } else {
                                return d.xmmc
                            }
                        }
                    },
                    {
                        field: 'cz',
                        width: "30%",
                        title: '操作',
                        style: "color:#1998E8;",
                        toolbar: '#dtstdelTpl'
                    }
                ]],
                coor: ''
            }
        },
        mounted() {
            this.$layui.use(['table', 'element'], () => {
                this.table = this.$layui.table;
                this.xmzqList();
                this.initTable();
                this.initChscCharts();
                this.initXmlxtjCharts();

                $(window).resize(() => {
                    this.table.reload('dtstbgTest', {
                        height: window.innerHeight - $('#dtstbg').siblings('.container-right-content-header-left')[0].offsetTop - 280,
                    });
                    this.chscChart.setOption(this.chscChartOpt);
                    this.xmlxtjChart.setOption(this.xmlxtjChartOpt);
                    if (this.activityTab == 0) {
                        $('#chscChartt,#xmlxtjChart,.container-right-content-chsc-title').css('display', 'none');
                        $('.container-right-content-header-left>img,.container-right-content-header-left>input,.layui-table-view').css('display', 'inline-block');
                    } else {
                        $('#chscChartt,#xmlxtjChart,.container-right-content-chsc-title').css('display', 'inline-block');
                        $('.container-right-content-header-left>img,.container-right-content-header-left>input,.layui-table-view').css('display', 'none');
                    }
                });
            });
            this.createBasemap();
        },
        methods: {
            /**
             * 初始化地图
             */
            createBasemap() {
                let self = this;
                require([
                    "esri/Map",
                    "esri/Basemap",
                    "esri/views/MapView",
                    "esri/layers/FeatureLayer",
                    "esri/layers/TileLayer",
                    "esri/Graphic",
                    "esri/layers/GraphicsLayer",
                    "esri/widgets/ScaleBar",
                    "esri/geometry/Extent",
                    "dojo/domReady!"
                ], function(Map, Basemap, MapView, FeatureLayer, TileLayer, Graphic, GraphicsLayer, ScaleBar, Extent) {
                    let switchButton = document.getElementById("switch_btn");   // 切换地图按钮
                    let resetMap = document.getElementById("resetMap");   // 重置地图
                    let layer_electronicMap = new TileLayer({
                        url: 'http://10.6.144.88:6080/arcgis/rest/services/实施监督系统/地图灰化2/MapServer'   // 电子地图
                    });
                    let layer_imageMap = new TileLayer({
                        url: 'http://10.6.144.134:6080/arcgis/rest/services/影像底图2000/2018GF影像/MapServer'   // 影像地图
                    });

                    let electronBaseMap = new Basemap({
                        baseLayers: [layer_electronicMap],   // 制作电子地图底图
                        title: 'electronicMap',
                        id: 'electronicMap'
                    });
                    let imageBaseMap = new Basemap({
                        baseLayers: [layer_imageMap],   // 制作影像地图底图
                        title: 'imageMap',
                        id: 'imageMap'
                    });
                    let xiAnUrl = 'http://10.6.144.134:6080/arcgis/rest/services/国土数据2000/区县面/MapServer';   // 西安行政区要素图层（内网）

                    // 创建地图实例
                    self.myMap = new Map({
                        basemap: electronBaseMap
                    });
                    let ext = new Extent({
                        xmin: 463417,
                        ymin: 3725140,
                        xmax: 672512,
                        ymax: 3892165,
                        spatialReference: 4545
                    });
                    self.myView = new MapView({
                        container: "mapIn",
                        map: self.myMap,
                        extent: ext
                    });
                    self.myView.ui._removeComponents(["attribution"]);   // 移除地图来源信息
                    let xiAn_adminRegionLayer = new FeatureLayer(xiAnUrl, {
                        outFields: ["*"]   // 输出所有属性
                    });
                    self.myMap.add(xiAn_adminRegionLayer);

                    // 切换地图底图
                    switchButton.addEventListener('click', function() {
                        if(self.myMap.basemap.id === 'electronicMap') {
                            self.myMap.basemap = imageBaseMap;
                            $("#switch_btn img")[0].src="./img/dzdt_normal.png";
                        } else if(self.myMap.basemap.id === 'imageMap') {
                            self.myMap.basemap = electronBaseMap;
                            $("#switch_btn img")[0].src="./img/yxdt_normal.png";
                        }
                    });

                    // 添加地图比例尺
                    let scaleBar = new ScaleBar({
                        view: self.myView,
                        unit: 'metric'
                    });
                    self.myView.ui.add(scaleBar, {
                        position: 'bottom-left'
                    });

                    // 添加实时坐标显示
                    self.myView.on('pointer-move', function(et) {
                        let coor = self.myView.toMap(et.x, et.y);
                        $("#info").html('<span><img src="./img/locate.png" style="margin-bottom: 2px;"/></span>坐标| X:' + (coor.x).toFixed(2) + ' Y:' + (coor.y).toFixed(2));
                    });

                    // 地图初始化
                    resetMap.addEventListener('click', function() {
                        self.myView.extent = ext;
                    });
                });
            },

            /**
             * 初始化页面表格
             */
            initTable() {
                let self = this;
                $.ajax({
                    type: "POST",
                    url: CONF_NEWGHSC_SERVERURL + '/bz/getXmglxx',
                    data: JSON.stringify({fid: '', pageNum: 1, pageSize: 200}),
                    contentType: 'application/json;charset=utf-8',
                    dataType: 'json',
                    success: res => {
                        if (res.code == 200 && res.data) {
                            this.table.render({
                                height: window.innerHeight - $('#dtstbg').siblings('.container-right-content-header-left')[0].offsetTop - 280,
                                limit: 300,
                                elem: '#dtstbg',
                                data: res.data.list,
                                id: 'dtstbgTest',
                                cols: [[
                                    {field: 'xh', width: "15%", minWidth: '15%', title: '序号', type: 'numbers'},
                                    {field: 'xmmc', width: "65%", title: '项目名称',
                                        templet: function (d) {
                                            if (d.xmmc === null) {
                                                return '<span>-----</span>'
                                            } else {
                                                return d.xmmc
                                            }
                                        }
                                    },
                                    {field: 'cz', width: "20%", title: '操作', style: "color:#1998E8;",  toolbar: '#dtstdelTpl'}
                                ]],
                                text: {
                                    none: '暂无相关数据'
                                },
                                done: (res, curr, count) => {
                                    // 监听表格
                                    this.table.on('row(test)', function (obj) {
                                        axios.post(CONF_GIS_ONEMAP + '/projectMap/getProjectMapAndProjectLayerOne', {
                                            "projectCode": obj.data.id + ''
                                        }).then(res => {
                                            let projlocate = JSON.parse(res.data.projectLayers[0].geom);
                                            locateProj(projlocate.coordinates[0]);
                                            function locateProj(val) {
                                                require(["esri/geometry/Point", "esri/views/MapView"], function(Point, MapView) {
                                                    let pt = new Point({
                                                        x: val[0][0][0],
                                                        y: val[0][0][1],
                                                        spatialReference: 4545
                                                    });
                                                    self.myView.goTo({
                                                        center: pt,
                                                        zoom: 2
                                                    });
                                                })
                                            }
                                        });
                                    });
                                    // 监听详情
                                    this.table.on('tool(test)', function(obj){
                                        $.ajax({
                                            type: "POST",
                                            url: CONF_NEWGHSC_SERVERURL + '/bz/getlcXx?id=' + obj.data.id,
                                            contentType: 'application/json;charset=utf-8',
                                            dataType: 'json',
                                            success: function (res) {
                                                var res = res.data[0];
                                                var _data = {
                                                    PROJECTID: res.projectId,
                                                    PROJECTSTATUS: res.projectStatus,
                                                    ACTIVITYNAME: res.activityName,
                                                    PROJECTCODE: res.projectCode,
                                                    TASKID: res.taskId,
                                                    INSTANCEID: res.instanceId,
                                                    PROJECTNAME: res.projectName,
                                                    FLOWREVISIONID: res.flowRevisionId,
                                                    FLOWITEMTYPE: res.flowItemType,
                                                    FLOWVERSION: '2.0'
                                                };
                                                window.parent.listName = '已办项目'
                                                openApproveDetail(_data);
                                            }
                                        });
                                    });
                                }
                            });
                            // 叠加所有项目图形
                            this.addProjectLayer(res);
                        }
                    }
                });
            },

            /**
             * 策划生成
             * @param item
             */
            chscId(item) {
                this.chscbg();
                this.fName = item.fname;
                this.fId = item.fid;
                if (item.fname) {
                    let self = this;
                    $.ajax({
                        type: "POST",
                        url: CONF_NEWGHSC_SERVERURL + '/bz/getXmglxx',
                        data: JSON.stringify({
                            fid: item.fid,
                            xmjd: item.fname,
                            pageNum: 1,
                            pageSize: 200
                        }),
                        contentType: 'application/json;charset=utf-8',
                        dataType: 'json',
                        success: res => {
                            if (res.code == 200 && res.data) {
                                this.table.render({
                                    height:  window.innerHeight - $('#dtstbg').siblings('.container-right-content-header-left')[0].offsetTop - 280,
                                    limit: 300,
                                    elem: '#dtstbg',
                                    data: res.data.list,
                                    id: 'dtstbgTest',
                                    cols: [[
                                        {field: 'xh', width: "15%", minWidth: '15%', title: '序号', type: 'numbers'},
                                        {field: 'xmmc', width: "65%", title: '项目名称',
                                            templet: function (d) {
                                                if (d.xmmc === null) {
                                                    return '<span>-----</span>'
                                                } else {
                                                    return d.xmmc
                                                }
                                            }
                                        },
                                        {field: 'cz', width: "20%", title: '操作', style: "color:#1998E8;",  toolbar: '#dtstdelTpl'}
                                    ]],
                                    text: {
                                        none: '暂无相关数据'
                                    },
                                    done: (res, curr, count) => {
                                        this.table.on('row(test)', function (obj) {
                                            axios.post(CONF_GIS_ONEMAP + '/projectMap/getProjectMapAndProjectLayerOne', {
                                                "projectCode": obj.data.id + ''
                                            }).then(res => {
                                                let geo = res.data.projectLayers[0].geom;
                                                let temp_data = JSON.parse(geo).coordinates[0];
                                                locateProj(temp_data);
                                                function locateProj(val) {

                                                    require(["esri/geometry/Point", "esri/views/MapView"], function(Point, MapView) {
                                                        let pt = new Point({
                                                            x: val[0][0][0],
                                                            y: val[0][0][1],
                                                            spatialReference: 4545
                                                        });
                                                        self.myView.goTo({
                                                            center: pt,
                                                            zoom: 2
                                                        });
                                                    })
                                                }
                                            });
                                        });

                                        // 监听详情
                                        this.table.on('tool(test)', function(obj){
                                            $.ajax({
                                                type: "POST",
                                                url: CONF_NEWGHSC_SERVERURL + '/bz/getlcXx?id=' + obj.data.id,
                                                contentType: 'application/json;charset=utf-8',
                                                dataType: 'json',
                                                success: function (res) {
                                                    var res = res.data[0];
                                                    var _data = {
                                                        PROJECTID: res.projectId,
                                                        PROJECTSTATUS: res.projectStatus,
                                                        ACTIVITYNAME: res.activityName,
                                                        PROJECTCODE: res.projectCode,
                                                        TASKID: res.taskId,
                                                        INSTANCEID: res.instanceId,
                                                        PROJECTNAME: res.projectName,
                                                        FLOWREVISIONID: res.flowRevisionId,
                                                        FLOWITEMTYPE: res.flowItemType,
                                                        FLOWVERSION: '2.0'
                                                    };
                                                    window.parent.listName = '已办项目'
                                                    openApproveDetail(_data);
                                                }
                                            });
                                        });
                                    }
                                });
                                // 叠加空间协调或可研协调
                                this.addProjectLayer(res);
                            }
                        }
                    });
                }
            },

            /**
             * 取所有id，叠加所有项目
             * @param res
             */
            addProjectLayer(res) {
                let self = this;
                require(["esri/Map",
                    "esri/Graphic",
                    "esri/layers/GraphicsLayer",
                    "esri/geometry/Polygon"],function(Map, Graphic, GraphicsLayer, Polygon) {
                    let polygonlayers = self.myMap.findLayerById('projectLayers');
                    if(polygonlayers) {
                        self.myMap.remove(polygonlayers);
                    }
                    let projectLayers = new GraphicsLayer({id:"projectLayers"});
                    self.myMap.add(projectLayers);
                    // 取所有项目id
                    let arr_ids = [];
                    let length = res.data.list.length;
                    for(let i = 0; i < length; i++) {
                        arr_ids.push(res.data.list[i].id + '');
                    }
                    axios.post(CONF_GIS_ONEMAP + '/projectMap/getProjectLayersByPid', {
                        "projectIds": arr_ids
                    }).then(results => {
                        let arrID = [];
                        for(let i = 0; i < results.data.length; i++) {
                            arrID.push(JSON.parse(results.data[i].st_asgeojson).coordinates[0]);
                        }
                        if(arrID.length) {
                            for(let i = 0; i < arrID.length; i++) {
                                let projectPolygon = new Polygon({
                                    hasZ: true,
                                    hasM: true,
                                    rings: arrID[i],
                                    spatialReference: {
                                        wkid: 4545
                                    }
                                });
                                let symbol = {
                                    type: "simple-fill",
                                    color: [255, 87, 34, 0 ],
                                    style: "solid",
                                    outline: {
                                        color: "red",
                                        width: 1
                                    }
                                };
                                let multiPolygons = new Graphic({
                                    geometry: projectPolygon,
                                    symbol: symbol
                                });
                                projectLayers.graphics.add(multiPolygons);
                            }
                        }
                    });
                });
            },






            // 地图工具按钮
            toolActive() {
                this.$message({
                    showClose: true,
                    message: '地图工具暂未完成，会尽快跟进！',
                    type: 'warning',
                    center: true
                });
            },

            //初始化策划生成图表
            initChscCharts() {
                this.chscChart = this.$echarts.init(document.getElementById('chscChartt'));
                let arr = [];
                axios.post(CONF_NEWGHSC_SERVERURL + '/xm/getSmzqList', {
                }).then(res => {
                    for (var i = 0; i < res.data.data.length; i++) {
                        let obj = {};
                        obj.value = res.data.data[i].zs;
                        obj.name = res.data.data[i].fname;
                        arr.push(obj);
                    }
                    this.echartData.chsc = arr;
                })
                this.chscChartOpt = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        show: false,
                    },
                    grid: {
                        left: 2,
                        top: 2,
                        // right: 2,
                        bottom: 2,
                        containLabel: true
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            label: {
                                normal: {
                                    show: true,
                                    position: 'outside',
                                    formatter: '{b}:{d}%',
                                    align: 'center',
                                    verticalAlign: 'middle',
                                    textStyle: {
                                        fontFamily:"Microsoft YaHei",
                                        fontSize: 12,
                                        color: 'rgba(0,0,0,0.65)',
                                        lineHeight: 14.4,
                                    }
                                },
                                emphasis: {
                                    show: true
                                },
                            },
                            labelLine: {
                                normal: {
                                    show: true,
                                    length: 10,
                                    length2: 10,
                                    lineStyle: {
                                        width: 1
                                    }
                                }
                            },
                            data: this.echartData.chsc,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ],
                    color: ['#04C1A1', '#FCD76C', '#FF8668', '#9298E4', '#45C18B', '#0090FF'],
                };
                // 绘制图表
                this.chscChart.setOption(this.chscChartOpt);
            },
            initXmlxtjCharts() {
                this.xmlxtjChart = this.$echarts.init(document.getElementById('xmlxtjChart'));
                this.xmlxtjChartOpt = {
                    legend: {
                        data: ['房屋建筑类政府投资项目', '线性工程类政府投资项目', '一般社会投资项目', '小型社会投资项目', '带方案出让用地的社会投资项目'],
                        bottom: '-15%',
                    },
                    grid: {
                        left: '1%',
                        top: '3%',
                        right: '4%',
                        // bottom: '2%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        },
                        axisPointer: {
                            axis: 'y'
                        }
                    },
                    //X轴信息
                    xAxis: [{
                        type: 'category',
                        data: ['王大锤'],
                        show: false
                        // axisTick: {
                        //     alignWithLabel: true
                        // }
                    }
                    ],
                    //Y轴信息
                    yAxis: [{ type: 'value', }],
                    series: [{
                        name: '房屋建筑类政府投资项目',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: '#4A9BE0',
                                fontSize: 10
                            }
                        },
                        //柱状图宽度
                        barWidth: '12%',
                        barGap: '50%',//柱图间距
                        //柱状图数值
                        data: [20],
                    },
                        {
                            name: '线性工程类政府投资项目',
                            type: 'bar',
                            barWidth: '12%',
                            itemStyle: {
                                normal: {
                                    color: '#FF7D1A',
                                    fontSize: 10
                                }
                            },
                            data: [50]
                        },
                        {
                            name: '一般社会投资项目',
                            type: 'bar',
                            barWidth: '12%',
                            itemStyle: {
                                normal: {
                                    color: '#A5A5A3'
                                }
                            },
                            data: [83]
                        },
                        {
                            name: '小型社会投资项目',
                            type: 'bar',
                            barWidth: '12%',
                            itemStyle: {
                                normal: {
                                    color: '#F5C000'
                                }
                            },
                            data: [60]
                        },
                        {
                            name: '带方案出让用地的社会投资项目',
                            type: 'bar',
                            barWidth: '12%',
                            itemStyle: {
                                normal: {
                                    color: '#4072CC'
                                }
                            },
                            data: [34]
                        },
                    ],
                    color: ['#4A9BE0', '#FF7D1A', '#A5A5A3', '#F5C000', '#4072CC'],
                };
                // 绘制图表
                this.xmlxtjChart.setOption(this.xmlxtjChartOpt);
            },
            // 图表
            chsclb() {
                this.activityTab = 1;
                this.initChscCharts();
                $('#chscChartt,#xmlxtjChart,.container-right-content-chsc-title').css('display', 'inline-block');
                $('.container-right-content-header-left>img,.container-right-content-header-left>input,.layui-table-view').css('display', 'none');
                $('.container-right-content-header-right').css('top', '-13px');
                $('.layui-icon-list').css('color', '#1998E8');
                $('.layui-icon-table').css('color', '#666665');
            },
            // 表格
            chscbg() {
                this.activityTab = 0;
                $('#chscChartt,#xmlxtjChart,.container-right-content-chsc-title').css('display', 'none');
                $('.layui-table-view,.container-right-content-header-left>img,.container-right-content-header-left>input').css({
                    'display': 'inline-block'
                });
                $('.container-right-content-header-right').css('top', '0px');
                $('.layui-icon-list').css('color', '#666665');
                $('.layui-icon-table').css('color', '#1998E8');
            },


            xmspId(xmspid) {
                $.ajax({
                    type: "POST",
                    url: CONF_NEWGHSC_SERVERURL + '/bz/getXmglxx',
                    data: JSON.stringify({
                        fid: xmspid,
                        pageNum: 1,
                        pageSize: 200,
                        sqjsrq: "",
                        sqksrq: "",
                        xmbh: "",
                        xmjd: "",
                        xmmc: "",
                        yddw: ""
                    }),
                    contentType: 'application/json;charset=utf-8',
                    dataType: 'json',
                    success: res => {
                        if (res.code == 200 && res.data) {
                            this.table.render({
                                height:  window.innerHeight - $('#dtstbg').siblings('.container-right-content-header-left')[0].offsetTop - 280,
                                limit: 300,
                                elem: '#dtstbg',
                                data: res.data.list,
                                id: 'dtstbgTest',
                                // cellMinWidth: 80,//全局定义常规单元格的最小宽度，layui 2.2.1 新增
                                cols: this.cols,
                                text: {
                                    none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                                },
                                done: function (res, curr, count) {

                                }
                            });
                        }
                    }
                });
            },
            phjgId(phjgid) {
                console.log(phjgid)
            },
            inputVal(searchVal) {
                this.xmmc = $('#inputVal').val()
                $.ajax({
                    type: "POST",
                    url: CONF_NEWGHSC_SERVERURL + '/bz/getXmglxx',
                    data: JSON.stringify({
                        fid: this.fId,
                        xmjd: this.fName,
                        xmmc: this.xmmc,
                        pageNum: 1,
                        pageSize: 200,
                        sqjsrq: "",
                        sqksrq: "",
                        xmbh: "",
                        yddw: ''
                    }),
                    contentType: 'application/json;charset=utf-8',
                    dataType: 'json',
                    success: res => {
                        if (res.code == 200 && res.data) {
                            this.table.render({
                                height:  window.innerHeight - $('#dtstbg').siblings('.container-right-content-header-left')[0].offsetTop - 280,
                                limit: 300,
                                elem: '#dtstbg',
                                data: res.data.list,
                                id: 'dtstbgTest',
                                // cellMinWidth: 80,//全局定义常规单元格的最小宽度，layui 2.2.1 新增
                                cols: this.cols,
                                text: {
                                    none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                                },
                                done: function (res, curr, count) {

                                }
                            });
                        }
                    }
                });
            },
            xmzqList() {
                axios.post(CONF_NEWGHSC_SERVERURL + '/xm/getSmzqList', {
                }).then(res => {
                    this.chscContent[0] = res.data.data[0];
                    this.chscContent[1] = res.data.data[1];
                    this.chscContent[2] = res.data.data[2];
                    this.xmspContent = res.data.data.slice(3, 7);
                })
            },
        },
        computed: {
        }
    });
})()