{% load i18n %}
{% load tj_filters %}


<script>
    $(document).ready(function () {

        var deletedRows = []
        var editRows = []

        $('#tb_outlet').DataTable({
            dom: 'Bfrtip',
            autoWidth: true,
            pageLength: 10,
            buttons: [{ extend: 'excelHtml5', text: '导出到Excel' }],
            language: lng,
        });
        $('#tb_outlet').SetEditable({
            onEdit: function ($row, data, next) {
                console.log($row)
                var editurl = '/company/outlet/edit/';
                if (data.id) {
                    editurl += data.id + '/'
                }
				
                data.company_id = $("#TCompanyID").val();
                $.ajax({
                    url: editurl,
                    type: 'post',
                    data,
                    success: function (res) {
                        if (res.e === '') {
                            for (var i = 0; i < editRows.length; i++) {
                                if (editRows[i].key == data.key) {
                                    editRows[i] = data;
                                    next();
                                    return;
                                }
                            }
                            editRows.push(data)
                            $row.data('id',res.id)
                            $row.find('td[data-type="address-picker"]').data('lng_lat',data.lng_lat)
							console.log($row.find('td[data-type="address-picker"]'))
							console.log($row.data('id'))
                            next();
                        }
                        else {
                            toastr.error(res.e, "操作错误：",
                                { timeOut: 800, positionClass: "toast-center-center" }
                            );
                        }
                    },
                    error: function () {
                        toastr.error('网络超时，请稍后再试！', "操作错误：",
                            { timeOut: 800, positionClass: "toast-center-center" }
                        );
                    }
                })
            },
            onBeforeDelete: function ($row) {
                var id = $row.data('id')
                if (id) {
                    deletedRows.push(id)
                }
            },
            onDelete: function ($row, next) {
                var id = $row.data('id')
                if (id) {
                    var r = confirm('您确定要删除此项吗？')
                    if (r) {
                        $.ajax({
                            url: '/obj/delete/outlet/'+id+'/',
                            success: function (res) {
                                console.log(res)
                                if (res.e === '') { 
                                    next();
                                }
                                else {
                                    toastr.error(res.e, "操作错误：",
                                        { timeOut: 800, positionClass: "toast-center-center" }
                                    );
                                }
                            },
                            error: function () {
                                toastr.error('网络超时，请稍后再试！', "操作错误：",
                                    { timeOut: 800, positionClass: "toast-center-center" }
                                );
                            }
                        })
                    }
                }
                else {
                    next();
                }
            },
			onChooseLocation: function (e) {
                    var $this = $(e);
                    var $td = $this.parents('td')
                    var lnglat = $td.data('lng_lat')
					var $row = $td.parent()
                    var data = TableGetTrData($row) 
                    var el_id = $row.attr('id')

                    if ($.isEmpty(data.city) || $.isEmpty(data.name) || $.isEmpty(data.series_id)) {
                        toastr.error("请先设置门店名称和所在城市及授权品牌！", "操作错误：",
                            { timeOut: 800, positionClass: "toast-center-center" }
                        );
                        return;
                    } else {
                        var url = '/company/franchise/outlet/?lng_lat=' + (lnglat?lnglat:'') +
                            "&el_id=" + el_id +
                            "&gis_city_id=" + data.city +
                            "&outlet_name=" + data.name +
                            "&obj_id=" + (data.id?data.id:'');

                        $.OpenUrlCfmDlg(url, name + " 地理位置：", "保存", "取消");
                    } 
               }
        
        });

        $("#btn_add").click(function () {
            rowAddNewAndEdit('tb_outlet', [
                { type: 'text', name: 'name' },
                { type: 'province-select', name: 'province' },
                { type: 'city-select', name: 'city' },
                { type: 'county-select', name: 'county' },
                { type: 'select', name: 'series_id', options: '{{series}}' },
                { type: 'select', name: 'status_id', options: '{{status}}' },
                { type: 'text', name: 'remark' },
                { type: 'address-picker', name: 'address' },
            ])
        })
    });
</script>


{% block subtitle %}
<ol class="breadcrumb">
    <li>{% trans '经销商管理' %}</li>
    <li>{% trans '加盟商信息' %}</li>
    <li>{% trans '加盟商门店' %}</li>

</ol>
{% endblock %}


{% block form_content %}

<a type="button" class='btn l-a create-btn ' id="btn_add">
    <span class='glyphicon glyphicon-plus' style='padding-right:5px;'></span>
    {% trans '新建门店' %}
</a>
<div class='table-responsive'>

    <table id='tb_outlet' class="table table-condensed table-bordered table-hover" style="background-color:#fff;padding:10px">
        <thead>
            <tr>
                <th>{% trans '分店名称 ' %}</th>
                <th style='width:100px;'>{% trans '省份' %}</th>
                <th style='width:100px;'>{% trans '城市' %}</th>
                <th style='width:100px;'>{% trans '区/县' %}</th>
                <th style='width:80px;'>{% trans '授权品牌' %}</th>
                <th>{% trans '门店状态' %}</th>
                <th>{% trans '特殊情况' %}</th>
                <th>{% trans '详细地址' %}</th>
            </tr>
        </thead>
        <tbody>
            {% for d in data %}
            <tr data-id="{{d.id}}" data-key="{{d.id}}">
                <td data-type="text" data-name="name">{{d.name}}</td>
                <td data-type="province-select" data-name="province" data-default="{{d.province_gis.id}}">
                    {{d.province_gis.name}}</td>
                <td data-type="city-select" data-name="city" data-default="{{d.city_gis.id}}">{{d.city_gis.name}}</td>
                <td data-type="county-select" data-name="county" data-default="{{d.county_gis.id}}">
                    {{d.county_gis.name}}</td>
                <td data-type="select" data-name="series_id" data-options='{{series}}' data-default="{{d.series_id}}">
                    {{d.series_name}}</td>
                <td data-type="select" data-name="status_id" data-options='{{status}}' data-default="{{d.status_id}}">
                    {{d.status_name}}</td>
                <td data-type="text" data-name="remark">{{d.remark}}</td>
                <td data-type="address-picker" data-name="address" data-lng_lat="{{d.lng_lat}}">{{d.address}}</td>
                <!-- <td>
                    <div class="input-group">{{f.address}}{{f.lng_lat}}
                        <span class="input-group-btn"><a class='btn btn-success btn-location'>
                                <span class='glyphicon glyphicon-map-marker'></span></a></span>
                    </div>
                </td> -->
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
<input type="hidden" id="TCompanyID" value="{{id}}" />
{% endblock %}