@extends('layouts.father')
@section('title', '订单详情')
@section('style')
    <style>
        .twenty{
            width:200px
        }
    </style>
@endsection
@section('body')
    {{csrf_field()}}
    <div class="x-body">
        <form class="layui-form">
            <div style="display: flex;width: 100%">
                <div style="width: 50%">
                    <div class="layui-form-item">
                        <label class="layui-form-label">客户:</label>
                        <div class="layui-input-block twenty">
                            <select lay-filter="custom" class="custom">
                                <option value="">请选择</option>
                                @foreach($business as $b)
                                    <option value="{{$b}}">{{$b}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">订单类型:</label>
                        <div class="layui-input-block twenty">
                            <select name="contract_status" class="types" lay-filter="types">
                                <option value="0">整匹订单</option>
                                <option value="1">零裁订单</option>
                            </select>
                        </div>
                    </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>

            <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-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>匹数</th>
                        <th>数量</th>
                        <th>规格</th>
                        <th>备注</th>
                        <th>出厂价</th>
                        <th>零售价</th>
                        <th>拣货</th>
                    </tr>
                </thead>
                <tbody class="info"></tbody>
            </table>
            </div>
        </form>
    </div>
    <script>
        let params = new URLSearchParams(window.location.search)
        let custom = ""; // 客户
        let order_type = ""; // 订单类型
        let api_token = ""; // 门店的 token
        let shopID = ""; // 门店的id
        let saveData = []; // 保存的数据
        let oldTechStorage = []
        let id = params.get('id');
        let order_types = "0"; // 默认 整匹订单
        let people = ""
        let mobelphone = ''
        let address_detail = ""
        // 下拉选择
        layui.use(['form'] , () =>{
            let form = layui.form;
            form.on('select(custom)' , res=>{
                // 客户的下拉
                custom = res.value
                $.get(`/admin/getMendianId?shop=${custom}` , res=>{
                    api_token = res.data.api_token;
                    shopID = res.data.shopid
                })
            })
            form.on('checkbox(jh)' , res=>{
                if(id.length <= 0){
                    return
                }
                if(res.elem.checked){
                    res.elem.checked = false
                }else{
                    let index = res.elem.dataset.index
                    let id = saveData[index].id
                    $.get(`/admin/backSign?id=${id}`, res=>{
                        console.log(res)
                    })
                }
                form.render()
            })
            form.on('select(types)' , res=>{
                order_types = res.value
                let horsepowerList = $('.horsepower')
                let numList = $('.num')
                // 0 代表 => 整匹订单 => 匹数需要填写 数量不能填写
                // 1 代表 => 零裁订单 => 匹数不能填写 数量填写
                if(order_types == 1){
                    [...horsepowerList].forEach((item , index) => {
                        item.querySelector('input').classList.add('layui-disabled')
                        item.querySelector('input').setAttribute('disabled' , true)
                        item.querySelector('input').value = 0
                    });

                    [...numList].forEach((item , index) =>{
                        item.querySelector('input').classList.remove('layui-disabled')
                        item.querySelector('input').removeAttribute('disabled')
                        item.querySelector('input').value = 1
                    })
                    saveData.forEach(item => {
                        item.ps = 0
                        item.num = 1
                    })
                }else{
                    [...horsepowerList].forEach((item , index) =>{
                        item.querySelector('input').classList.remove('layui-disabled')
                        item.querySelector('input').removeAttribute('disabled')
                        item.querySelector('input').value = 1
                    });
                    [...numList].forEach((item , index) =>{
                        item.querySelector('input').classList.add('layui-disabled')
                        item.querySelector('input').setAttribute('disabled' , true)
                        item.querySelector('input').value = 0
                    })
                    saveData.forEach(item => {
                        item.ps = 1
                        item.num = 0
                    })
                }
                form.render()
            })

            // 保存
            form.on('submit(save)' , res =>{
                saveDataArrange()
                return false
            })

        })

        function getapi_token(store){
            $.get(`/admin/getMendianId?shop=${store}` , function(res){
                api_token = res.data.api_token
            })
        }

        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=>{
                people = res.data.shop.people
                $('.custom').val(res.data.shop.name)
                mobelphone = res.data.order.mobelphone
                address_detail = res.data.order.address_detail
                shopID = res.data.order.shopid
                getapi_token(res.data.shop.name)
                order_type = res.data.order.other_type
                order_types = order_type == "零裁订单"?'1':'0'
                $('.types').val(order_types)
                $('.types').addClass('layui-disabled')
                $('.types').attr('disabled' , 'disabled')
                res.data.goodsorder.forEach((item ,index) => {
                    let wamp_item = item
                    let id = item.goods_id;
                    let product = {}
                    product.sign = item.sign
                    product.id = item.id
                    product.mx_remark = item.mx_remark
                    product.index = index + 1
                    product.serial = index + 1
                    product.number = item.goods_number // 货号
                    product.num = item.goods_count == 0.001 ? 0 : item.goods_count * 1 // 数量
                    product.oldtech = item.tech
                    product.changetech = item.goods_tech
                    product.ps = item.ps ? item.ps : order_types == '0' ? 1 : 0
                    $.get(`/api/productdetail?id=${id}&up=all` , res=>{
                        let result = JSON.parse(res)
                        product.eid = result.data.id
                        product.xh = result.data.xh
                        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){
                                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 , i_index) =>{
                            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 =>{
                layout(product , "add")
            })
        }

        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).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'))
        }

        function changeaddress(number){
            let e = window.event || arguments.callee.caller.arguments[0];
            // address_detail = address_detail;

            let prokArr = []
            let provArr = []
            saveData.forEach(item =>{
                let key = []
                let value = []
                item.normtech&&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(','))
            })
            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()
        }


        const deleteOrder = () =>{
            let e = window.event || arguments.callee.caller.arguments[0];
            let checkboxList = document.querySelectorAll('.labelPrint2')
            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 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,
                ps:"",
                mx_remark:"",
                other_type:""
            }
            let oidArr = []
            orderData.shop = custom //门店
            if($.isEmptyObject(shopID)){
                layer.msg('请选择门店 在进行保存')
                return
            }
            orderData.shopid = shopID
            orderData.address_detail = ""
            orderData.people =custom
            orderData.mobelphone = ""
            orderData.other_type = order_types
            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).map(num=> {
                if(num == 0){
                    num  = 0.001
                }
                return num
            }).join(',') // 产品的数量 num
            // orderData.oid = // 订单规格
            orderData.address = ""; // 地区
            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{
                            if(guiGeItem.rule_id){
                                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);

            let psList = [...$('input[name=ps]')].map(item => item.value)
            orderData.ps = psList.join("|")
            let bzList = [...$('.remark')].map(item => item.value)
            orderData.mx_remark = bzList.join("|")
            $.post("/home/order", orderData, function (res) {
                //发异步，把数据提交给php
                layer.msg(res.msg)
            }, "json");
        }
        // 求和
        const sum = priceKey =>{
            let sumPrice = 0
            saveData.forEach(data =>sumPrice += (data[priceKey] * 1))
            return sumPrice.toFixed(2)
        }

        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'
            // }

        }

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


        // td 查询
        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}`
                    })
                })
            })
        }
        // 新增一行的方法
        document.querySelector('.add').addEventListener('click' , (e) =>{
            let index = document.querySelector('.info').querySelectorAll('tr').length + 1;
            layer.open({
                title:"门店查询",
                type:2,
                area:['800px' , '600px'],
                content:`/admin/orderEnter?selectIndex=${index}&type=add&api_token=${api_token}&id=${id}`
            })
            e.preventDefault()
        })

        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:order_types == 0 ? 0.001:1
                }
                $.post("/api/business/orderAdd",s_data , res => {
                    layer.msg(res.msg)
                    if(res.msg.indexOf('成功') !== -1){
                        // 表示成功
                        saveData = []
                        hasID()
                    }
                })
            }else {
                let product = {}
                product.id = data.eid
                $.get(`/api/productdetail?id=${product.id}&up=all`, 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; // 货号
                    product.xh = result.data.xh
                    product.sign = null
                    //根据 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.mx_remark = ""
                    if (Number(order_types) === 0) {
                        product.ps = 1
                        product.num = 0
                    } else {
                        product.ps = 0
                        product.num = 1
                    }
                    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)
                    layout(product, 'add')

                })
            }
        }


        function layout(data , type){
            // 布局的函数
            let index = data.index - 1
            if(type === 'add'){
                saveData.push(data)
            }else{
                saveData[index] = data
            }

            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 labelPrint2"  name="" id=""></td>`
                url += `<td class="index">${index+1}</td>`
                url += `<td class="search">${data.name}</td>`
                url += `<td class="xh">${data.xh}</td>`
                url += `<td class="numbebr">${data.number}</td>`
                if(order_types === '0'){
                    url += `<td class="horsepower">
                            <div><input type="text" data-index="${data.index}" name="ps" class="layui-input" value="${data.ps}" onblur="ggprocess(this)" ></div>
                        </td>`
                    url += `<td class="num" style="width:100px">
                       <div><input type="text" name="num"  lay-verify="required" disabled autocomplete="off" data-index="${data.index}" class="layui-input layui-disabled" value="${data.num}" onblur="ggprocess(this)" onchange="changeNum(this)"></div>
                    </td>`
                }else{
                    url += `<td class="horsepower">
                            <div><input type="text" data-index="${data.index}" name="ps" class="layui-input layui-disabled" disabled value="${data.ps}" onblur="ggprocess(this)" onchange="changeNum(this)"></div>
                        </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 && 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 &&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;display: none">
                    <div> <input type="hidden" 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;display: none">
                    <div> <input type="hidden" 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;display: none">
                    <div> <input type="hidden" 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; display:none;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}" class="" data-name="oemPrice" value="${data.oemPrice}" onblur="plprice(this)" onchange="changeInputValue(this)"  autocomplete="off" class="layui-input"></div>
                    </td>`
                url += `<td>
                        <div><input type="text" class="layui-input remark" data-index="${data.index}" data-name="mx_remark" value="${data.mx_remark}" onclick="ggprocess(this)"></div>
                    </td>`
                url += `<td class="price">${data.unit_price}</td>` // 出厂价
                url += `<td>${data.sale_price}</td>` // 零售价
                if(data.sign === null || data.sign === '未拣货'){
                    url += `<td class="jh">
                           <input type="checkbox" data-index="${index}"   lay-skin="primary" lay-filter="jh" class="labelPrint" >
                        </td>`
                }else{
                    url += `<td class="jh">
                           <input type="checkbox" data-index="${index}"  checked lay-skin="primary" lay-filter="jh" class="labelPrint" >
                        </td>`
                }

                url += `</tr>`
            })
            const tbody = document.querySelector('.info')
            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 = Number(hasdata.num) === 0 ?0.001: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 = $(el).parents('tr').find('input[name=num]').val()
                let num = hasdata.num == 0 ? 0.001 : hasdata.num
                let ps = $(el).parents('tr').find('input[name=ps]').val()
                let mx_remark = hasdata.mx_remark
                // 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,
                    ps,
                    mx_remark,
                    vals,
                }
                $.post('/api/business/orderDetailEdit' , data , res=>{
                    layer.close(load_index)
                    layer.msg(res.msg)
                })
            }

        }
    </script>
@endsection