@extends('layout.im')
@section('title','我的订单')
@section('myCss')
    <link rel="stylesheet" href="/1/css/im.css">
    <script text="type/javascript" src="/1/js/input.js"></script>
    <script src="/1/js/Area.js" type="text/javascript"></script>
    <script src="/1/js/AreaData_min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  initComplexArea('seachprov', 'seachcity', 'seachdistrict', area_array, sub_array, '11', '0', '0');
});

//得到地区码
function getAreaID(){
  var area = 0;
  if($("#seachdistrict").val() != "0"){
    area = $("#seachdistrict").val();
  }else if ($("#seachcity").val() != "0"){
    area = $("#seachcity").val();
  }else{
    area = $("#seachprov").val();
  }
  return area;
}
//根据地区码查询地区名
function getAreaNamebyID(areaID){
  var areaName = "";
  if(areaID.length == 2){
    areaName = area_array[areaID];
  }else if(areaID.length == 4){
    var index1 = areaID.substring(0, 2);
    areaName = area_array[index1] + " " + sub_array[index1][areaID];
  }else if(areaID.length == 6){
    var index1 = areaID.substring(0, 2);
    var index2 = areaID.substring(0, 4);
    areaName = area_array[index1] + " " + sub_array[index1][index2] + " " + sub_arr[index2][areaID];
  }
  return areaName;
}
</script>
@endsection
@section('shouye')
<div class="shouye">
    <a href="{{url('/')}}"><img src="/1/img/home.gif" height="21px" width="21px" alt=""></a>
    <a href="{{url('/im')}}">我的商城</a>
    <p>地址管理</p>
</div>
@endsection
@section('right-con')
<div class="right-content f-fr">
    <div class="address-main">
        <div class="main">
            <div class="row">
                <span class="title rollit ">新增收货地址</span>
                <span class="gray">（您目前已有地址<i class="already">{{$num}}</i>个，最多还可以增加<i class="settle">{{10-$num}}</i>个）</span>
            </div>
            <form id="valid-form">
                <!-- 修改地址时要的id -->
                <input type="hidden" class="editId" value="">
                <div class="content">
                    <div class="row namePhone clearfix">
                        <div class="f-fl addressName">
                            <span>收货人姓名<i class="mark">*</i></span>
                            <input id="name" class="varify" name="receiver" type="text" placeholder="长度不超过15个字" maxlength="15">
                        </div>
                        <div class="f-fl addressPhone">
                            <span>收货人手机号<i class="mark">*</i></span>
                            <input id="phone" name="telNumber" class="varify" type="text" placeholder="请输入11位手机号" maxlength="11">
                        </div>
                    </div>
                    <div class="row clearfix receverAddress">
                        <span class="f-fl">收货人地址<i class="mark">*</i></span>
                        <div class="addr_select" style="">
                            <select id="seachprov" name="seachprov" onChange="changeComplexProvince(this.value, sub_array, 'seachcity', 'seachdistrict');"></select>&nbsp;&nbsp;
                            <select id="seachcity" name="homecity" onChange="changeCity(this.value,'seachdistrict','seachdistrict');"></select>&nbsp;&nbsp;
                            <span id="seachdistrict_div"><select id="seachdistrict" name="seachdistrict"></select></span>
                        </div>
                    </div>
                    <div class="row  detailAddress">
                        <span>详细地址<i class="mark">*&nbsp;&nbsp;&nbsp;</i></span>
                        <input id="detailAddress" name="address" class="varify" type="text" placeholder="请输入不少于4不超过50个字的详细地址，例如：路名，门牌号" minlength="4" maxlength="50">
                    </div>
                    <div class="opreat">
                        <label for=""><input id="default" class="setDefault" type="checkbox" name="isDefault">设为默认</label>
                        <a href="javascript:;" class="addAddress">保存</a>
                        <a href="javascript:;" class="editAddress">修改</a>
                    </div>
                </div>
            </form>
            <div class="list">
                <div class="row">
                    <div class="title">
                        <div>已有地址</div>
                    </div>
                    <div class="listHead">
                        <span class="center w15">收货人姓名</span><span class="center w35">收货人地址</span><span class="center w25">收货人手机号</span><span class="center w10">操作</span>
                    </div>
                    <ul id="tableList" class="">
                        @foreach($addr as $k=>$v)
                        <li class="addrList">
                            <input class="addressId" type="hidden" value="{{$v['id']}}">
                            <input class="defaultaddr" type="hidden" value="{{$v['isdefault']}}">
                            <span class="center w15 ad-name">{{$v['name']}}</span>
                            <span class="completeAddress center w35"><p style="display:inline" class="ad-addr">{{$v['addr']}}</p>&nbsp;<p style="display:inline" class="ad-jiedao">{{$v['jiedao']}}</p></span>
                            <span class="center w25 ad-phone">{{$v['phone']}}</span>
                            <span class="center w10">
                              <a class="edit" href="javascript:;">修改</a>
                              <a class="delete" href="javascript:;">删除</a>
                            </span>
                            <span class="left w15">
                                <a class="beDefault hide" href="javascript:;">设为默认</a>
                                <div class="morenaddr hide">
                                    <i class="iconfont fa fa-check-circle"></i>
                                    <i class="defaultAddress">默认地址</i>
                                </div>
                            </span>
                        </li>
                        @endforeach
                        <div class="showNewAddr"></div>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
     $("#my-addresses").addClass('active');
