{include file="public/head"}
<div class="layui-fluid layui-rg-bg">
    <div class="layui-card">
        <div class="layui-card-header">
            <div class="layui-inline">
                <div class="layui-input-inline"><button class="layui-btn layui-btn-primary layui-btn-sm layui-btn-disabled countnum"></button></div>
            </div>
            
            <div class="layui-inline" style="float:right;">
                <div class="layui-input-inline"><a class="layui-btn layui-btn-primary layui-btn-sm refresh"><i class="layui-icon layui-icon-refresh-3"></i></a></div>
                <div class="layui-input-inline"><a class="layui-btn layui-btn-sm" onclick="openlayer('{:url("add")}','{:lang('add')}','xs')">{:lang('add')}</a></div>
            </div>
        </div>
        <div class="layui-card-body">
            <div class="layui-form">
                <div class="layui-inline">
                    <div class="layui-form-item">
                        <label class="layui-form-label">地区选择：</label>
                        <div class="layui-input-inline">
                            <select id="province" level="1">
                            <option>请选择省</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select id="city" level="2">
                            <option>请选择市</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select id="district" level="3">
                            <option>请选择区(县)</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <table id="data_table" class="layui-table" lay-filter="data_table"></table>
            {:pagedebug()}总记录数:{$count}
        </div>
    </div>
</div>
{include file="public/foot"}
<script type="text/html" id="action">
    <div class="layui-input-inline"><a class="layui-btn layui-btn-xs" lay-event="edit"><i class='layui-icon layui-icon-edit'></i>{:lang('edit')}</a></div>
    {{#  if(!d.haschild){ }}
    <div class="layui-input-inline"><a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><i class='layui-icon layui-icon-delete'></i>{:lang('del')}</a></div>
    {{#  } else { }}
    <div class="layui-input-inline"><a class="layui-btn layui-btn-primary layui-btn-xs layui-disabled"><i class='layui-icon layui-icon-delete'></i>{:lang('del')}</a></div>
    {{#  } }}
</script>
<script type="text/javascript">
    layui.use(['table','form','element'],function(){
        var table = layui.table, form = layui.form, $ = layui.jquery; 
        loading = layer.load(1, {shade: [0.1, '#fff']});
        table.render({
            elem: '#data_table',
            data: '/region/getRegion',
            where: {parent_id:0,level:0},
            cols: [[
            {field:'id', title:'ID'},
            {field:'level', title:'层级',width:60,align:'center'},
            {field:'adcode', title:'地区编码', edit:'text'},
            {field:'name', title:'地区名称', edit:'text'},
            {field:'initial', title:'短名称', edit:'text'},
            {field:'pinyin', title:'拼音', edit:'text'},
            {field:'citycode', title:'区号', edit:'text'},
            {field:'lng_lat', align: 'center', title:'经纬度'},
            {toolbar: '#action', width: 140, align: 'center', title: '{:lang("act")}', fixed: 'right'}
            ]],
            limit: {:config('app.admin.pagelimit')},
            page: true,
            done: function (res) {
                var tableView = this.elem.next();
                $('.countnum').text('当前记录数：' + res.count + '条');
                layer.close(loading);
            },
        });
        var regionId = ['#province', '#city', '#district'];
        var regionHtml = ['请选择省', '请选择市', '请选择区(县)'];
        $(function () {
            getRegion(0, 0);
        });
        function getRegion(parent_id, level) {
            clearSon(level);
            var html = '<option value="-1">' + regionHtml[level] + '</option>';
            $.post('/region/getRegion', {parent_id: parent_id, level: level}, function (result) {
                $.each(result, function (index, item) {
                    html += '<option value="' + item.id + '">' + item.name + '</option>'
                });
                $(regionId[level]).html(html);
                form.render('select');
                table.reload('data_table',{
                    page:{curr:1},
                    data:result
                });
            });
        }

        function clearSon(level) {
            for (var i = level; i <= 2; i++) {
                var html = '<option value="-1">' + regionHtml[i] + '</option>';
                $(regionId[i]).html(html);
            }
            form.render('select');
            table.reload('data_table',{
                page:{curr:1},
                data:[]
            });
        }
        // 地区联动
        form.on('select', function(data){
            var level = $('#'+data.elem.id).attr('level') ? $('#'+data.elem.id).attr('level') : 0;
            var parent_id = data.value ? data.value : 0;
            getRegion(parent_id, level);
        });
        //监听行双击事件
        table.on('rowDouble(data_table)', function(obj){
            var url = url = "{:url('edit')}?id="+obj.data.id;
            openlayer(url,'{:lang("edit")}','xs');
        });
        //点击事件
        table.on('tool(data_table)', function(obj) {
            var data = obj.data;
            var event = obj.event;
            if(event === 'del'){
                layer.confirm('确认{:lang("del")}地区('+ data.name +')吗？',{title:'{:lang("del")}'},function(){
                    table_ajax(data,'{:url("del")}',10);
                })
                return false;
            }else if(event === 'edit'){
                var url = "{:url('edit')}?id="+data.id;
                openlayer(url,'{:lang("edit")}','xs');
            }
        });
        //监听单元格编辑
        table.on('edit(data_table)', function(obj){
            var value = obj.value //得到修改后的值
            ,data = obj.data //得到所在行所有键值
            ,field = obj.field; //得到字段
            if(field == 'torder') {
                table_ajax(data,'{:url("edit")}',10);
            } else {
                table_ajax(data,'{:url("edit")}',11);
            }
        });
    })
</script>