@extends('layouts.father')
@section('title', '订单详情')
@section('style')
    <style>
        .x-so{
            margin-bottom: 20px;
        }
        .disabled{
            /*color: #d2d2d2!important;*/
            background-color: #d2d2d2!important;
        }
        .disNone{
            display: none;
        }
        .text-a{
            text-align: center;
        }
        .layui-btn{
            margin-top: 0;
        }
        .layui-table td, .layui-table th{
            padding: 1px 1px !important;
            text-align: center;
        }
        .xB{
            margin-bottom: 0 !important;
        }
        .layui-form-selectup dl{
            top: 42px;
            bottom: unset !important;
        }
    </style>
    <link href="/assets/lightbox/css/lightbox.css" rel="stylesheet">
@endsection
@section('body')
{{--    <div class="x-nav">--}}
        {{csrf_field()}}
{{--           <span class="layui-breadcrumb">--}}
{{--        <a onclick="goindex()">首页</a>--}}
{{--        <a href="">销售管理</a>--}}
{{--        <a><cite>新建订单</cite></a>--}}
{{--      </span>--}}
{{--        <a class="layui-btn layui-btn-small allClick" style="line-height:1.6em;margin-top:3px;float:right" href='' title="刷新">--}}
{{--            <i class="layui-icon" style="line-height:30px">&#xe669;</i>--}}
{{--        </a>--}}
{{--        <div class="layui-btn" onclick="go_erp()" style="margin:3px 15px 0 0;float:right;"><i class="layui-icon">&#xe656;</i></div>--}}
{{--    </div>--}}

    <div class="x-body">
        <form class="layui-form">
            <div class="layui-row x-so" style="display: flex;width:100%">
                <div style="width:50%" class="addressBtnWamp">
                    <button class="layui-btn">发货至指定地址</button>
                    <button class="layui-btn disabled">发货至门店</button>
                    <input type="text" class="layui-input" placeholder="客服标志请手动填写" name="creater" style="margin-top: 10px">
                    <div class="layui-inline store">
                        <input type="text" class="layui-input" name="store" placeholder="选择门店" >
                    </div>
                </div>
                <div style="width:50%;text-align: right">
                    <button class="layui-btn" lay-submit lay-filter="save">保存订单</button>
                    <button class="layui-btn shuaxin" onclick="changeaddress(1)">刷新总价</button>
                </div>

            </div>
            <xblock class="xB ">
                <div class="layui-row">
                        <div class="layui-inline">
                            <input type="text"  onchange="changepeople(this)" class="layui-input x1Input" name="name" placeholder="水洗唛将打印收货人姓名" lay-verify="required">
                        </div>
                        <div class="layui-inline">
                            <input type="text" class="layui-input x1Input" onchange="changephone(this)" name="phone"  placeholder="收货电话" lay-verify="required">
                        </div>
                        <div class="layui-inline">
                            <div id="picker5" style="width: 188px;height: 36px;position: absolute"></div>
                            <input type="text" class="layui-input x1Input"  placeholder="地区" lay-verify="required" id="add-city" name="province">
                        </div>
                        <div class="layui-inline">
                            <input type="text" name="address" class="layui-input x1Input" onchange="changeaddress(2)" onkeydown="getAddress()" placeholder="地址" lay-verify="required">
                        </div>
                </div>
            </xblock>

            <xblock class="xB disNone">
                <div class="layui-row">

                        <div class="layui-inline">
                            <input type="text" class="layui-input" name="vipName"  placeholder="水洗唛将打印vip客户姓名" >
                        </div>
                        <div class="layui-inline">
                            <div id="picker5"></div>
                            <input type="text" class="layui-input"  placeholder="备注客户的联系方式"   name="information">
                        </div>
                </div>
            </xblock>


            <div class="layui-row x-so" style="display: flex;width:100%;margin-bottom: 0">
                <div style="width:100%;text-align: right">
                    <button class="layui-btn layui-btn-radius" onclick="changeColumn()">切换栏目</button>
                    <button class="layui-btn layui-btn-danger layui-btn-radius" onclick="deleteOrder()" >删除</button>
                    <button class="layui-btn layui-btn-normal layui-btn-radius add" >新增一行</button>

                </div>
            </div>
            <div style="width: 100%;overflow-x: auto;height: 400px">
            <table class="layui-table" style="width: 1870px;">
                <thead>
                <tr>
                    <th>选择</th>
                    <th>序号</th>
                    <th>产品</th>
                    <th>货号</th>
                    <th>数量</th>
                    <th class="guigeTh">规格</th>
                    <th class="customizedTh" style="display: none">定制</th>
                    <th class="guigeTh">主布</th>
                    <th class="guigeTh">配一</th>
                    <th class="guigeTh">配二</th>
                    <th class="guigeTh">出厂价</th>
                    <th class="customizedTh" style="display: none">出厂差价</th>
                    <th class="customizedTh" style="display: none">贴牌差价</th>
                </tr>
                </thead>
                <tbody class="info-body"></tbody>
            </table>
           </div>
            <div style="width:100%;text-align: right;font-size: 20px">
                零售价总额: ¥&nbsp;<span class="sale_price">0</span>&nbsp;&nbsp;
                出厂价总额: ¥&nbsp;<span class="unit_price">0</span>&nbsp;&nbsp;
                贴牌加总额: ¥&nbsp;<span class="tp_price">0</span>&nbsp;&nbsp;
            </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 type="text/javascript" src="/js/tableContentRoll.js"></script>
    <script src="/js/pinyin-pro.js"></script>
    <link rel="stylesheet" href="/css/tableContentRoll.css">
    <script>
        let params = new URLSearchParams(window.location.search)
        let id = params.get('id');
        let shopID = null
        let api_token = null
        let saveData = [] // 保存的数据
        let oldTechStorage = [] // 保存的旧数据
        // 如果有 id 则 编辑订单
        // let product_idlist = [];
        // let changeProk
        let address_detail = ""
        let sends = "1";
        let mobelphone = ""
        const sum = priceKey =>{
            let sumPrice = 0
            saveData.forEach(data =>sumPrice += (data[priceKey] * 1))
            return sumPrice.toFixed(2)
        }
        let people = ""
        function changepeople(e){
            people = e.value;
            let data = {
                api_token,
                id,
                people
            }
            $.post("/api/business/orderMessage" , data , res =>{
                console.log(res)
            })

        }

        function changephone(e){
            mobelphone = e.value;
            let data = {
                api_token,
                id,
                mobelphone
            }
            $.post("/api/business/orderMessage" , data , res =>{
                console.log(res)
            })
        }

        function changeaddress(number){
            let e = window.event || arguments.callee.caller.arguments[0];
             address_detail = document.querySelector('input[name=address]').value;
             if(isShowClo){
                 layer.msg("请将栏目切换为规格在新增")
                 e.preventDefault()
                 return
             }
             let prokArr = []
             let provArr = []
            saveData.forEach(item =>{
                let key = []
                let value = []
                item.normtech.forEach((t , index) =>{
                    if(t.value !== item.tech[index].value){
                        key.push(item.tech[index].sname)
                        value.push(item.tech[index].value)
                    }
                })
                prokArr.push(key.join(','))
                provArr.push(value.join(','))
            })
            console.log(prokArr)
            console.log(provArr)
            let prok = prokArr.join('|')
            let prov = provArr.join("|")
             let data = {
                 api_token,
                 id,
                 address_detail,
                 prok,
                 prov
             }
            $.post("/api/business/orderMessage" , data , res =>{
                if(number === 1){
                    saveData = []
                    hasID()
                }
            })
            e.preventDefault()
        }


        // 优化完的 assembly 与 value 挂钩
        const construction = (data , type) =>{
            // 通过 save data 来进行 循环来 对 整个渲染
            // 根据 type 来进行 查看是添加还是更改
            let index = data.index - 1
            if(type == 'add'){
                saveData.push(data)
            }else{
                saveData[index] = data
            }
            // saveData.sort((a , b) => b.index - a.index)
            let url = ''
            saveData.forEach((data , index)  =>{
                url += `<tr class="info" style="height:100%">`
                //循环一遍就是 一个 tr 对 tr 进行 更改
                url += `<td><input type="checkbox" lay-skin="primary" class="labelPrint"  name="" id=""></td>`
                url += `<td class="index">${index+1}</td>`
                url += `<td class="search">${data.name}</td>`
                url += `<td class="number">${data.number}</td>`
                url += `<td class="num" style="width:100px">
                       <div><input type="text" name="num" lay-verify="required" autocomplete="off" data-index="${data.index}" class="layui-input" value="${data.num}" onblur="ggprocess(this)" onchange="changeNum(this)"></div>
                    </td>`
                // 规格
                url += `<td class="guige" style="display: flex;width: 800px">`
                let widthPercentage = 100/ data.guige.length;
                data.guige.forEach((guige , g_index) =>{
                    // 规格的 value 为接受的值 如果 选项有 value 的值 就让 value的值选中
                    let options = guige.option;
                    let value = guige.value;
                    if(options){
                        url += `<select class="layui-select" data-index="${data.index}" data-name="${guige.name}" style="width:${widthPercentage}%" lay-filter="guige">`
                        url += `<option value="">${guige.name}</option>`
                        options.forEach(option =>{
                            if(option == value){
                                url += `<option selected value="${option}">${option}</option>`
                            }else{
                                url += `<option value="${option}">${option}</option>`
                            }
                        })
                        url += `</select>`
                    }else{
                        if(data.normTypelistName.indexOf(guige.name) !== -1){
                            if(id){
                               if(data.normRules[g_index] === ''){
                                   url += `<div style="width:${widthPercentage}%"> <input type="text" data-index="${data.index}" onblur="ggprocess(this)" disabled="disabled" onchange="ggchange(this)" data-name="${guige.name}" value="${value}"  lay-verify="required" placeholder="${guige.name}" autocomplete="off" class="layui-input guigeInput layui-disabled"></div>`
                               }else{
                                   url += `<div style="width:${widthPercentage}%"> <input type="text" data-index="${data.index}" onblur="ggprocess(this)" onchange="ggchange(this)" data-name="${guige.name}" value="${value}"  lay-verify="required" placeholder="${guige.name}" autocomplete="off" class="layui-input guigeInput"></div>`
                               }
                            }else{
                                url += `<div style="width:${widthPercentage}%"> <input type="text" data-index="${data.index}" onblur="ggprocess(this)" onchange="ggchange(this)" data-name="${guige.name}" value="${value}"  lay-verify="required" placeholder="${guige.name}" autocomplete="off" class="layui-input guigeInput"></div>`
                            }
                        }else{
                            if(id){
                                if(data.normRules[g_index] !== ''){
                                    url += `<div style="width:${widthPercentage}%"> <input type="text" data-index="${data.index}" onblur="ggprocess(this)" onchange="ggchange(this)" data-name="${guige.name}" value="${value}"  placeholder="${guige.name}" autocomplete="off" class="layui-input guigeInput"></div>`
                                }else{
                                    url += `<div style="width:${widthPercentage}%"> <input type="text" data-index="${data.index}" disabled="true" onblur="ggprocess(this)" onchange="ggchange(this)" data-name="${guige.name}" value="${value}"  placeholder="${guige.name}" autocomplete="off" class="layui-input guigeInput layui-disabled"></div>`
                                }
                            }else{
                                url += `<div style="width:${widthPercentage}%"> <input type="text" data-index="${data.index}" onblur="ggprocess(this)" onchange="ggchange(this)" data-name="${guige.name}" value="${value}"  placeholder="${guige.name}" autocomplete="off" class="layui-input guigeInput"></div>`
                            }
                        }
                    }
                })
                url += `</td>`
                // 工艺
                url += `<td class="customized" style="display: none;height:100%">`
                let widthCustomized = 100 / data.tech.length
                data.tech.forEach((tech , index) =>{
                    let value = tech.value
                    if(tech.option.length > 0){
                        // 下拉
                        url += `
                <select class="layui-select"  data-name="${tech.sname}" data-index="${data.index}" style="width:${widthCustomized}%" lay-filter="tech">
                        <option value="">${tech.name}</option>`
                        tech.option.forEach(option => {
                            if(option == value){
                                url += `<option selected value="${option}">${option}</option>`
                            }else{
                                url += `<option value='${option}'>${option}</option>`
                            }
                        })
                        url +=`</select>`
                    }else{
                        // 输入
                        url += `<div style="width:${widthCustomized}"><input type="text" onblur="tprocess(this)" data-index="${data.index}" data-name="${tech.sname}" value="${value}"  placeholder="${tech.name}" autocomplete="off" class="layui-input techInput" /> </div>`
                    }
                })
                url += `</td>`
                url += `<td class="zb guigeTh" style="padding: 0">
                    <div> <input type="text" data-index="${index}" data-name="zb" onblur="plprocess(this)"   value="${data.zb}" onchange="changeInputValue(this)"   autocomplete="off" class="layui-input"></div>
                  </td>`
                url += `<td class="py guigeTh" style="padding: 0">
                    <div> <input type="text" data-index="${index}" data-name="py" onblur="plprocess(this)"   value="${data.py}" onchange="changeInputValue(this)" autocomplete="off" class="layui-input"></div>
                  </td>`
                url += `<td class="pe guigeTh" style="padding: 0">
                    <div> <input type="text" data-index="${index}" data-name="pe" onblur="plprocess(this)"   value="${data.pe}" onchange="changeInputValue(this)"  autocomplete="off" class="layui-input"></div>
                  </td>`
                url += `<td class="price guigeTh" style="padding: 0;text-align: center">
                   ${data.unit_price}
                  </td>`
                url += `<td class="customizedTh" style="text-align: center;display: none">
                        <div><input type="text" data-index="${index}" data-name="factoryPrice" value="${data.factoryPrice}" onblur="plprice(this)" onchange="changeInputValue(this)"  autocomplete="off" class="layui-input"></div>
                    </td>`
                url += `<td class="customizedTh" style="display: none">
                        <div><input type="text" data-index="${index}" data-name="oemPrice" value="${data.oemPrice}" onblur="plprice(this)" onchange="changeInputValue(this)"  autocomplete="off" class="layui-input"></div>
                    </td>`
                url += `</tr>`
            })
            const tbody = document.querySelector('.info-body')
            tbody.innerHTML = url
            layui.use('form' , function(){
                let form = layui.form;
                form.render()
                search()
                form.on('select(guige)' , function(elData){
                    let all_prok = []
                    let all_prov = []
                    let index = elData.elem.dataset.index;
                    changeValue(elData.elem , saveData[index - 1] , elData.value)
                    saveData.forEach(item =>{
                        let i_prok = []
                        let i_prov = []
                        let i_name = item.tech.map(i => i.name)
                        item.changetech.forEach(i =>{
                            let index = i_name.indexOf(i.name)
                            if(index != -1){
                                i_prok.push(item.tech[index].sname)
                                i_prov.push(i.value)
                            }else{
                                if(i.name === '主布'){
                                    // 主布
                                    i_prok.push('zb')
                                }
                                if(i.name === '配一'){
                                    i_prok.push('py')
                                }
                                if(i.name === '配二'){
                                    i_prok.push('pe')
                                }
                                i_prov.push(i.value)
                            }
                        })
                        all_prok.push(i_prok)
                        all_prov.push(i_prov)
                    })
                    let prok = all_prok.map(item => item.join()).join('|')
                    let prov = all_prov.map(item => item.join()).join('|')
                    if(id){
                        let load_index = layer.load()
                        // 如果有 id
                        let hasdata = saveData[index - 1]
                        let eid = hasdata.eid;
                        let id = hasdata.id
                        let num = hasdata.num
                        // let oid = hasdata.oid
                        let normRules = hasdata.normRules
                        let vals = hasdata.guige.map((item , index)=>{
                            if(normRules[index] !== ""){
                                return item.value
                            }
                        }).filter(item => typeof item !== 'undefined' && item.length > 0).join(',')
                        let oid = hasdata.guige.map((item , index) =>{
                            if(normRules[index] !== ""){
                               return item
                            }
                        }).filter(item => typeof item !== 'undefined' && item.value.length > 0 && item.normType)
                            .map(item => item.normType[0].id)
                            .join(",")
                        let data = {
                            api_token,
                            nid:hasdata.normid,
                            eid,
                            id,
                            num,
                            oid,
                            prok,
                            prov,
                            vals
                        }
                        $.post('/api/business/orderDetailEdit' , data , res=>{
                            layer.close(load_index)
                            layer.msg(res.msg)
                        })
                    }
                })
                form.on('select(tech)' , function(elData){
                    let index = elData.elem.dataset.index;
                    changeTechValue(elData.elem , saveData[index - 1] , elData.value)
                    if(id){
                        // 如果有 id
                        let load_index = layer.load()

                        let hasdata = saveData[index - 1]
                        let o_data = {
                            api_token,
                            id:hasdata.id
                        }
                        $.get(`/api/business/orderProcess` , o_data , res=>{
                            let prok = elData.elem.dataset.name
                            let tech_id = ""
                            let {supply , tech} = res.data;
                            let alls_t_data = [...supply , ...tech]
                            let t_index = alls_t_data.map(item => item.sname).indexOf(prok)
                            tech_id = alls_t_data[t_index].tech_id.toString();
                            let data = {
                                api_token,
                                gytp_price:"0",
                                id:hasdata.id,
                                price:"",
                                prok,
                                prov:`${elData.value}`,
                                tech_id
                            }
                            $.post('/api/business/orderProcess', data , res=>{
                                layer.close(load_index)
                                layer.msg(res.msg)
                            })
                        })

                    }
                })
            })
            document.querySelectorAll('.guigeInput').forEach(el => el.addEventListener('blur' , function(){
                let index = this.dataset.index
                changeValue(this , saveData[index - 1] , this.value)
            }))
            document.querySelectorAll('.techInput').forEach(el => el.addEventListener('blur' , function(){
                let index = this.dataset.index
                changeTechValue(this , saveData[index -1] , this.value)
            }))


            $('.sale_price').html(sum('sale_price'))
            $('.unit_price').html(sum('unit_price'))
            $('.tp_price').html(sum('tp_price'))

        }

        const ggchange = el =>{
            let index = el.dataset.index - 1;
            let name = el.dataset.name
            saveData[index].guige.forEach(item =>{
                if(item.name === name){
                    item.value = el.value
                }
            })
        }

        const ggprocess = el =>{
            if(id){
                let load_index = layer.load()
                let all_prok = []
                let all_prov = []
                saveData.forEach(item =>{
                    let i_prok = []
                    let i_prov = []
                    let i_name = item.tech.map(i => i.name)
                    item.changetech.forEach(i =>{
                        let index = i_name.indexOf(i.name)
                        if(index != -1){
                            i_prok.push(item.tech[index].sname)
                            i_prov.push(i.value)
                        }else{
                            if(i.name === '主布'){
                                // 主布
                                i_prok.push('zb')
                            }
                            if(i.name === '配一'){
                                i_prok.push('py')
                            }
                            if(i.name === '配二'){
                                i_prok.push('pe')
                            }
                            i_prov.push(i.value)
                        }
                    })
                    all_prok.push(i_prok)
                    all_prov.push(i_prov)
                })
                let prok = all_prok.map(item => item.join()).join('|')
                let prov = all_prov.map(item => item.join()).join('|')
                let index = el.dataset.index - 1;
                let hasdata = saveData[index];
                let eid = hasdata.eid;
                let id = hasdata.id;
                let num = hasdata.num
                // let oid = hasdata.oid
                let normRules = hasdata.normRules
                let vals = hasdata.guige.map((item , index)=>{
                    if(normRules[index] !== ""){
                        return item.value
                    }
                }).filter(item => typeof item !== 'undefined' && item.length > 0).join(',')
                let oid = hasdata.guige.map((item , index)=>{
                    if(normRules[index] !== ""){
                        return item
                    }
                }).filter(item => typeof item !== 'undefined'&&item.value.length > 0 && item.normType)
                    .map(item => item.normType[0].id)
                    .join(",")
                let data = {
                    api_token,
                    nid:hasdata.normid,
                    eid,
                    id,
                    num,
                    oid,
                    prok,
                    prov,
                    vals,
                }
                $.post('/api/business/orderDetailEdit' , data , res=>{
                    layer.close(load_index)
                    layer.msg(res.msg)
                })
            }

        }
        const plprice = el =>{
            if(id){
                let index = el.dataset.index
                let load_index = layer.load()
                let hasdata = saveData[index]
                let data = {
                    api_token,
                    gytp_price:hasdata.oemPrice ? hasdata.oemPrice : "0",
                    id:hasdata.id,
                    tech_id:"",
                    prok:"",
                    prov:"",
                    price:hasdata.factoryPrice ? hasdata.factoryPrice : ""
                }
                $.post('/api/business/orderProcess', data , res=>{
                    layer.close(load_index)
                    layer.msg(res.msg)
                })
            }
        }
        const tprocess = el => {
            if(id){
                let index = el.dataset.index - 1
                let load_index = layer.load()
                let hasdata = saveData[index]
                let prok = el.dataset.name
                let o_data = {
                    api_token,
                    id:hasdata.id
                }
                $.get(`/api/business/orderProcess` , o_data , res=>{
                    let tech_id = ""
                    let {supply , tech} = res.data;
                    let alls_t_data = [...supply , ...tech]
                    let t_index = alls_t_data.map(item => item.sname).indexOf(prok)
                    tech_id = alls_t_data[t_index].tech_id.toString() ? alls_t_data[t_index].tech_id.toString() : "";
                    let data = {
                        api_token,
                        gytp_price:"0",
                        id:hasdata.id,
                        price:"",
                        prok,
                        prov:`${el.value}`,
                        tech_id
                    }
                    $.post('/api/business/orderProcess', data , res=>{
                        layer.close(load_index)
                        layer.msg(res.msg)
                    })
                })

            }
        }

        function getapi_token(store){
            $.get(`/admin/getMendianId?shop=${store}` , function(res){
                api_token = res.data.api_token
            })
        }
        const changeSend = () =>{
            let data = {
                api_token,
                send:sends,
                id
            }
            $.post('/api/business/orderSend' , data , res=>{
                console.log(res)
            })
        }
        function hasID(){
            let all_data = []
            document.querySelector('[lay-filter=save]').style.display = "none"
            $.ajaxSettings.async = false;
            $.get(`/api/business/orderDetail?api_token=${api_token}&id=${id}` , res=>{
                document.querySelector('input[name=address]').value = (res.data.shop.address)
                document.querySelector('input[name=name]').value =(res.data.shop.people)
                people = res.data.shop.people
                mobelphone = res.data.order.mobelphone
                document.querySelector('input[name=phone]').value = (res.data.order.mobelphone)
                document.querySelector('input[name=province]').value = (res.data.shop.city)
                document.querySelector('.store').querySelector('input').value = res.data.shop.name
                document.querySelector('input[name=vipName]').value = (res.data.shop.belong)
                document.querySelector('input[name=information]').value = (res.data.shop.tel)
                document.querySelector('input[name=creater]').value = (res.data.order.creater)
                address_detail = res.data.order.address_detail
                shopID = res.data.order.shopid
                let send = Number(res.data.order.send)
                let btnIndex = 0
                if(send == 1){
                    btnIndex = 1
                }
                if(send == 2){
                    btnIndex = 0
                }
                getapi_token(res.data.shop.name)
                let btnArr = document.querySelector('.addressBtnWamp').querySelectorAll('.layui-btn')
                let xArr = [x1 , x2] = [...document.querySelectorAll('.xB')]
                btnArr.forEach(item => $(item).addClass("disabled"));
                $(btnArr[btnIndex]).removeClass('disabled')
                xArr.forEach(item => $(item).addClass('disNone'))
                xArr.forEach(item => item.querySelectorAll('input').forEach(el => el.setAttribute('lay-verify' , false)))
                $(xArr[btnIndex]).removeClass('disNone')
                xArr[btnIndex].querySelectorAll('input').forEach(el => el.setAttribute('lay-verify' , 'required'))
                res.data.goodsorder.forEach((item ,index) => {
                    let id = item.goods_id;
                    let product = {}
                    product.id = item.id
                    product.index = index + 1
                    product.serial = index + 1
                    product.number = item.goods_number // 货号
                    product.num = item.goods_count * 1 // 数量
                    product.oldtech = item.tech
                    product.changetech = item.goods_tech
                    $.get(`/api/productdetail?id=${id}&up=all` , res=>{
                        let result = JSON.parse(res)
                        product.eid = result.data.id
                        product.name = result.data.name
                        product.pid = result.data.pid
                        product.normtech =  result.data.tech.map(item => Object.assign({} , item))
                        let nromIDlist = result.data.norms.map(item => item.normIDs)
                        let normRules = item.normtypeID
                        let normTypeList = result.data.normTypeList
                        let newGuige = []
                        normTypeList.map(item => item.normType).forEach(item => newGuige.push(...item))
                        let RESULT = newGuige.filter(value => {
                            return normRules.indexOf(value.id.toString()) !== -1
                        })
                        let normtypeID = item.normtypeID.reduce((total , current) => total + (current * 1) , 0)
                        let normtype = []
                        let goods_ordernormids = item.goods_ordernormids === null ? "0" : item.goods_ordernormids
                        for (let i = 0 ;  i< normTypeList.length ; i++){
                            normtype.push(normtypeID[i])
                        }

                        nromIDlist.forEach((nromid , index) => {
                            let ids = (nromid + `,${goods_ordernormids}`).split(',').reduce((total , current) => total + (current * 1) , 0)
                            if(ids == normtypeID){
                                // 则获取 nid
                                product.normid = result.data.norms[index].id
                                product.normRules = result.data.norms[index].normRules
                            }
                        })
                        result.data.normsOrderList = result.data.normsOrderList.map(item =>{
                            // 数据重组 手动添加 为 不是guige 的数据
                            item['guige'] = "no"
                            return item
                        })
                        product.guige = RESULT.concat(result.data.normsOrderList) // 规格
                        product.normsOrderList = result.data.normsOrderList
                        let goods_normtype = item.goods_normtype.split(',').map(item =>{
                            let goods = item.split('(')
                            let sname = goods[0]
                            let value = goods[1].slice(0 , -1)
                            return {sname , value}
                        })
                        let namelist = goods_normtype.map(item => item.sname)
                        product.guige.forEach((guige , index) =>{
                            let g_name = guige.name
                            let g_index = namelist.indexOf(g_name)
                            if(g_index !== -1){
                                guige.value = goods_normtype[g_index].value
                            }else{
                                guige.value = ""
                            }
                        })
                        product.tech = result.data.tech
                        let techName = product.tech.map(item => item.name)
                        product.zb = ""
                        product.py = ""
                        product.pe = ""
                        item.goods_tech.forEach(t_item =>{
                            if(t_item.name == '主布'){
                                product.zb = t_item.value.split(":")[0]
                            }
                            if(t_item.name == '配一'){
                                product.py = t_item.value.split(':')[0]
                            }
                            if(t_item.name == '配二'){
                                product.pe = t_item.value.split(':')[0]
                            }

                            let index = techName.indexOf(t_item.name)
                            if(index != -1){
                                product.tech[index].value = t_item.value
                                product.oldtech[index].value = t_item.value
                            }
                        })
                        product.sale_price = item.sale_price
                        product.tp_price = item.tp_price
                        product.unit_price = item.unit_price
                        product.factoryPrice = item.gy_price
                        product.oemPrice = item.gytp_price
                        product.oid = result.data.normsOrderList.map(item => item.normType[0].id).join(',')
                        product.normTypelistName = result.data.normTypeList.map(norm => norm.name)
                        let oldTech = product.tech.map(tech => tech.value)
                        oldTechStorage.push(...oldTech)
                        all_data.push(product)
                    })
                })
                $.ajaxSettings.async = true;

            })
            // all_data.sort((a , b) => a.index -  b.index)
            all_data.forEach(product =>{
                construction(product , "add")
            })
            // construction(product , "add")

        }

        if(id){
            hasID()
        }else{
            document.querySelector('.shuaxin').style.display = 'none'
        }

      document.querySelector('.add').addEventListener('click' , function(e){
          let index = document.querySelector('.info-body').querySelectorAll('tr').length + 1
          let layer = ''
          layui.use('layer' , function () {
            layer = layui.layer
          })
          if(isShowClo){
            layer.msg("请将栏目切换为规格在新增")
            e.preventDefault()
            return
          }
          layer.open({
            title:"商品查询",
            type:2,
            area:['800px' , '600px'],
            content:`/admin/orderEnter?selectIndex=${index}&type=add&id=${id}&api_token=${api_token}`
          })
          e.preventDefault()
        })

        let isShowClo = false
        const deleteOrder = () =>{
          let e = window.event || arguments.callee.caller.arguments[0];
          let checkboxList = document.querySelectorAll('.labelPrint')
          checkboxList.forEach((el , index) =>{
            if(el.checked === true){
                if(id){
                    // 有 id 就传递
                    let data = {
                        api_token: api_token,
                        id:saveData[index].id
                    }
                    $.post('/api/business/orderGoodsDel' , data , res => {
                        if(res.status == 1){
                            el.parentNode.parentNode.parentNode.removeChild(el.parentNode.parentNode)
                            saveData[index] = ""
                            saveData = saveData.filter(item => item !== "")
                        }else{
                            layer.msg(res.msg)
                            return
                        }
                    })
                }else{
                    el.parentNode.parentNode.parentNode.removeChild(el.parentNode.parentNode)
                    saveData[index] = ""
                    saveData = saveData.filter(item => item !== "")
                }
            }
          })
            e.preventDefault()
        }
        const plprocess = el =>{
            if(id){
                if(el.dataset.name === 'zb' && el.value.length == 0){
                    return
                }
                let index = el.dataset.index
                let hasdata = saveData[index]
                let o_data = {
                    api_token,
                    id:hasdata.id
                }
                $.get(`/api/business/orderProcess` , o_data , res=>{
                    let tech_id = ""
                    let {supply , tech} = res.data;
                    let alls_t_data = [...supply , ...tech]
                    let t_index = alls_t_data.map(item => item.sname).indexOf(el.dataset.name)
                    tech_id = alls_t_data[t_index].tech_id.toString();
                    let data = {
                        api_token,
                        gytp_price:"0",
                        id:hasdata.id,
                        price:"",
                        prok:el.dataset.name,
                        prov:`${el.value}:${alls_t_data[t_index].yl}`,
                        tech_id
                    }
                    $.post('/api/business/orderProcess' , data , res=>{
                    })
                })
            }
        }



        const changeInputValue = el =>{
            let index = $(el).parents('tr').find('.index').html();
            let name =  el.dataset.name
            saveData[index-1][name] = $(el).val()
        }

        const changeNum = el =>{
          let index = $(el).parents('tr').find('.index').html(); // 获取下表
          let price = saveData[index - 1].sale_price / saveData[index - 1].num
          let unitPrice = saveData[index - 1].unit_price / saveData[index - 1].num
          let tpPrice = saveData[index - 1].tp_price / saveData[index - 1].num
          saveData[index - 1].num = $(el).parents['tr'].find('input[name=num]').val()
          saveData[index - 1].ps = $(el).parents('tr').find('input[name=ps]').val()
          saveData[index - 1].sale_price = price * 1 * $(el).val()
          saveData[index - 1].unit_price = unitPrice * 1 * $(el).val()
          saveData[index - 1].tp_price = tpPrice * 1 * $(el).val()
          // 算价格
          $('.sale_price').html(sum('sale_price'))
          $('.unit_price').html(sum('unit_price'))
          $('.tp_price').html(sum('tp_price'))
        }

        const changeTechValue = (el , data ,value) =>{
            let name = el.dataset.name;
            let index = data.tech.map(tech => tech.sname).indexOf(name)
            data.tech[index].value = value
        }

        const changeValue = (el , data , value) =>{
            let name = el.dataset.name;
            let index = data.guige.map(guige => guige.name).indexOf(name)
            data.guige[index].value = value
            // if(data.guige[index].guige === 'no'){
              data.guige[index].change = 'yes'
            // }

        }

        const changeColumn = () =>{
          let e = window.event || arguments.callee.caller.arguments[0];
          if(isShowClo){
              // 第一个 让规格展示
              document.querySelectorAll('.customized').forEach(el =>el.style.display = "none")
            document.querySelectorAll('.customizedTh').forEach(el =>el.style.display = "none")
            document.querySelectorAll('.guigeTh').forEach(el => el.style.removeProperty('display'))
            document.querySelectorAll('.guige').forEach(el => el.style.display = "flex")
            }else{
              document.querySelectorAll('.customized').forEach(el =>el.style.display = "flex")
            document.querySelectorAll('.customizedTh').forEach(el => el.style.removeProperty('display'))
            document.querySelectorAll('.guigeTh').forEach(el => el.style.display = "none")
            document.querySelectorAll('.guige').forEach(el => el.style.display = "none")
            }
            isShowClo =  !isShowClo
          e.preventDefault()
        }


      layui.use(['form' , 'layer'] , function(){
        let form = layui.form;
        let layer = layui.layer
        form.on('submit(save)' , function(el){
          saveDataArrange();
          let index = parent.layer.getFrameIndex(window.name);
          parent.layer.close(index)
          return false
        })
      })
      let isClick = true
      const saveDataArrange = () => {
        let orderData = {
          shop:"",
          _token:$("input[name=_token]").val(),
          people:"",
          address_detail:'',
          address:"",
          mobelphone:"",
          eid:"",
          nid:"",
          num:"",
          oid:"",
          vals:"",
          price:"", // 工艺差价
          shopid:"",
          up:"all",
          gytp_price:'',
          creater:"",
          prok:"",
          prov:"",
          sale_total_money:0
        }
        let oidArr = []
        orderData.shop = $('input[name=store]').val(); //门店
        if($.isEmptyObject(shopID)){
          layer.msg('请选择门店 在进行保存')
          return
        }
        orderData.shopid = shopID
        orderData.address_detail = $('input[name=address]').val()
        orderData.people = btnIndex ? $('input[name=vipName]').val() : $('input[name=name]').val(); // 姓名
        orderData.mobelphone = btnIndex ? $('input[name=information]').val(): $('input[name=phone]').val()// 手机
        orderData.eid = saveData.map(data => data.id).join(',') // 产品的id
        orderData.nid = saveData.map(data => data.nid).join(',') // 产品的 nid
        orderData.num = saveData.map(data => data.num).join(',') // 产品的数量 num
        // orderData.oid = // 订单规格
        orderData.address = $('input[name=province]').val(); // 地区
        orderData.sale_total_money = sum('sale_price')
        let valsArray = saveData.map((item , index) => {
          oidArr[index] = []
          return item.guige.map((guiGeItem , gIndex)  =>{
            if(guiGeItem.required == "0"){
              if(guiGeItem.guige === 'no'){
                if(guiGeItem.change ==='yes'){
                  oidArr[index][gIndex] = guiGeItem.normType[0].id
                  return guiGeItem.value
                }else{
                  oidArr[index][gIndex] = ""
                }
              }else{
                return guiGeItem.value
              }
            }else{
              if(guiGeItem.change === 'yes'){
                return guiGeItem.value
              }
            }
            // return guiGeItem.value
          }).filter(item => typeof item !== 'undefined')
        })
        let vals = ""
        valsArray.forEach(val => {
          vals += val.join(',')
          vals += "|"
        })
        orderData.vals = vals.slice(0 , -1);
        orderData.price =  saveData.map(data => data.factoryPrice).join(',') // 工艺差价
        orderData.gytp_price = saveData.map(data => data.oemPrice).join(',')
        let changeProcess = []
        let count = -1
        saveData.forEach(item =>{
          let data = item.tech.filter(tech =>{
            count++
            return oldTechStorage[count] !== tech.value
          })
          if(item.pe){
            data.unshift({sname:"pe" , value:`${item.pe}:0`})
          }
          if(item.py){
            data.unshift({sname:"py" , value:`${item.py}:0`})
          }
          if(item.zb){
            data.unshift({sname:"zb" , value:`${item.zb}:0`})
          }
          changeProcess.push(data)
        })
        let prokStr = ""
        let provStr = ""
        changeProcess.forEach((processList,index) =>{
          prokStr += processList.map(process => process.sname).join(',')
          provStr += processList.map(process => process.value).join(',')
          prokStr +="|"
          provStr += '|'
        })

        orderData.prov = provStr.slice(0 , -1)
        orderData.prok = prokStr.slice(0 , -1)
        orderData.creater = $('input[name=creater]').val()
        let oidVal = ''
        oidArr = oidArr.map(oid => oid.filter(item => item !== null && item !== undefined && item !== '' && item.toString().length > 0 ))
        // oidArr = oidArr.map(oid => oid.filter(item => item.toString().length > 0))
        oidArr.forEach(oid =>{
          oidVal += `${oid.join(',')}|`
        })
        orderData.oid = oidVal.slice(0 , -1)
              // 新建订单
              $.post("/home/order", orderData, function (res) {
                  //发异步，把数据提交给php
                  layer.msg(res.msg)
              }, "json");
      }

        function search(){
          document.querySelectorAll('.search').forEach((el , index) =>{
            el.addEventListener('click' , function () {
              let layer = ''
              layui.use('layer' , function () {
                layer = layui.layer
              })
              layer.open({
                title:"商品查询",
                type:2,
                area:['800px' , '600px'],
                content:`/admin/orderEnter?selectIndex=${index + 1}&type=change&api_token=${api_token}`
              })
            })
          })
        }

      function freight(address) {
        return
      }

      // 点确认 获取value 到地址
      $('.confirm').click(() => {
        add_city()
      })

      document.querySelector('.store').addEventListener('click' , function(){
        let layer = ''
        layui.use('layer' , function () {
            layer = layui.layer
        })
        layer.open({
          title:"门店查询",
          type:2,
          area:['800px' , '600px'],
          content:"/admin/orderClient"
        })
      })

      function father (data , shopId , token){
        document.querySelector('.store').querySelector('input').value = data
        shopID = shopId;
        api_token = token
      }

      function selectFather (data  ,index , type , f_id){
          if(f_id !== "null"){
              // 如果有id
              let s_data = {
                  api_token: api_token,
                  eid:data.eid,
                  id:id,
                  nid:data.nid,
                  num:"1"
              }
              $.post("/api/business/orderAdd",s_data , res => {
                  layer.msg(res.msg)
                if(res.msg.indexOf('成功') !== -1){
                    // 表示成功
                    saveData = []
                    hasID()
                }
              })
          }else{
              let product = {}
              // 根据 产品 ID 来进行 访问 productdetail 产品详情页
              product.id = data.eid
              $.get(`/api/productdetail?id=${product.id}` , res =>{
                  let result = JSON.parse(res)
                  product.index = index
                  product.serial = index
                  product.nid = data.nid // norms的货号规格的id
                  product.name = result.data.name;
                  product.number = data.number; // 货号
                  //根据 nid 来获取规格
                  let normIndex = result.data.norms.map(norm => norm.id.toString()).indexOf(data.nid.toString())
                  let norm = result.data.norms[normIndex]
                  let normRules = norm.normIDs.split(',')
                  let normTypeList = result.data.normTypeList
                  let newGuige = []
                  normTypeList.map(item => item.normType).forEach(item => newGuige.push(...item))
                  let RESULT = newGuige.filter(value => {
                      return normRules.indexOf(value.id.toString()) !== -1
                  })
                  result.data.normsOrderList = result.data.normsOrderList.map(item =>{
                      // 数据重组 手动添加 为 不是guige 的数据
                      item['guige'] = "no"
                      return item
                  })
                  product.guige = RESULT.concat(result.data.normsOrderList) // 规格
                  product.tech = result.data.tech; // 配料
                  product.sale_price = data.sale_price // 销售价
                  product.tp_price = norm.tp_price // 贴牌价
                  product.num = 1;//默认数量为1
                  product.zb = ""
                  product.py = ""
                  product.pe = ""
                  product.unit_price = norm.unit_price // 出厂价
                  product.factoryPrice = "" ; // 出厂差价
                  product.oemPrice = "" // 贴牌差价
                  product.oid = result.data.normsOrderList.map(item => item.normType[0].id).join(',')
                  // assembly(product , type)
                  product.normTypelistName = result.data.normTypeList.map(norm => norm.name)
                  let oldTech = result.data.tech.map(tech => tech.value)
                  oldTechStorage.push(...oldTech)
                  construction(product , type)
              })
          }


      }
      let btnArr = [btn1 , btn2] = [...document.querySelector('.addressBtnWamp').querySelectorAll('.layui-btn')];
      let xArr = [x1 , x2] = [...document.querySelectorAll('.xB')]
      let btnIndex = 0; // 默认是1
      let classStr = 'disabled'
      let xClassStr = 'disNone'
      let storeInput = document.querySelector('input[name=store]')
      btnArr.forEach((el , index) =>{
        el.addEventListener('click' , (e) =>{
          btnIndex = index
          if(btnIndex === 0){
            btn1.classList.remove(classStr)
            btn2.classList.add(classStr)
            x1.classList.remove(xClassStr)
            x2.classList.add(xClassStr)
            sends = '0'
            changeSend()
            storeInput.setAttribute('lay-verify' , false)
          }
          if(btnIndex === 1){
            btn2.classList.remove(classStr)
            btn1.classList.add(classStr)
            x2.classList.remove(xClassStr)
            x1.classList.add(xClassStr)
            storeInput.setAttribute('lay-verify' , 'required')
            sends = '1'
            changeSend()
            document.querySelectorAll('.x1Input').forEach(el => el.setAttribute('lay-verify' , false));
          }
          e.preventDefault()
        })
      })

      function add_city() {
        $('#add-city').val($('#picker5')[0].innerText.replace(/ /g,","))
        $('#picker5')[0].innerText = ''
      }

      function getAddress(event) { //获取地址
        event = event || window.event //兼容
        var code = event.keyCode || event.which || event.charCode;
        if (code === 13) {
          // $("#demo1").val("");
          $("#add-city").val("");
          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);
                      $("#add-city").val(cityValue);
                    }
                  })
                }
              })
            }
          })
          if (flag && flag2 && flag3) {
            layer.msg('匹配成功')
          } else {
            layer.msg('匹配失败')
          }
        }
      }
    </script>
@endsection