<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link href="{{cdn_asset('/assets/css/bootstrap.min.css')}}" rel="stylesheet">
    <title>chose</title>
    <style type="text/css">
        .all{
            width: 100%;
            height: 100%;
            overflow-y: scroll;
        }
        #order{
            width: 100%;
        }
        #order .quest{
            width: 100%;
            height: auto;
            margin-bottom: 20px;
        }
        .quest label{
            display: flex;
            height: 20px;
        }
        .quest input{
            display: inline-block;
            width: auto;
            border:none;
            background: #fff;
        }
        .heji text{
            display: inline-block;
            font-size: 20px;
            font-weight: 700;
        }
    </style>
</head>
<body>
<div class="all">
    <div>
        <div class="col-xs-0 col-lg-2"></div>
        <div class="col-xs-12 col-lg-8" style="margin: 0 auto;border-left:1px solid #ccc;border-right:1px solid #ccc;margin-top: 10px;padding-top: 20px;padding-bottom: 20px;">
            <div class="top" style="width: 90%;margin: 0 auto;">
                <img src="{{cdn_asset('/assets/img/top.jpg')}}" alt="" style="width: 100%;">
            </div>
            <div class="title" style="width: 90%;">
                <text style="width: 100%;font-size: 20px;font-weight: 700;display: inline-block;margin:15px 0;">您选择了下列项目：</text>
            </div>
            <div class="col-xs-12 col-lg-12" style="display: flex;">
                <div class="col-xs-12 col-lg-12" id="order"></div>
            </div>
            <div class="heji">
                <text>合计：<text id="zonger" style="color: #f04;"></text></text>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var order = document.getElementById("order");

   /* var chose = [
        {id:'a1',name:'结直肠癌',price:'280'},
        {id:'a2',name:'肺癌',price:'280'},
        {id:'a3',name:'黑色素瘤',price:'280'},
        {id:'a4',name:'卵巢癌（女性）',price:'280'},
        {id:'a5',name:'胰腺癌',price:'280'},
        {id:'a6',name:'乳腺癌（女性）',price:'280'},
        {id:'a7',name:'宫颈癌（女性）',price:'280'},
        {id:'a8',name:'膀胱癌',price:'280'},
        {id:'a9',name:'前列腺癌（男性)',price:'280'},
        {id:'a10',name:'肾癌',price:'280'},
        {id:'a11',name:'胃癌',price:'280'},
        {id:'a12',name:'子宫内膜癌（女性）',price:'280'},
        {id:'a13',name:'腹主动脉瘤',price:'280'},
        {id:'a14',name:'基底细胞癌',price:'280'},
        {id:'a15',name:'肝细胞癌（肝癌）',price:'280'},
    ];
    var taocan = [
        {id:'tc1',name:'血清维生素含量检测套餐',neirong:'检测血清中维生素A、维生素E、维生素D2、维生素D3、维生素K、维生素B1、维生素B2、维生素B3、维生素B5、维生素B6、维生素C、维生素B7、维生素B9（叶酸）、维生素B12的含量，精准指导各种维生素的补充。维生素的失衡与众多慢性疾病和肿瘤密切相关，体内维生素的平衡是保证健康的关键。',jiage:'1480',youhui:'1180'},
        {id:'tc2',name:'骨骼营养健康关爱套餐',neirong:'检测包含了维生素A代谢、维生素D代谢、钙质代谢、锌质代谢能力检测。维生素A、D、钙、锌是直接关系到骨骼健康的营养物质，它们的利用需要人体的各种代谢能力的参与，通过本检测，指导和骨骼健康物质的补充和调整。',jiage:'720',youhui:'570'},
        {id:'tc3',name:'心脑血管呵护检测套餐',neirong:'<p style=xxxx">心脑血管疾病的发生与相关的基因缺陷存在着密切的关系，该检测通过对与冠心病、心房纤维性颤动、静脉血栓栓塞、心原性猝死、中风相关基因进行检测，明确高危因素，及早调整生理状态，做到疾病的早期预防。',jiage:'720',youhui:'570'},
        {id:'tc4',name:'遗传性肿瘤基因检测经济套餐',neirong:'涵盖了结直肠癌、肺癌、肝癌、胃癌、甲状腺癌、乳腺癌（女性）、宫颈癌（女性）、子宫内膜癌（女性）、卵巢癌（女性），共计9种肿瘤发病风险的评估。本检测覆盖了与肿瘤相关的数十个主要遗传位点。',jiage:'980',youhui:'780'},
        {id:'tc5',name:'遗传性肿瘤基因检测实用套餐',neirong:'涵盖了结直肠癌、肺癌、肝癌、膀胱癌、肾癌、胃癌、甲状腺癌、胰腺癌、慢性淋巴细胞白血病、基底细胞癌、鼻咽癌、口腔癌、咽喉癌、黑色素瘤、骨髓增生性肿瘤、霍奇金氏淋巴瘤、食管癌、前列腺癌（男性）、睾丸癌（男性）、乳腺癌（女性）、宫颈癌（女性）、子宫内膜癌（女性），共计9种肿瘤发病风险的评估。本检测覆盖了与肿瘤相关的数十个主要遗传位点。',jiage:'2400',youhui:'1900'},
        {id:'tc6',name:'心脑血管药物治疗安全指导套餐',neirong:'心脑血管常用的治疗药物的药效、毒副作用、用药剂量都与个人的遗传背景密切相关，同医不同药、同药不同量。通过基因检测技术，精准评估心脑血管疾病相关的37种药物效果，并精准提供指导个性用药指导，做到用对药、少吃药、治好病的目的。',jiage:'3960',youhui:'3160'},
        {id:'tc7',name:'成人健康护卫套餐',neirong:'几乎除了外伤以外的所有疾病都与遗传相关。每个人的遗传特质决定了自身患病风险不同或者对环境刺激的反应不同，它们都影响着自身的健康。我们对多种肿瘤（22种）、心脑血管疾病（5种）、 营养代谢能力（11种）、神经类疾病（3种）、心理类疾病（3种）、肥胖风险（3种）、慢性疾病（27种）等，进行综合性精准检测，明确自身风险，做到早期的预防和干预。本检测覆盖了和人体疾病与营养相关的上千个遗传位点的检测。',jiage:'5640',youhui:'4500'},
        {id:'tc8',name:'健康无忧套餐',neirong:'本检测通过大规模医院检测技术，针对恶性肿瘤、慢性遗传性疾病、心脑血管疾病、免疫代谢性疾病、神经系统疾病、营养代谢能力、常见药物用药有效性安全性等上千种疾病以及遗传特质进行全面评估，明确高危因素，及早调整生理状态，做到疾病的早期预防。本检测覆盖了人类基因组上数十万个遗传位点。',jiage:'27000',youhui:'21000'},
    ]*/
    var data_single = "{{$data_single}}";
    data_single = data_single.replace(/&quot;/g,'\"');
    data_single = data_single.replace(/&lt;/g,'\<');
    data_single = data_single.replace(/&gt;/g,'\>');
    var chose = JSON.parse(data_single);
    console.log(chose)


    var data_combo = "{{$data_combo}}";
    data_combo = data_combo.replace(/&quot;/g,'\"');
    data_combo = data_combo.replace(/&lt;/g,'\<');
    data_combo = data_combo.replace(/&gt;/g,'\>');
    var taocan = JSON.parse(data_combo);
    console.log(taocan)
    var zonger = 0;

    var cl = chose.length
    var tl = taocan.length
    console.log(cl)
    var choses = '';
    var taocans = '';
    for (var i = 0; i < cl; i++) {
        choses += '<div class="col-lg-12 quest">'
        choses += '<label class="col-xs-12 col-lg-4">'
        choses += '<span class="price" style="color:red">'+chose[i].realPrice+'</span><input type="text" class="cprice" value="'+chose[i].name+'" name="xiangmu[]" disabled/>';
        choses += '</label>';
        zonger += Number(chose[i].realPrice);
        choses += '</div>'
    }
    for (var t = 0; t < tl; t++) {
        taocans += '<div class="col-lg-12 quest">'
        taocans += '<label class="col-xs-12 col-lg-4">'
        taocans += '<span class="price" style="color:red">'+taocan[t].realPrice+'</span><input type="text" class="tprice" value="'+taocan[t].name+'" name="taocan[]" disabled/>';
        taocans += '</label>';
        taocans += '<div class="neirong">'+taocan[t].content+'</div>';
        taocans += '</div>'
        zonger += Number(taocan[t].realPrice);
    }
    // for (var i = 0; i < cl; i++) {
    //     taocans += '<div class="col-lg-12 quest">'
    //     taocans += '<h4>'+taocan[i].name+'</h4>';
    //         taocans += '<label class="col-xs-12 col-lg-4">'
    //         taocans += '<span class="price" style="color:red">'+taocan[i].price+'</span><input type="text" class="tprice" value="'+taocan[i].name+'" name="xiangmu[]" disabled/>';
    //         taocans += '</label>';
    //         taocans += '<div class="neirong">'+taocan[t].neirong+'</div>';
    //         zonger += Number(taocan[i].price);
    //     taocans += '</div>'
    // }
    console.log(choses)
    order.innerHTML += choses;
    order.innerHTML += taocans;
    document.getElementById("zonger").innerHTML += zonger;
</script>
<script src="{{cdn_asset('/assets/js/jquery-3.2.1.js')}}"></script>
<script src="{{cdn_asset('/assets/js/bootstrap.min.js')}}"></script>
</html>