@extends('layouts.home')
@section('title', '确认订单')
@section('style')
    <style>
        .x-body {
            min-height: 500px;
        }

        .input_line {
            border-bottom: 1px solid #000;
            margin-left: 4px;
        }

        .input_line input {
            border: none;
        }

        .x-body .label_wx {
            text-align: left;
        }

        .x-body .layui-form-item .wx_box_input {
            display: block;
            float: none;
            left: -3px;
            width: auto;
            margin: 0 0 0px 96px !important;
        }

        .layui-inpu {
            width: 90% !important;
            margin-left: 20px !important;
            height: 33px !important;
            font-size: 16px !important;
            background: #fff;
            padding-bottom: 7px;
        }

        .text_font {
            height: 45px !important;
            border: none !important;
        }

        .total p {
            color: #000;
        }
    </style>
@endsection
@section('body')
    <div class="x-body">
        <div style="height:40px;display: flex;justify-content: space-between;align-items: center">
            <i class="layui-icon" onclick="window.history.go(-1)">&#xe65c;</i>
            <div style="text-align: center;color: black;line-height:40px;font-size:17px">{{$shop}}</div>
            <div></div>
        </div>
        {{--{{dump()}}--}}
        <form class="layui-form" action="/home/order" id="buyGoods" method="post" enctype="multipart/form-data"
              style="">
            {{csrf_field()}}
            <div class="form_box" style="position: relative;height:450px;">
                <div class="layui-form-item input_line" style="margin-top: 10px">
                    <label for="people" class="layui-form-label label_wx" style="font-size: 15px;padding: 5px 5px 2px;">
                        <span class="x-red">*</span>姓名
                    </label>
                    <div class="layui-input-inline wx_box_input">
                        <input type="text" id="people" name="people" required="" lay-verify="required"
                               autocomplete="off" class="layui-input layui-inpu">
                    </div>
                </div>
                <div class="layui-form-item input_line" style="">
                    <label for="mobelphone" class="layui-form-label label_wx"
                           style="font-size:15px;padding: 5px 5px 0px;">
                        <span class="x-red">*</span>电话
                    </label>
                    <div class="layui-input-inline wx_box_input">
                        <input type="tel" id="mobelphone" name="mobelphone" required="" lay-verify="phone"
                               lay-verify="required"
                               autocomplete="off" class="layui-input layui-inpu" value="">
                    </div>
                </div>
                <div class="layui-form-item input_line" style="">
                    <label for="address" class="layui-form-label label_wx" style="font-size:15px;padding: 5px 5px 0px;">
                        <span class="x-red">*</span>地区
                    </label>
                    <div class="layui-input-inline wx_box_input">
                        <div class="content-block" style="display: flex;align-items: center;height: 100%">
                            <input id="demo1" name="address" lay-verify="required" type="hidden" readonly=""
                                   placeholder="" class="layui-input layui-inpu city" value=""/>
                            <div id="picker5" style="margin-left: 30px;font-size: 16px" onclick="">请选择城市</div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item input_line" style="">
                    <label for="address_detail" class="layui-form-label label_wx"
                           style="font-size:15px;padding: 5px 5px 0px;">
                        <span class="x-red">*</span>地址
                    </label>
                    <div class="layui-input-inline wx_box_input">
                        <input onkeydown="getAddress()" placeholder="若按省市区格式填写,会为您自动填写地区" type="text" id="address_detail"
                               name="address_detail" required="" lay-verify="required"
                               autocomplete="off" class="layui-input layui-inpu">
                    </div>
                </div>
{{--                <div class="layui-form-item input_line">--}}
{{--                    <label for="remark" class="layui-form-label label_wx" style="font-size:15px;padding: 5px 5px 0;">--}}
{{--                        备忘录--}}
{{--                    </label>--}}
{{--                    <div class="layui-input-inline wx_box_input">--}}
{{--                        <textarea name="remark" id="remark" placeholder="备忘录仅供您自行使用，仅店员和下单人可见，若有需求请告知客服"--}}
{{--                                  autocomplete="off" class="layui-textarea" style="height: 80px;border: 0"></textarea>--}}
{{--                    </div>--}}
{{--                </div>--}}
               <div style="display: flex ; justify-content: space-between">
                   <div class="layui-btn layui-btn-primary" onclick="add_from()">
                       自动填写门店信息
                   </div>
                   <button class="layui-btn" style="background-color:rgb(239 , 239 , 239)" onclick="goBi()">
                       <i class="layui-icon layui-icon-util"></i>
                   </button>
               </div>
                <a class="layui-btn layui-btn-normal" lay-submit="" lay-filter="add" onclick="sub()"
                   style="background-color:#000000;width:100%;height: 48px;line-height: 48px;text-align: center;position: absolute;top:80%;left: 50%;margin-left: -50%;font-size: 17px;">
                    确认订单
                </a>
            </div>
            {{--合计及产品list开始--}}
            <div class="layui-fluid total" style="height: 40px;">
                <div class="layui-col-xs8" style="height: 40px;font-size: 15px;">
                    <span class="cczj" style="display: none">出厂总计：<span class="cczj-money">{{$unit_total_money}}</span></span>
                </div>
                <div class="layui-col-xs4" style="height: 40px">
                    <p class="layui-col-xs6" style="font-size: 15px; text-align: right">总计:￥</p>
                    <p class="layui-col-xs6 all-money"
                       style="font-size: 14px;text-align: right">{{$sale_total_money}}</p>
                </div>
                <div class="layui-col-xs12 freight" style="height: 40px;display: none">
                    <p class="layui-col-xs12 yunf" style="font-size: 15px; text-align: right">运费:￥10</p>
                </div>
            </div>
            @foreach($kong as $k)
                <div class=""
                     style="margin-top: 10px;height: 100%;border-bottom: 1px solid #9a9a9a;padding-bottom: 20px;width: 100%;display: flex">
                    <div class="" style="height: 100px;width: 30%">
                        <img width="100%" height="100%" src="{{env('OSS_HOST'). $k->icon150}}" alt="">
                    </div>
                    <div class="" style="padding-left: 20px;width: 70%">
                        <div class="layui-col-xs12 text_name"
                             style="display: flex;justify-content: space-between;font-size: 18px">
                            <span>{{$k->goods_name}}</span>
                        </div>
                        <div class="layui-col-xs12 p_gray" style="margin-top: 5px;font-size: 14px">
                            {{ $k->goods_normtype }}
                        </div>
                        {{--<div class="layui-col-xs12 p_gray" style="height: 16px;margin-top: 5px;font-size: 14px">{{ $k->dzinfo }}</div>--}}
                        <div class="layui-col-xs12 p_gray" style="margin-top: 30px">
                            <div style="display: flex;justify-content: space-between;align-items: center">
                                @if($k->activity){{--是否优惠--}}
                                <div>
                                    <span style="color: #df5000;font-size: 18px;margin-right: 2px">¥{{ $k->sale_discount_price }}</span>
                                    <span style="color: #df5000;font-size: 18px;margin-right: 2px">/</span>
                                    <span style="color: #df5000;font-size: 14px;">{{$k->unit}}</span>
                                </div>
                                <div class=""
                                     style="text-decoration:line-through;font-size: 14px!important;margin-top: 2px">
                                    ¥{{ $k->sale_price }}</div>
                                @else
                                    <div>
                                        <span style="color: #df5000;font-size: 18px!important">¥{{ $k->sale_discount_price }}</span>
                                        <span style="color: #df5000;font-size: 18px;margin-right: 2px">/</span>
                                        <span style="color: #df5000;font-size: 14px;">{{$k->unit}}</span>
                                    </div>
                                @endif
                                <div style="font-size: 15px">x{{$k->num}}</div>
                            </div>
                            <div class="layui-col-xs12 p_red"
                                 style="font-size: 14px;margin-bottom: 2px;margin-top: 2px">{{$k->activity}}</div>
                            <div class="layui-col-xs12 p_gray"
                                 style="height: 16px;margin-top: 2px;font-size: 14px">{{$k->otherinfo}}</div>
                        </div>
                    </div>
                </div>
            @endforeach

            <div style="margin-top: 30px;margin-left: 150px;font-size: 20px">

                {{--隐藏input 上传--}}
                <input type="hidden" name="eid" value="{{$eid}}">
                <input type="hidden" name="nid" value="{{$nid}}">
                <input type="hidden" name="num" value="{{$num}}">
                <input type="hidden" name="oid" value="{{$oid}}">
                <input type="hidden" name="vals" value="{{$vals}}">
                <input type="hidden" name="price" value="{{$price}}">
                <input type="hidden" name="shop" value="{{$shop}}">
                <input type="hidden" name="shopid" value="{{$shopid}}">
                <input type="hidden" name="up" value="{{$up}}">
                <input type="hidden" name="creater" value="{{$creater}}">
                <input type="hidden" name="prok" value="{{$prok}}">
                <input type="hidden" name="prov" value="{{$prov}}">
                <input type="hidden" name="norm_freight" value="{{ json_encode($norm_freight) }}">
                <input type="hidden" name="sale_total_money" value="{{$sale_total_money}}">
            </div>
        </form>
    </div>
    <script type="text/javascript" src="/js/picker/city.js"></script>
    <script type="text/javascript" src="/js/picker/picker.min.js"></script>
    <script type="text/javascript" src="/js/picker/index.js"></script>
    <script>
      let BI_URL = "{{$sets}}";
      function add_from() {
            shopAddress()
        }
        let _keyObj = {}
        window.location.search.replace("?" , "").split('&').forEach(query => {
          let query_key_value = query.split('=');
          _keyObj[query_key_value[0]]  = query_key_value[1]
        });
        let key = 'key' in _keyObj ? _keyObj.key : "";
        let go_bi_url = BI_URL + key;
        function goBi(){
          window.location.replace(go_bi_url)
          document.getElementById('buyGoods').onsubmit = function(){
            return false;
          }
        }
        var buyShopType = true
        layui.use(['form', 'layer'], function () {
            $ = layui.jquery;
            var form = layui.form
            form.verify({
                pass: [/(.+){6,16}$/, '密码必须6到16位']
                , phone: [/^1[2|3|4|5|6|7|8|9]\d{9}$/, '手机必须11位，只能是数字！']
            });
        });
        //链接没有all的时候不显示出厂总计
        if (window.location.href.indexOf('=all') !== -1) {
            $('.cczj').show();
        }

        function sub() {
            if (buyShopType === false) {
                return
            }
            let reg = 11 && /^((12|13|14|15|16|17|18|19)[0-9]{1}\d{8})$/
            if (!reg.test($('#mobelphone').val())) {
                return
            }
            $('#demo1').val($('#picker5')[0].innerText.replace(/ /g, ","))
            var data = {}
            $('input').each(function () {
                data[$(this).attr('name')] = $(this).val()
            })
            if (data.mobelphone === '' || data.address === '请选择城市' || data.address_detail === '' || data.people === '') {
                alert('必选项不能为空')
                return
            }
            data['remark'] = $('#remark').val()
            var loadIndex = layer.load() //打开加载loading
            //发异步，把数据提交给php
            $.post("/home/order", data, function (res) {
                buyShopType = false
                layer.close(loadIndex); //关闭加载loading
                //发异步，把数据提交给php
                if (res.status == 1) {
                    var oid = res.data
                    layer.msg(res.msg, {icon: 6, time: 5000}, function () {
                        location.href = '/home/orderSuccess/' + oid
                    })
                } else {
                    layer.msg(res.msg, {icon: 5})
                }
            }, "json");
        }
        function getMoney(money,num){
            return money.toFixed(num)
        }

        var all_money ={{$sale_total_money}}
        var cczj_money = {{$unit_total_money}}
            function freight(address) {
                //发异步，把数据提交给php
                $.post("/home/getFreight", {
                    _token: $("input[name=_token]").val(),
                    nid: $("input[name=nid]").val(),
                    num: $("input[name=num]").val(),
                    norm_freight: $("input[name=norm_freight]").val(),
                    address: address
                }, function (res) {
                    if (res.data.freight_money != 0) {
                        //发异步，把数据提交给php
                        if (res.status == 1) {
                            $(".freight").find("p").html("运费：￥" + res.data.freight_money)
                            $(".freight").show();
                            layer.msg(res.msg, {icon: 6, time: 1000})
                            $('.all-money')[0].innerText =getMoney(all_money + res.data.freight_money ,2)
                            $('.cczj-money')[0].innerText =getMoney(cczj_money + res.data.freight_money , 0)
                        } else {
                            layer.msg(res.msg, {icon: 5})
                        }
                    } else {
                        $(".freight").hide();
                        $('.all-money')[0].innerText =getMoney(all_money , 2)
                        $('.cczj-money')[0].innerText = getMoney(cczj_money , 0)
                    }
                }, "json");
            }

        function shopAddress() {
            var shopid = '{{$shopid}}'
            var loadIndex = layer.load() //打开加载loading
            //发异步，把数据提交给php
            $.post("/home/getShopAddress", {
                _token: $("input[name=_token]").val(),
                shopid: shopid
            }, function (res) {
                layer.close(loadIndex); //关闭加载loading
                if (res.status == 1) {
                    $("#demo1").val(res.data.city);
                    $("#picker5").html(res.data.city);
                    $("#address_detail").val(res.data.address);
                    $("#mobelphone").val(res.data.phone);
                    $("#people").val(res.data.people);
                    let city = res.data.city.split(',');
                    freight(city);
                } else {
                    layer.msg(res.msg, {icon: 5})
                }
            }, "json");
        }

        function getAddress(event) { //获取地址
            event = event || window.event //兼容
            var code = event.keyCode || event.which || event.charCode;
            if (code === 13) {
                $("#demo1").val("");
                $("#picker5").html("");
                let value = event.target.value.replace(/\s+/g , "")
                //使用正则表达式-> 去除空格
                let cityS = null
                let citys = null
                let cityq = null
                let hasS = true
                let reg = new RegExp("[北京台湾重庆上海天津]")
                let reg2 = new RegExp("[自治区特别行政区]")
                if (value.indexOf("市") === -1) {
                    layer.msg('请输入完整的地址')
                    return
                }
                if (value.indexOf('省') != -1) {
                    cityS = value.split('省')
                    citys = cityS[1].split('市')
                    cityq = citys[1].split('区')
                } else if (reg.test(value)) { //匹配不带省和自治区的省份
                    cityS = value.substring(0, 2)
                    citys = value.split('市')[0].substring(2)
                    cityq = value.split('市')[1].substring(0)
                } else if (reg2.test(value)) {
                    if (value.indexOf('自治区') != -1) {
                        cityS = value.substring(0, value.indexOf('自治区') + 3)
                    } else if (value.indexOf("特别行政区")) {
                        layer.msg('不支持')
                    }
                    citys = value.split('市')[0].substring(cityS.length)
                    cityq = value.split('市')[1].substring(0)
                }
                //获取省市区的字符串的数组
                let arr = []
                let result = null
                if (typeof cityS === 'string') {
                    result = []
                    result.push(cityS)
                    result.push(citys)
                    result.push(cityq)
                } else if (cityS instanceof Array) {
                    result = arr.concat(cityS[0], citys[0], cityq[0]) //将省市区全部压进一个数组中
                }
                if (result[2] === '') {
                    layer.msg('请输入完整的地址')
                    return
                }
                let cityValue = ''
                let flag = false //默认匹配不成功
                let flag2 = false
                let flag3 = false
                city.forEach(item => { //根据城市去匹配
                    if (item.name.includes(result[0])) { //进入这个判断说明匹配成功
                        cityValue += item.name + ","
                        flag = true
                        item.sub.forEach(item => {
                            if (item.name.includes(result[1])) {
                                flag2 = true
                                cityValue += item.name + ","
                                item.sub.forEach(item => { //区
                                    if (item.name.includes(result[2])) {
                                        flag3 = true
                                        cityValue += item.name
                                        $("#demo1").val(cityValue);
                                        $("#picker5").html(cityValue);
                                    }
                                })
                            }
                        })
                    }
                })
                if (flag && flag2 && flag3) {
                    layer.msg('匹配成功')
                } else {
                    layer.msg('匹配失败')
                }
            }
        }
    </script>
@endsection