</script>
@endsection
@section('myJs')
<script>
    setDefault()
    // 设置默认地址样式
    function setDefault(){
        $('.defaultaddr').each(function(){
            if($(this).val() == 1) {
                $(this).parent().find('.morenaddr').removeClass('hide')
            };
        })
    }

    // 修改地址样式
    $('.edit').click(function(){
        $('.address-main .rollit').text('修改收货地址')
        $('.addAddress').hide()
        $('.editAddress').css('display','inline-block')
        $('body,html').animate({ scrollTop: 0 }, 500);
        var id = $(this).parents('li').find('.addressId').val()
        var name = $(this).parents('li').find('.ad-name').html()
        var phone = $(this).parents('li').find('.ad-phone').html()
        var jiedao = $(this).parents('li').find('.ad-jiedao').html()
        var moren = $(this).parents('li').find('.defaultaddr').val()
        if (moren == 1) {
            $('.setDefault').attr("checked",true);
        }else if(moren == 0){
            $('.setDefault').attr("checked",false);
        }
        $('.editId').val(id)
        $('#name').val(name)
        $('#phone').val(phone)
        $('#detailAddress').val(jiedao)
    })

    // 修改地址操作
    $('.editAddress').click(function(){
        var area =  getAreaNamebyID(getAreaID())
        var addr_id = $('.editId').val()
        // alert(area.length);return;
        if($('#name').val() == '') {
            swal('','请填写收货人姓名','warning')
        }else if($('#phone').val() == '') {
            swal('','请填写收货人手机号','warning')
        }else if(!$('#phone').val().match(/^[1][3,4,5,7,8][0-9]{9}$/)) {
            swal('','请填写正确的手机号','warning')
        }else if(area.length < 6) {
            swal('','请选择收货人地址','warning')
        }else if($('#detailAddress').val() == '') {
            swal('','请填写详细地址','warning')
        }else if($('#detailAddress').val().length < 4  || $('#detailAddress').val().length > 50) {
            swal('','请输入不少于4不超过50个字的详细地址','warning')
        }else{
            if ($('#default').is(':checked')) {
                var isdefault = 1;
            }else{
                var isdefault = 0;
            }
            var url = "{{url('/address/edit')}}";
            var data={
            'name':$('#name').val(),
            'phone':$('#phone').val(),
            'addr_id':addr_id,
            'area':area,
            'isdefault':isdefault,
            'addr':$('#detailAddress').val(),
            '_token':'{{csrf_token()}}',
            }
            var success=function(response){
                if(response.error==1){
                    swal('',response.errmsg,'error')
                }else{
                    $('#valid-form')[0].reset();
                    swal('','修改成功','success');
                    // location.reload();
                    setTimeout("location.reload();",1500)
                    // $('.showNewAddr').before("")
                }
            }
            $.post(url,data,success,'json');
        }
    })

    // 删除地址操作
    $('.delete').click(function(){
        var addr_id = $(this).parents('li').find('.addressId').val()
        swal({
        title: '',
        text: "确认删除这条地址吗",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        }).then(function() {
            var url = "{{url('/address/del')}}"
            var data={
                'id':addr_id,
                '_token':'{{csrf_token()}}',
            }
            var success=function(response){
                if(response.error==1){
                    swal('',response.errmsg,'error')
                }else{
                    swal('',response.errmsg,'success')
                    // location.reload();
                    setTimeout("location.reload();",1500)
                }
            }
            $.post(url,data,success,'json')
        });
    })

    // 默认地址操作
    $('.beDefault').click(function(){
        var addr_id = $(this).parents('li').find('.addressId').val()
        var url = "{{url('/address/beDefault')}}"
        var data={
            'addr_id':addr_id,
            '_token':'{{csrf_token()}}',
        }
        var success=function(response){
            if(response.error==1){
                swal('',response.errmsg,'error')
            }else{
                swal('',response.errmsg,'success')
                // location.reload();
                setTimeout("location.reload();",1500)
            }
        }
        $.post(url,data,success,'json')
    })
    // 添加地址事件
    $('.addAddress').click(function(){
        if ($('.already').html() == 10) {
            swal('','您的地址过多，请修改您不用的地址','warning');return;
        };
        var area =  getAreaNamebyID(getAreaID())
        if($('#name').val() == '') {
            swal('','请填写收货人姓名','warning')
        // }else if($('#phone').val() == '') {
        //     swal('','请填写收货人手机号','warning')
        // }else if(!$('#phone').val().match(/^(((13[0-9]{1})|159|153)+\d{8})$/)) {
        //     swal('','请填写正确的手机号','warning')
        // }else if(area.length < 6) {
        //     swal('','请选择收货人地址','warning')
        // }else if($('#detailAddress').val() == '') {
        //     swal('','请填写详细地址','warning')
        // }else if($('#detailAddress').val().length < 4  || $('#detailAddress').val().length > 50) {
        //     swal('','请输入不少于4不超过50个字的详细地址','warning')
        }else{
            if ($('#default').is(':checked')) {
                var isdefault = 1;
            }else{
                var isdefault = 0;
            }
            var url = "{{url('/address/insert')}}";
            var data={
            'name':$('#name').val(),
            'phone':$('#phone').val(),
            'area':area,
            'isdefault':isdefault,
            'addr':$('#detailAddress').val(),
            '_token':'{{csrf_token()}}',
            }
            var success=function(response){
                if(response.error==1){
                    swal('',response.errmsg,'error')
                }else{
                    $('#valid-form')[0].reset();
                    swal('','添加成功','success');
                    // location.reload();
                    setTimeout("location.reload();",1500)
                    // $('.showNewAddr').before("")
                }
            }
            $.post(url,data,success,'json');
        }
    })
    // 地址列表鼠标出入事件
    $('#tableList li').mouseover(function(){
        if($(this).find('.defaultaddr').val() != 1) {
            $(this).find($('.beDefault')).removeClass('hide')
        };
    })

    $('#tableList li').mouseout(function(){
        $(this).find($('.beDefault')).addClass('hide')
    })
    // over
</script>
@endsection