@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>
            <input type="hidden" name="shop" value="{{$shop}}">
            <div></div>
        </div>
        <div class="label-nav" style="display: flex">
            <div class="layui-btn layui-btn-normal bottom1" style="width: 50%;background-color:#000000" onclick="change(1)">发货至门店</div>
            <div class="layui-btn layui-btn-normal bottom2" style="width: 50%;background-color: gray" onclick="change(2)">发货至指定地址</div>
        </div>
        <form class="layui-form" action="/home/order"  id="buyGoods" method="post" enctype="multipart/form-data"
              style="">
            {{csrf_field()}}
            <div class="form_box one-form"  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"
                               autocomplete="off" class="layui-input layui-inpu one-input" lay-verify="required">
                    </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;">
                        业主电话
                    </label>
                    <div class="layui-input-inline wx_box_input">
                        <input type="tel" id="mobelphone" name="mobelphone"
                               autocomplete="off" class="layui-input layui-inpu one-input" 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>--}}
                <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(1)"
                   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>

        {{--{{dump()}}--}}

            <div class="form_box two-form"  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 two-input">
                    </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 two-input" 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 two-input" 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 two-input">
                    </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>--}}



                <a class="layui-btn layui-btn-normal" lay-submit="" lay-filter="add" onclick="sub(2)"
                   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="gytp_price" value="{{$gytp_price}}">
                <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 type = true
      let BI_URL = "{{$sets}}";
      let form = $('#buyGoods'); // 整个 form
      let oneForm = $('.one-form'); // 第一个 form
      let twoForm = $('.two-form'); // 第二个 form
      let orderCount = 1;
      twoForm.remove()
      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 change(number){
          oneForm.remove()
          twoForm.remove()
          if(number === 1){
            $('.bottom1').css(
              {
                'backgroundColor':"#000"
              }
            )
            $('.bottom2').css(
              {
                'backgroundColor':"grey"
              }
            )
            form.prepend(oneForm)
          }else{
            $('.bottom1').css(
              {
                'backgroundColor':"grey"
              }
            )

            $('.bottom2').css(
              {
                'backgroundColor':"#000"
              }
            )
            form.prepend(twoForm)
          }
        }
        function sub(number) {

          let data = {}
          if(number === 1){
            $('input').each(function (){
              data[$(this).attr('name')] = $(this).val()
            })
            data['remark'] = $('#remark').val()
            if(data.people === ''){
              // alert('业主姓名不能为空')
              return;
            }
          }else{
            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, ","))
            $('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()
          }
            // 要 知道他是第几次下单 通过 orderCount 来判断是否是 第一单
            if(orderCount === 1){
                getOrderData(data)
            }else{
                layer.msg("正在提交订单，请稍等")
                return;
            }

        }
        function getMoney(money,num){
            return money.toFixed(num)
        }

        const getOrderData = (data) =>{
            orderCount++
            var loadIndex = layer.load(2,{
                shade:[0.5,"#000"],
                zIndex:999
            }) //打开加载loading
            $.post("/home/order", data, function (res) {
                type = false;
                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");
        }

        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(),
                    shop: $("input[name=shop]").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