$(function () {
    layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage,
            layer = layui.layer,
            $ = layui.jquery;
        //$.post("/home/privice_data", function (data) {
        //    var provarr = [];
        //    for (var i = 0; i < data.length; i++) {
        //        var ref_dt = {};
        //        ref_dt.name = data[i].are_name;
        //        ref_dt.id = data[i].id;
        //        provarr.push(ref_dt);
        //    }

        //    //地图相关配置
        //    var mymap = echarts.init(document.queryselector('.cont_map'));

        //    //模拟从后台得到的服务商数据

        //    //初始化数据，这里我要遍历从后台得到的数据，然后将其封装成我需要的数据格式
        //    var init_data = [];
        //    //模拟得到的数据,得到每个省的代理名称，负责人姓名，电话


        //    //将数据改装，因为echarts不认省和市这两个字符,从后台获取得到数据说明都是有代理商的，所以将这些省份的vaule设置为2，也就是默认选中显示
        //    for (var i = 0; i < provarr.length; i++) {
        //        var str = provarr[i];
        //        var re = /省|市/g;
        //        var newstr = { name: str.name.replace(re, ''), value: 2, id: str.id };
        //        init_data.push(newstr);
        //    }


        //    //配置项
        //    option = {
        //        title: {
        //            text: '',
        //            x: 'center',
        //            y: '10px',
        //            textstyle: {
        //                fontsize: 20
        //            }
        //        },
        //        visualmap: {
        //            show: false,
        //            min: 0,
        //            max: 3,
        //            realtime: false,
        //            splitnumber: 3,
        //            inrange: {
        //                color: ['#197465', '#eee', '#b8ddf0']
        //            },
        //            pieces: [
        //                { gte: 3, color: "#197465" }, //点击的颜色
        //                { gte: 2, lt: 2, color: "#b8ddf0" }, //有服务商的省份
        //                { gte: 0, lt: 0, color: "#eee" }, //默认无服务商显示的颜色
        //            ]
        //        },
        //        series: [{
        //            type: 'map',
        //            map: 'china',
        //            zoom: 1.2,
        //            roam: false,
        //            label: {
        //                show: true,
        //                fontsize: 11
        //            },
        //            itemstyle: {
        //                areacolor: '#eee',
        //                normal: {
        //                    bordercolor: 'rgba(0, 0, 0, 0.2)'
        //                },
        //                emphasis: {
        //                    areacolor: '#197465', //鼠标选择区域颜色
        //                    label: {
        //                        color: "#fff"
        //                    }
        //                }
        //            },
        //            data: []
        //        }]
        //    };

        //    //将初始化的数据送到配置项中
        //    option.series[0].data = init_data;
        //    //将配置项给实例化对象
        //    mymap.setoption(option);

        //    //点击实现该省份的颜色变化，同时将数据渲染到页面上
        //    mymap.on('click', function (params) {
        //        select_province(params);
        //    })

        //    //初始化颜色的方法
        //    function init_province() {
        //        var init_len = option.series[0].data.length;
        //        for (var i = 0; i < init_len; i++) {
        //            option.series[0].data[i].value = 2;
        //            mymap.setoption(option);
        //        }
        //    };

        //    //选中省份的方法
        //    function select_province(params) {
        //        var len = option.series[0].data.length;
        //        for (var i = 0; i < len; i++) {
        //            //选中的是否在高亮的里面
        //            if (option.series[0].data[i].name == params.name) {
        //                //先初始化
        //                init_province();
        //                //在设置选中
        //                option.series[0].data[i].value = 3;
        //                mymap.setoption(option);
        //                //将这个省份的数据渲染到地图下面的列表中
        //                //console.log(params);
        //                load_data(params.data.id);
        //            } else {
        //                //load_data(-1);
        //            }
        //        }
        //    };

        //    // console.log($(document).width());

        //    if ($(document).width() < 767) {

        //        option.series[0].roam = true;
        //        option.series[0].zoom = 1.6;
        //        mymap.setoption(option);

        //    } else {
        //        option.series[0].roam = false;
        //        option.series[0].zoom = 1.2;
        //        mymap.setoption(option);
        //    }

        //    window.addeventlistener("resize", function () {

        //        mymap.resize();

        //        if ($(document).width() < 767) {

        //            option.series[0].roam = true;
        //            option.series[0].zoom = 1.6;
        //            mymap.setoption(option);

        //        } else {
        //            option.series[0].roam = false;
        //            option.series[0].zoom = 1.2;
        //            mymap.setoption(option);
        //        }

        //    })
        //    //分页
        //    function load_data(id) {
        //        $.post("/home/servicecenter_cooperation_data", { page: 1, id: id, }, function (data) {
        //            load_html(data.data);
        //            ////总页数大于页码总数
        //            //laypage.render({
        //            //    elem: 'page_01',
        //            //    count: data.count //数据总数
        //            //    ,limit: 4 //数据总数
        //            //    , jump: function (obj, first) {
        //            //        if (!first) {
        //            //            $.post("/home/servicecenter_cooperation_data", { page: obj.curr, id: id, }, function (data) {
        //            //                load_html(data.data);
        //            //            })
        //            //        }
        //            //    }
        //            //});
        //        })
        //    }

        //    //post
        //})
        ////layui


        $(function () {
            $.post("/home/privice_data", function (data) {
                var html = "";
                for (var i = 0; i < data.length; i++) {
                    html += "<option value = \"" + data[i].id + "\" >" + data[i].are_name + "</option>";
                }
                $(".province_list").html(html);
                if (data.length > 0) {
                    load_data(data[0].id);
                }
                $(".province_list").change(function () {
                    //添加所需要执行的操作代码  
                    console.log($(this).val());
                    load_data($(this).val());
                })
            })
        })


        //分页
        function load_data(id) {
            $.post("/home/servicecenter_cooperation_data", { page: 1, id: id, }, function (data) {
                load_html(data.data);
            })
        }

        function load_html(data) {
            var html = "";
            html += "<li class=\"cont_li li_head\">";
            html += "<div class=\"part_div\">片区</div>";
            html += "<div class=\"position_div\">职务</div>";
            html += "<div class=\"name_div\">姓名</div>";
            html += "<div class=\"tel_div\">联系电话</div>";
            html += "</li>";
            for (var i = 0; i < data.length; i++) {
                html += "<li class=\"cont_li li_body\">";
                html += "<div class=\"part_div\">" + data[i].are_name + "</div>";
                html += "<div class=\"position_div\">" + data[i].position + "</div>";
                html += "<div class=\"name_div\">" + data[i].name + "</div>";
                html += "<div class=\"tel_div\">" + data[i].contact_tel + "</div>";
                html += "</li>";
            }
            $(".cont_ul").html(html);
        }
    })

})