<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table</title>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-beta2/css/bootstrap-grid.css" rel="stylesheet">
    <style type="text/css">
        #test th{
            position: sticky;
            position: -webkit-sticky;
            top: 0;
            z-index:999;
            background-color: white;
        }
    </style>
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body onload="a()">
<button></button>
<table id="table" cellspacing="0" cellpadding="2" width="100%" border="1">
    <tr id="test" style="white-space: nowrap !important;">
        <th >用户编号</th>
        <th>试用时间</th>
        <th>转正时间</th>
        <th>生日时间</th>
        <th>民族</th>
        <th>身高</th>
    </tr>
    <tr>
        <td style="overflow-x: hidden">200004512312312321321</td>
        <td><div>2001-2-15</div></td>
        <td><div>2001-2-15</div></td>
        <td>1978-8-5</td>
        <td>汉</td>
        <td>162</td>
    </tr>
</table>
<div class="modal fade" tabindex="-1" role="dialog" id="auditOrRecover">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="row" v-if="showAuditPiece.C">
                    <label class="col-1 text-right h4"><span class="badge badge-success">新增</span></label>
                    <label class="col-1 h3 text-success" style="bottom: 0.25rem">
                        <span class="fa fa-long-arrow-right"></span>
                    </label>
                    <div class="col-10 border-bottom border-success">
                        <div v-if="selectedAudit=='storage'" v-for="s in auditList.storage.C">
                            <div><b>@{{ s.name }}</b><span class="text-muted">(@{{ s.counting_type }}-@{{ s.using_type }})</span></div>
                        </div>
                        <div v-if="selectedAudit=='operation'" v-for="s in auditList.operation.C">
                            <div><b>@{{ s.name }}</b><span class="text-muted">(@{{ s.operation_type }}-@{{ s.strategy }})</span></div>
                        </div>
                        <div v-if="selectedAudit=='express'" v-for="s in auditList.express.C">
                            <div><b>@{{ s.name }}</b></div>
                        </div>
                        <div v-if="selectedAudit=='logistic'" v-for="s in auditList.logistic.C">
                            <div><b>@{{ s.name }}</b></div>
                        </div>
                        <div v-if="selectedAudit=='directLogistic'" v-for="s in auditList.directLogistic.C">
                            <div><b>@{{ s.name }}</b><span class="text-muted">(起步：@{{ s.base_km }}KM)</span></div>
                        </div>
                        <div v-if="selectedAudit=='system'">
                            <div>使用费：￥<b>@{{ auditList.system.C.usage_fee }}</b></div>
                        </div>
                    </div>
                </div>
                <div class="row" v-if="showAuditPiece.D">
                    <label class="col-1 text-right h4"><span class="badge badge-danger">删除</span></label>
                    <label class="col-1 h3 text-danger" style="bottom: 0.25rem">
                        <span class="fa fa-long-arrow-right"></span>
                    </label>
                    <div class="col-10 border-bottom border-danger">
                        <div v-if="selectedAudit=='storage'" v-for="s in auditList.storage.D">
                            <table class="table table-sm">
                                <tr class="text-center">
                                    <th>名称</th>
                                    <th>计费类型</th>
                                    <th>用仓类型</th>
                                    <th>最低起租面积</th>
                                    <th>减免类型</th>
                                    <th>减免值</th>
                                    <th>单位</th>
                                    <th>计时单位</th>
                                    <th>数量-单价</th>
                                    <th>税率</th>
                                </tr>
                                <tr>
                                    <td>@{{ s.name }}</td>
                                    <td>@{{ s.counting_type }}</td>
                                    <td>@{{ s.using_type }}</td>
                                    <td>@{{ s.minimum_area }}</td>
                                    <td>@{{ s.discount_type }}</td>
                                    <td>@{{ s.discount_value }}</td>
                                    <td>@{{ s.unit_id }}</td>
                                    <td>@{{ s.time_unit_id }}</td>
                                    <td>
                                        <div class="float-left small">
                                            <span v-for="(a,i) in s.amount_interval" v-if="i!=s.amount_interval.length-1">@{{ a }}-@{{ s.amount_interval[i+1] }}（@{{ s.price[i] }}元）<br></span>
                                            <span>@{{ s.amount_interval[s.amount_interval.length-1] }}&nbsp;+（@{{ s.price[s.amount_interval.length-1] }}元）<br></span>
                                        </div>
                                    </td>
                                    <td>@{{ s.tax_rate_id }}</td>
                                </tr>
                            </table>
                        </div>
                        <div v-if="selectedAudit=='operation'" v-for="s in auditList.operation.D">
                            <table class="table table-sm">
                                <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>
                                    <th>税率</th>
                                </tr>
                                <tr>
                                    <td>@{{ s.name }}</td>
                                    <td>@{{ s.operation_type }}</td>
                                    <td>@{{ s.strategy }}</td>
                                    <td>@{{ s.feature }}</td>
                                    <td>@{{ s.total_price }}</td>
                                    <td>
                                        <div class="float-left small">
                                            <span v-for="(a,i) in s.total_discount_price">@{{ a }}元<br></span>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="float-left small">
                                            <span v-for="(a,i) in s.discount_count" v-if="i!=s.discount_count.length-1">@{{ a }}-@{{ s.discount_count[i+1] }}<br></span>
                                            <span>@{{ s.discount_count[s.discount_count.length-1] }}&nbsp;+<br></span>
                                        </div>
                                    </td>
                                    <td>@{{ s.type_mark }}</td>
                                    <td>@{{ s.surcharge }}</td>
                                    <td>@{{ s.surcharge_unit_id }}</td>
                                    <td>@{{ s.max_fee }}</td>
                                    <td>@{{ s.remark }}</td>
                                    <td>@{{ s.tax_rate_id }}</td>
                                </tr>
                            </table>
                        </div>
                        <div v-if="selectedAudit=='express'" v-for="s in auditList.express.D">
                            <table class="table table-sm">
                                <tr>
                                    <th>名称</th>
                                    <th>首重</th>
                                    <th>续重</th>
                                    <th>数量-重量</th>
                                    <th>税率</th>
                                </tr>
                                <tr>
                                    <td>@{{ s.name }}</td>
                                    <td>@{{ s.initial_weight }}</td>
                                    <td>@{{ s.additional_weight }}</td>
                                    <td>
                                        <span v-for="(a,i) in s.amount_interval" v-if="i!=s.amount_interval.length-1">@{{ a }}-@{{ s.amount_interval[i+1] }}/单（
                                            <span v-for="(w,j) in s.weight_interval[i]" v-if="j!=s.weight_interval[i].length">@{{ w }}-@{{ s.weight_interval[i][j+1] }}/KG,</span>
                                            @{{ s.weight_interval[i][s.weight_interval[i].length-1] }}&nbsp;+/KG）<br></span>
                                        <span>@{{ s.amount_interval[s.amount_interval.length-1] }}&nbsp;+/单（
                                            <span v-for="(w,j) in s.weight_interval[s.amount_interval.length-1]" v-if="j!=s.weight_interval[s.amount_interval.length-1].length">@{{ w }}-@{{ s.weight_interval[s.amount_interval.length-1][j+1] }}/KG,</span>
                                            @{{ s.weight_interval[s.amount_interval.length-1][s.weight_interval[s.amount_interval.length-1].length-1] }}&nbsp;+/KG）<br></span>
                                    </td>
                                    <td>@{{ s.tax_rate_id }}</td>
                                </tr>
                            </table>
                        </div>
                        <div v-if="selectedAudit=='logistic'" v-for="s in auditList.logistic.D">
                            <table class="table table-sm">
                                <tr>
                                    <th>名称</th>
                                    <th>单位一</th>
                                    <th>单位一区间</th>
                                    <th>单位二</th>
                                    <th>单位二区间</th>
                                    <th>提货费</th>
                                    <th>燃油附加费</th>
                                    <th>服务费</th>
                                    <th>税率</th>
                                </tr>
                                <tr>
                                    <td>@{{ s.name }}</td>
                                    <td>@{{ s.unit_id }}</td>
                                    <td>
                                        <span class="small" v-for="u in s.unit_range">@{{ u }}<br></span>
                                    </td>
                                    <td>@{{ s.other_unit_id }}</td>
                                    <td>
                                        <span class="small" v-for="u in s.other_unit_range">@{{ u }}<br></span>
                                    </td>
                                    <td>@{{ s.pick_up_price }}</td>
                                    <td>@{{ s.fuel_price }}</td>
                                    <td>@{{ s.service_price }}</td>
                                    <td>@{{ s.tax_rate_id }}</td>
                                </tr>
                            </table>
                        </div>
                        <div v-if="selectedAudit=='directLogistic'" v-for="s in auditList.directLogistic.D">
                            <table class="table table-sm">
                                <tr>
                                    <th>名称</th>
                                    <th>起步公里数</th>
                                    <th>税率</th>
                                </tr>
                                <tr>
                                    <td>@{{ s.name }}</td>
                                    <td>@{{ s.base_km }}</td>
                                    <td>@{{ s.tax_rate_id }}</td>
                                </tr>
                            </table>
                        </div>
                        <div v-if="selectedAudit=='system'">
                            <div>使用费：<b>@{{ auditList.system.D.usage_fee }}</b></div>
                        </div>
                    </div>
                </div>
                <div class="row" v-if="showAuditPiece.U">
                    <label class="col-1 text-right h4"><span class="badge badge-primary">修改</span></label>
                    <label class="col-1 h3 text-primary" style="bottom: 0.25rem">
                        <span class="fa fa-long-arrow-right"></span>
                    </label>
                    <div class="col-10">
                        <div v-if="selectedAudit=='storage'" v-for="s in auditList.storage.U">
                            <table class="table table-sm">
                                <tr>
                                    <th v-for="(val,key) in auditList.mapping.storage">@{{ val }}</th>
                                </tr>
                                <tr>
                                    <td v-for="(val,key) in auditList.mapping.storage" v-html="s[key]"></td>
                                </tr>
                            </table>
                        </div>
                        <div v-if="selectedAudit=='operation'" v-for="s in auditList.operation.U">
                            <table class="table table-sm">
                                <tr>
                                    <th v-for="(val,key) in auditList.mapping.operation" v-if="key!='child'">@{{ val }}</th>
                                    <th v-if="s.items.length>0" class="text-center">子项</th>
                                </tr>
                                <tr>
                                    <td v-for="(val,key) in auditList.mapping.operation" v-if="key!='child'" v-html="s[key]"></td>
                                    <td v-if="s.items.length>0">
                                        <table class="table table-sm">
                                            <tr><th v-for="(val,key) in auditList.mapping.operation.child">@{{ val }}</th></tr>
                                            <tr v-for="item in s.items">
                                                <td v-for="(val,key) in auditList.mapping.operation.child" v-html="item[key]"></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div v-if="selectedAudit=='express'" v-for="s in auditList.express.U">
                            <table class="table table-sm">
                                <tr>
                                    <th v-for="(val,key) in auditList.mapping.express" v-if="key!='child'">@{{ val }}</th>
                                    <th v-if="s.details.length>0" class="text-center">子项</th>
                                </tr>
                                <tr>
                                    <td v-for="(val,key) in auditList.mapping.express" v-if="key!='child'" v-html="s[key]"></td>
                                    <td v-if="s.details.length>0">
                                        <table class="table table-sm">
                                            <tr><th v-for="(val,key) in auditList.mapping.express.child">@{{ val }}</th></tr>
                                            <tr v-for="item in s.details">
                                                <td v-for="(val,key) in auditList.mapping.express.child" v-html="item[key]"></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div v-if="selectedAudit=='logistic'" v-for="s in auditList.logistic.U">
                            <table class="table table-sm">
                                <tr>
                                    <th v-for="(val,key) in auditList.mapping.logistic" v-if="key!='child'">@{{ val }}</th>
                                    <th v-if="s.details.length>0" class="text-center">子项</th>
                                </tr>
                                <tr>
                                    <td v-for="(val,key) in auditList.mapping.logistic" v-if="key!='child'" v-html="s[key]"></td>
                                    <td v-if="s.details.length>0">
                                        <table class="table table-sm">
                                            <tr><th v-for="(val,key) in auditList.mapping.logistic.child">@{{ val }}</th></tr>
                                            <tr v-for="item in s.details">
                                                <td v-for="(val,key) in auditList.mapping.logistic.child" v-html="item[key]"></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div v-if="selectedAudit=='directLogistic'" v-for="s in auditList.directLogistic.U">
                            <table class="table table-sm">
                                <tr>
                                    <th v-for="(val,key) in auditList.mapping.directLogistic" v-if="key!='child'">@{{ val }}</th>
                                    <th v-if="s.details.length>0" class="text-center">子项</th>
                                </tr>
                                <tr>
                                    <td v-for="(val,key) in auditList.mapping.directLogistic" v-if="key!='child'" v-html="s[key]"></td>
                                    <td v-if="s.details.length>0">
                                        <table class="table table-sm">
                                            <tr><th v-for="(val,key) in auditList.mapping.directLogistic.child">@{{ val }}</th></tr>
                                            <tr v-for="item in s.details">
                                                <td v-for="(val,key) in auditList.mapping.directLogistic.child" v-html="item[key]"></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div v-if="selectedAudit=='system'">
                            <div v-if="auditList.system.H.usage_fee!=auditList.system.U.usage_fee">
                                <div class="float-left">使用费：</div>
                                <div class="float-left small text-secondary mt-1">@{{ auditList.system.H.usage_fee }}</div>
                                <div class="float-left mt-1 mr-4">
                                    <span class="float-left fa fa-arrow-right text-info ml-2 mr-2"></span>
                                    <div class="float-left small text-primary font-weight-bold">@{{ auditList.system.U.usage_fee }}</div>
                                </div>
                            </div>
                            <div v-if="auditList.system.H.tax_rate_id!=auditList.system.U.tax_rate_id">
                                <div class="float-left">税率：</div>
                                <div class="float-left small text-secondary mt-1">@{{ auditList.system.H.tax_rate_id }}</div>
                                <div class="float-left mt-1">
                                    <span class="float-left fa fa-arrow-right text-info ml-2 mr-2"></span>
                                    <div class="float-left small text-primary font-weight-bold">@{{ auditList.system.U.tax_rate_id }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">

            </div>
        </div>
    </div>

</div>
<div id="app">

</div>
<script type="text/javascript" src="{{mix("js/app.js")}}"></script>
<script type="text/javascript">
    function a(){
        let url = "{{url('maintenance/priceModel/getPriceModelAudit')}}";
        let type = 'directLogistic';
        window.tempTip.postBasicRequest(url,{type:type,"owner_id":86},res=>{
            console.log(res);
        });
        return;
        //$("#auditOrRecover").modal("show");
        let video = document.createElement("video");
        let canvas = document.createElement("canvas");
        let arr=["{{asset("1.mp4")}}"];
        let result = [];
        arr.forEach(url=>{
            video.setAttribute('src',url);
            document.getElementById("app").appendChild(video);
            canvas.style.width = video.clientWidth+"px";
            canvas.style.height = video.clientHeight+"px";
            document.getElementById("app").appendChild(canvas);
            canvas.getContext("2d").drawImage(video,0,0,canvas.width,canvas.height);
            result.push(canvas.toDataURL("image/png"));
        });
        console.log(result)
    }

    new Vue({
        el:"#auditOrRecover",
        data:{
            auditList:{
                storage:{
                    "C":[{name:"笕尚退货",counting_type:"包仓",using_type:"恒温"},{name:"笕尚退货",counting_type:"包仓",using_type:"恒温"}],
                    "U":[{name:"笕尚退货",counting_type:"包仓",using_type:"恒温",
                        minimum_area:"200",price:["0.2"],discount_type:"无减免",target_id:"10",
                        discount_value:"20",unit_id:"1",time_unit_id:"2",tax_rate_id:"1",amount_interval:["2"]}],
                    "D":[{name:"笕尚退货",counting_type:"包仓",using_type:"恒温",
                        minimum_area:"200",price:["0.2","0.1"],discount_type:"无减免",
                        discount_value:"20",unit_id:"m²",time_unit_id:"日",tax_rate_id:"3",amount_interval:["2","5"]}],
                    "H":{10:{name:"笕尚退货",counting_type:"包仓",using_type:"恒温",
                            minimum_area:"200",price:["0.1","0.2"],discount_type:"无减免",
                            discount_value:"20",unit_id:"2",time_unit_id:"1",tax_rate_id:"2",amount_interval:["2","5"]}},
                },
                operation:{
                    "C":[{name:"笕尚入库",operation_type:"入库",strategy:"特征"},{name:"笕尚入库",operation_type:"入库",strategy:"特征"}],
                    "D":[{name:"笕尚入库",operation_type:"入库",strategy:"特征",
                        feature:"特征X",remark:"x",discount_count:[1,2],total_price:"222",total_discount_price:[1,2,3,4]
                        ,type_mark:"退货单",surcharge:"58",surcharge_unit_id:"米",max_fee:"777",tax_rate_id:"5%"}],
                    "U":[{name:"笕尚入库",operation_type:"入库",strategy:"特征",
                        feature:"特征X",remark:"x",discount_count:[1,2],total_price:"222",total_discount_price:[1,2,3,4]
                        ,type_mark:"退货单",surcharge:"58",surcharge_unit_id:"米",max_fee:"777",tax_rate_id:"5%",target_id:"10",
                        items:[{id:"2",owner_price_operation_id:"5",strategy:"默认",amount:"21",unit_id:"8",unit_price:"9",feature:"11",priority:"0",discount_price:[5,6,7],odd_price:"5"},
                            {id:"5",owner_price_operation_id:"5",strategy:"特征",amount:"22",unit_id:"8",unit_price:"9",feature:"13",priority:"0",discount_price:[5,6,7],odd_price:"5"},]}],
                    "H":{10:{name:"笕尚入库1",operation_type:"入库",strategy:"特征",
                        feature:"特征X",remark:"x",discount_count:[1,2,5],total_price:"222",total_discount_price:[1,2,4]
                        ,type_mark:"退货单",surcharge:"58",surcharge_unit_id:"T",max_fee:"7771",tax_rate_id:"3%",
                        items:[{id:"1",owner_price_operation_id:"5",strategy:"默认",amount:"21",unit_id:"8",unit_price:"9",feature:"11",priority:"0",discount_price:[5,6,7],odd_price:"5"},
                            {id:"3",owner_price_operation_id:"5",strategy:"起步",amount:"21",unit_id:"8",unit_price:"9",feature:"11",priority:"0",discount_price:[5,6,7],odd_price:"5"},
                            {id:"4",owner_price_operation_id:"5",strategy:"特征",amount:"21",unit_id:"8",unit_price:"9",feature:"11",priority:"0",discount_price:[5,6,7],odd_price:"5"},
                        ]}},
                },
                express:{
                    "C":[{name:"笕尚快递"}],
                    "D":[{name:"笕尚快递",initial_weight:"包仓",additional_weight:"恒温",
                        amount_interval:[2,5],
                        weight_interval:[[10,20],[]],tax_rate_id:"5%"}],
                    "U":[{name:"笕尚快递",initial_weight:"1",additional_weight:"3",
                        amount_interval:[2,5],
                        weight_interval:[[10,20],[]],tax_rate_id:"5%",target_id:10,
                    details:[{province_id:"河南",initial_weight_price:[[4]],additional_weight_price:[[5]]}]}],
                    "H":{10:{name:"笕尚快递",initial_weight:"1",additional_weight:"2",
                        amount_interval:[2,5],
                        weight_interval:[[10,20],[]],tax_rate_id:"5%",
                            details:[{province_id:"河南",initial_weight_price:[[5]],additional_weight_price:[[5]]}]}},
                },
                logistic:{
                    "C":[{name:"笕尚物流"}],
                    "D":[{name:"笕尚物流",unit_range:["0-5","5-10"],unit_id:"5",other_unit_range:["0-5","5-10"],other_unit_id:"T"
                        ,pick_up_price:"222",fuel_price:"22",service_price:"34",tax_rate_id:"6%",details:[
                            {unit_id:"T",range:"0-10",province_id:"河北",city_id:"石家庄",unit_price:"22",delivery_fee:"170",
                                rate:"20%"},
                        ]}],
                    "U":[{name:"笕尚物流",unit_range:["0-5","5-10"],unit_id:"5",other_unit_range:["0-5","5-10"],other_unit_id:"T"
                        ,pick_up_price:"222",fuel_price:"22",service_price:"34",tax_rate_id:"6%",target_id:10,details:[
                            {unit_id:"T",range:"0-10",province_id:"河北",city_id:"石家庄",unit_price:"22",delivery_fee:"170",
                                rate:"20%"},
                        ]}],
                    "H":{10:{name:"笕尚物流",unit_range:["0-5","5-10"],unit_id:"5",other_unit_range:["0-5","5-10"],other_unit_id:"T"
                        ,pick_up_price:"222",fuel_price:"22",service_price:"34",tax_rate_id:"6%",details:[
                            {unit_id:"T",range:"0-10",province_id:"河北",city_id:"石家庄",unit_price:"22",delivery_fee:"170",
                                rate:"21%"},
                        ]}},
                },
                directLogistic:{
                    "C":[{name:"笕尚直发",base_km:"10"}],
                    "D":[{name:"笕尚直发",base_km:"10",tax_rate_id:"3%"}],
                    "U":[{name:"笕尚直发",base_km:"10",tax_rate_id:"3%",target_id:"10",details:[
                            {car_type_id:"碰碰车",base_fee:"30",additional_fee:"50"}
                        ]}],
                    "H":{10:{name:"笕尚直发",base_km:"101",tax_rate_id:"32%",details:[
                            {car_type_id:"碰碰车",base_fee:"301",additional_fee:"50"}
                        ]}},
                },
                system:{
                    "C":[{usage_fee:"500"}],
                    "D":[{usage_fee:"500"}],
                    "U":{usage_fee:"510",tax_rate_id:20},
                    "H":{usage_fee:"500",tax_rate_id:21},
                },
                mapping:{
                    "storage":{
                        "name":"名称",
                        "counting_type":"计费类型",
                        "using_type":"用仓类型",
                        "minimum_area":"最低起租面积",
                        "discount_type":"减免类型",
                        "discount_value":"减免值",
                        "unit_id":"单位",
                        "time_unit_id":"计时单位",
                        "amount_interval":"数量-单价",
                        "tax_rate_id":"税率",
                    },
                    "operation":{
                        name:"名称",
                        operation_type:"作业类型",
                        strategy:"策略",
                        feature:"特征",
                        total_price:"按单价",
                        total_discount_price:"按单减免单价",
                        discount_count:"减免值",
                        type_mark:"类型",
                        surcharge:"附加费",
                        surcharge_unit_id:"附加费单位",
                        max_fee:"封顶费",
                        remark:"备注",
                        tax_rate_id:"税率",
                        child:{
                            strategy:"子策略",
                            amount:"起步数",
                            unit_id:"单位",
                            unit_price:"单价",
                            feature:"特征",
                            discount_price:"减免单价",
                            odd_price:"零头价",
                        }
                    },
                    "express":{
                        name:"名称",
                        initial_weight:"首重",
                        additional_weight:"续重",
                        weight_interval:"数量-重量",
                        tax_rate_id:"税率",
                        child:{
                            province_id:"省",
                            initial_weight_price:"初始单价",
                            additional_weight_price:"续重单价",
                        },
                    },
                    "logistic":{
                        name:"名称",
                        unit_id:"单位一",
                        unit_range:"单位一区间",
                        other_unit_id:"单位二",
                        other_unit_range:"单位二区间",
                        pick_up_price:"提货费",
                        fuel_price:"燃油附加费",
                        service_price:"服务费",
                        tax_rate_id:"税率",
                        child:{
                            unit_id:"单位",
                            range:"区间",
                            province_id:"省份",
                            city_id:"城市",
                            unit_price:"单价",
                            delivery_fee:"送货费",
                            initial_fee:"起始计费",
                            initial_amount:"起始计数",
                            rate:"费率",
                        },
                    },
                    "directLogistic":{
                        name:"名称",
                        base_km:"起步公里数",
                        tax_rate_id:"税率",
                        child:{
                            car_type_id:"车型",
                            base_fee:"起步费",
                            additional_fee:"续费(元/KM)"
                        }
                    },
                },
            },
            selectedAudit:"system",
            poolMapping:{
                units:{1:"T",2:"G"},
                taxRates:{1:"2",2:"3"},
            },
            showAuditPiece:{
                "C":true,"D":true,"U":true
            }
        },
        mounted(){
            let temp = {"name":"名称"};
            let font = "<div class='float-left'><span class='float-left fa fa-arrow-right text-info ml-2 mr-2'></span>";
            this.auditList.storage.U.forEach(data=>{
                let tar = this.auditList.storage.H[data.target_id];
                for (let key in this.auditList.mapping.storage){
                    if (String(data[key])!==String(tar[key])){
                        if (!temp[key]) temp[key] = this.auditList.mapping.storage[key];
                        data[key] = this.transformData(tar,key)+font+this.transformData(data,key,true)+"</div>";
                    }else data[key] = this.transformData(data,key);
                }
                if (String(data["price"])!==String(tar["price"]) && String(data["amount_interval"])===String(tar["amount_interval"])){
                    data["amount_interval"] = this.transformData(tar,"amount_interval")+font+this.transformData(data,"amount_interval",true)+"</div>";
                }
            });
            this.auditList.mapping.storage = temp;
            temp={"name":"名称",child:{strategy:"子策略"}};
            this.auditList.operation.U.forEach(data=>{
                let tar = this.auditList.operation.H[data.target_id];
                for (let key in this.auditList.mapping.operation){
                    if (String(data[key])!==String(tar[key])){
                        if (!temp[key]) temp[key] = this.auditList.mapping.operation[key];
                        data[key] = this.transformData(tar,key)+font+this.transformData(data,key,true)+"</div>";
                    }else data[key] = this.transformData(data,key);
                }
                let itemTem = {};
                tar.items.forEach(item=>{
                    if (!itemTem[item.strategy])itemTem[item.strategy] = [];
                    itemTem[item.strategy].push(item);
                });
                let items = [];
                let amount = 0;

                data.items.forEach(item=>{
                    if (itemTem[item.strategy]){
                        let mark = true;
                        for (let i=0;i<itemTem[item.strategy].length;i++){
                            for (let key in this.auditList.mapping.operation.child){
                                let oldStr = itemTem[item.strategy][i][key];
                                let newStr = item[key];
                                if (String(newStr)!==String(oldStr)){
                                    mark = false;break;
                                }
                            }
                            if (mark){
                                item.operation = "H";
                                itemTem[item.strategy].splice(i,1);
                                if (itemTem[item.strategy].length===0)itemTem[item.strategy] = null;
                                break;
                            }
                        }
                    }//去重
                });
                data.items.forEach(item=>{
                    if (item.operation!=='H'){
                        if (!itemTem[item.strategy]){
                            for (let key in this.auditList.mapping.operation.child)item[key] = this.transformData(item,key);
                            item.operation = "C";
                            items.unshift(item);
                            amount++;
                        }else{
                            let tar = item.strategy;
                            for (let key in this.auditList.mapping.operation.child){
                                if (String(item[key])!==String(itemTem[tar][0][key])){
                                    if (!temp.child[key]) temp.child[key] = this.auditList.mapping.operation.child[key];
                                    item[key] = this.transformData(itemTem[tar][0],key)+font+this.transformData(item,key,true)+"</div>";
                                }else item[key] = this.transformData(item,key);
                            }
                            item.operation = "U";
                            items.push(item);
                            itemTem[tar].splice(0,1);
                            if (itemTem[tar].length===0) itemTem[tar] = null;
                        }
                    }
                });
                for (let key in itemTem){
                    if (itemTem[key]){
                        itemTem[key].forEach(item=>{
                            for (let key in this.auditList.mapping.operation.child)item[key] = this.transformData(item,key);
                            item.operation = "D";
                            items.splice(amount,0,item);
                            amount++;
                        });
                    }
                }
                data.items = items;
            });
            this.auditList.mapping.operation = temp;
            temp={"name":"名称",child:{province_id:"省"}};
            this.auditList.express.U.forEach(data=> {
                let tar = this.auditList.express.H[data.target_id];
                for (let key in this.auditList.mapping.express) {
                    if (String(data[key]) !== String(tar[key])) {
                        if (!temp[key]) temp[key] = this.auditList.mapping.express[key];
                        data[key] = this.transformData(tar, key) + font + this.transformData(data, key, true) + "</div>";
                    } else data[key] = this.transformData(data, key);
                    if (String(data["amount_interval"])!==String(tar["amount_interval"]) && String(data["weight_interval"])===String(tar["weight_interval"])){
                        data["weight_interval"] = this.transformData(tar,"weight_interval")+font+this.transformData(data,"weight_interval",true)+"</div>";
                    }
                }
                let itemTem = {};
                tar.details.forEach(item => {itemTem[item.province_id] = item;});
                let items = [];
                let amount = 0;
                data.details.forEach(item=>{
                    if (!itemTem[item.province_id]){
                        for (let key in this.auditList.mapping.express.child)item[key] = this.transformData(item,key);
                        item.operation = "C";
                        items.unshift(item);
                        amount++;
                    }else{
                        let mark = true;
                        for (let key in this.auditList.mapping.express.child){
                            if (String(item[key])!==String(itemTem[item.province_id][key])){
                                mark = false;break;
                            }
                        }
                        if (!mark){
                            let tar = item.province_id;
                            for (let key in this.auditList.mapping.express.child) {
                                if (String(item[key]) !== String(itemTem[tar][key])) {
                                    if (!temp.child[key]) temp.child[key] = this.auditList.mapping.express.child[key];
                                    item[key] = this.transformData(itemTem[tar], key) + font + this.transformData(item, key, true) + "</div>";
                                } else item[key] = this.transformData(item, key);
                            }
                            item.operation = "U";
                            items.push(item);
                            delete itemTem[tar];
                        }else delete itemTem[item.province_id];

                    }
                });
                for (let key in itemTem){
                    for (let k in this.auditList.mapping.express.child)itemTem[key][k] = this.transformData(itemTem[key],k);
                    itemTem[key].operation = "D";
                    items.splice(amount,0,itemTem[key]);
                    amount++;
                }
                data.details = items;
            });
            this.auditList.mapping.express = temp;
            temp={name:"名称",child:{province_id:"省份",city_id:"城市"}};
            this.auditList.logistic.U.forEach(data=> {
                let tar = this.auditList.logistic.H[data.target_id];
                for (let key in this.auditList.mapping.logistic) {
                    if (String(data[key]) !== String(tar[key])) {
                        if (!temp[key]) temp[key] = this.auditList.mapping.logistic[key];
                        data[key] = this.transformData(tar, key) + font + this.transformData(data, key, true) + "</div>";
                    } else data[key] = this.transformData(data, key);
                }
                let itemTem = this.logisticDataFormat(tar);
                let dataTem = this.logisticDataFormat(data);
                let items = [];
                for (let key in itemTem){
                    if (dataTem[key]){
                        for (let key2 in itemTem[key]){
                            if (dataTem[key][key2]){
                                for (let key3 in itemTem[key][key2]){
                                    if (dataTem[key][key2][key3]){
                                        for (let key4 in itemTem[key][key2][key3]){
                                            if (dataTem[key][key2][key3][key4]){
                                                let mark = true;
                                                for (let key5 in this.auditList.mapping.logistic.child){
                                                    if (String(dataTem[key][key2][key3][key4][key5]) !== String(itemTem[key][key2][key3][key4][key5])){
                                                        if (!temp.child[key5]) temp.child[key5] = this.auditList.mapping.logistic.child[key5];
                                                        mark=false;
                                                        if (!temp.child[key5]) temp.child[key5] = this.auditList.mapping.logistic.child[key5];
                                                        dataTem[key][key2][key3][key4][key5] = this.transformData(itemTem[key][key2][key3][key4], key5) + font + this.transformData(dataTem[key][key2][key3][key4], key5, true) + "</div>";
                                                    } else dataTem[key][key2][key3][key4][key5] = this.transformData(dataTem[key][key2][key3][key4], key5);
                                                }
                                                if (!mark){
                                                    dataTem[key][key2][key3][key4].operation = "U";
                                                    items.push(dataTem[key][key2][key3][key4])
                                                }
                                                delete dataTem[key][key2][key3][key4];
                                                delete itemTem[key][key2][key3][key4];
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                dataTem = this.logisticDataRestore(dataTem,"C");
                dataTem.push.apply(dataTem,this.logisticDataRestore(itemTem,"D"));
                dataTem.push.apply(dataTem,items);
                data.details = dataTem;
            });
            this.auditList.mapping.logistic = temp;
            temp={name:"名称",child:{car_type_id:"车型"}};
            this.auditList.directLogistic.U.forEach(data=> {
                let tar = this.auditList.directLogistic.H[data.target_id];
                for (let key in this.auditList.mapping.directLogistic) {
                    if (String(data[key]) !== String(tar[key])) {
                        if (!temp[key]) temp[key] = this.auditList.mapping.directLogistic[key];
                        data[key] = this.transformData(tar, key) + font + this.transformData(data, key, true) + "</div>";
                    } else data[key] = this.transformData(data, key);
                }
                let itemTem = {};
                tar.details.forEach(item => {itemTem[item.car_type_id] = item;});
                let items = [];
                let amount = 0;
                data.details.forEach(item => {
                    if (itemTem[item.car_type_id]){
                        let car = item.car_type_id;
                        let mark = true;
                        for (let key in this.auditList.mapping.directLogistic.child) {
                            if (String(item[key]) !== String(itemTem[car][key])) {
                                mark = false;
                                if (!temp.child[key]) temp.child[key] = this.auditList.mapping.directLogistic.child[key];
                                item[key] = this.transformData(itemTem[car], key) + font + this.transformData(item, key, true) + "</div>";
                            } else item[key] = this.transformData(item, key);
                        }
                        if (!mark){
                            item.operation = "U";
                            items.push(item);
                        }
                        delete itemTem[car];
                    }else{
                        item.operation = "C";
                        items.unshift(item);
                        amount++;
                    }
                    for (let key in itemTem){
                        for (let k in this.auditList.mapping.directLogistic.child)itemTem[key][k] = this.transformData(itemTem[key],k);
                        itemTem[key].operation = "D";
                        items.splice(amount,0,itemTem[key]);
                        amount++;
                    }
                    data.details = items;
                });
            });
            this.auditList.mapping.directLogistic = temp;
        },
        methods:{
            {{--@include("customer.customer.project.part._auditComparisonVue")--}}
            transformData(data,key,font=false){
                if (!data[key])return;
                let html = '<div class="float-left small ';
                if (font)html += "text-primary font-weight-bold";
                else html += "text-secondary";
                html+='">';
                switch (key) {
                    case "amount_interval":
                        data[key].forEach((am,i)=>{
                            if (i!==data[key].length-1) html += "<span>"+am+"-"+data[key][i+1]+"（"+data["price"][i]+"元）<br></span>";
                        });
                        html += "<span>"+data[key][data[key].length-1]+" +（"+data["price"][data[key].length-1]+"元）<br></span></div>";
                        return html;
                    case "total_discount_price":
                        data[key].forEach(am=>{
                            html += '<span>'+am+'元<br></span>'
                        });
                        return html+"</div>";
                    case "discount_price":
                        data[key].forEach(am=>{
                            html += '<span>'+am+'元<br></span>'
                        });
                        return html+"</div>";
                    case "discount_count":
                        data[key].forEach((am,i)=>{
                            if (i!==data[key].length-1)html += '<span>'+am+'-'+data[key][i+1]+'<br></span>'
                        });
                        html += '<span>'+data[key][data[key].length-1]+'&nbsp;+<br></span>';
                        return html+"</div>";
                    case "weight_interval":
                        data[key].forEach((arr,i)=>{
                            if (i!==data[key].length-1) html += '<span>'+data.amount_interval[i]+'-'+data.amount_interval[i+1]+'/单（';
                            arr.forEach((w,j)=>{
                                if (j!==arr.length-1)html += w+'-'+arr[j+1]+'/KG,';
                            });
                            html += (arr[arr.length-1] ? arr[arr.length-1] : 0)+'&nbsp;+/KG）<br></span>';
                        });
                        html += '<span>'+data.amount_interval[data.amount_interval.length-1]+'&nbsp;+/单（';
                        let arr = data.weight_interval[data.weight_interval.length-1];
                        arr.forEach((w,j)=>{
                            if (j!==arr.length-1)html += w+'-'+arr[j+1]+'/KG,';
                        });
                        html += (arr[arr.length-1] ? arr[arr.length-1] : 0)+'&nbsp;+/KG）<br></span>';
                        return html;
                    case "initial_weight_price":
                        data[key].forEach(arr=>{
                            html += "<div class='float-left'>"+arr+"<br></div>";
                        });
                        return html;
                    case "additional_weight_price":
                        data[key].forEach(arr=>{
                            html += "<div class='float-left'>"+arr+"<br></div>";
                        });
                        return html;
                    case "unit_range":
                        data[key].forEach(r=>{
                            html += '<span class="small">'+r+'<br></span>';
                        });
                        return html;
                    case "other_unit_range":
                        data[key].forEach(r=>{
                            html += '<span class="small">'+r+'<br></span>';
                        });
                        return html;
                }
                return html+= data[key]+"</div>";
            },
            logisticDataFormat(tar){
                let obj={};
                tar.details.forEach(item => {
                    if (obj[item.province_id]){
                        if (obj[item.province_id][item.city_id]){
                            if (obj[item.province_id][item.city_id][item.unit_id]){
                                obj[item.province_id][item.city_id][item.unit_id][item.range] = item;
                            }else{
                                let arr1={};
                                arr1[item.range] = item;
                                obj[item.province_id][item.city_id][item.unit_id] = arr1;
                            }
                        }else{
                            let arr1={};
                            arr1[item.range] = item;
                            let arr2={};
                            arr2[item.unit_id] = arr1;
                            obj[item.province_id][item.city_id] = arr2;
                        }
                    }else{
                        let arr1={};
                        arr1[item.range] = item;
                        let arr2={};
                        arr2[item.unit_id] = arr1;
                        let arr3={};
                        arr3[item.city_id] = arr2;
                        obj[item.province_id] = arr3;
                    }
                });
                return obj;
            },
            logisticDataRestore(tar,type,items=[],count=0){
                if (count===4){
                    tar["operation"] = type;
                    items.push(tar);
                } else{
                    count++;
                    for (let key in tar){
                        this.logisticDataRestore(tar[key],type,items,count);
                    }
                }
                return items;
            },
            这样(){
                let video = document.createElement("video");
                let canvas = document.createElement("canvas");
                let arr=["url1","url2","url3"];
                let result = [];
                arr.forEach(url=>{
                    video.setAttribute('src',url);
                    canvas.width = video.clientWidth+"px";
                    canvas.height = video.clientHeight+"px";
                    canvas.getContext("2d").drawImage(video,0,0,canvas.width,canvas.height);
                    result.push(canvas.toDataURL("image/png"));
                });
                console.log(result);
            },
        },
    });
</script>
</body>
</html>