@extends('layout.layout')
@section('content')
    <div class="combo_wrapper">
        <div class="combo_cover_wrapper">
            @if($combo->cover != '')
                <img src="{{ $combo->cover }}" alt="">
            @else
                <div>暂无封面图</div>
            @endif
        </div>
        <div class="combo_info_wrapper">
            <div class="combo_title_wrapper">{{ $combo->name }}</div>
            <div class="combo_price_wrapper">
                <div class="combo_price_title_wrapper">优惠价</div>
                <div class="combo_price_content_wrapper">
                    <span>¥ {{ $combo->price }}</span>
                    @if($combo->price < $combo->original_price)
                        <span class="combo_price_original_price_wrapper">{{ $combo->original_price }}</span>
                    @endif
                </div>
            </div>
            <div class="combo_intro_wrapper">
                <div class="combo_intro_title_wrapper">套餐简介：</div>
                <div class="combo_intro_content_wrapper">{{ $combo->intro }}</div>
            </div>
            <div class="combo_intro_wrapper">
                <div class="combo_intro_title_wrapper">服务机构：</div>
                <div @click="tabClick('hospital',true)" class="combo_intro_content_wrapper cursor_pointer">
                    由{{ $hospital->name }}提供
                </div>
            </div>
            <div class="combo_intro_wrapper">
                <div class="combo_intro_title_wrapper">服务承诺：</div>
                <div class="combo_intro_content_wrapper">{{ $combo->sub_intro }}</div>
            </div>
            <div class="combo_button_wrapper">
                <div @click="showQrcodeClick('{{$qrcode}}')" class="combo_pay_button_wrapper">立即预约</div>
            </div>
        </div>
    </div>
    <el-dialog v-model="qrcode_show" width="500">
        <div>
            <div class="qrcode_box_wrapper" :ref="qrcodeRef"></div>
            <div class="qrcode_tip_wrapper">前往小程序开始预约</div>
        </div>
    </el-dialog>
    <div class="combo_desc_wrapper">
        <div class="combo_desc_tabs_wrapper">
            <div @click="tabClick('combo')" class="combo_desc_tab_wrapper"
                 :class="[tab_active==='combo' ? 'combo_desc_tab_active_wrapper' :'']">套餐详情
            </div>
            <div id="hospital" @click="tabClick('hospital')" class="combo_desc_tab_wrapper"
                 :class="[tab_active==='hospital' ? 'combo_desc_tab_active_wrapper' :'']">机构详情
            </div>
        </div>
        <div class="combo_desc_combo_wrapper"
             :class="[tab_active==='combo' ? 'combo_desc_tab_show_wrapper' :'']">
            <div class="combo_desc_combo_title_wrapper">专家推荐</div>
            <div class="combo_desc_combo_text_wrapper">{!! $combo->desc !!}</div>
            <div class="combo_desc_combo_title_wrapper">所含项目及介绍</div>
            <div class="combo_desc_combo_tip_wrapper">
                温馨提示：因为体检中心体检项目会不定期做调整，具体套餐信息以体检中心实际检查项目为准！
            </div>
            <div class="combo_item_table_wrapper">
                <div class="combo_item_title_wrapper">
                    <div class="combo_item_blank_wrapper combo_item_index_wrapper">序号</div>
                    <div class="combo_item_blank_wrapper combo_item_name_wrapper">基础检查项目</div>
                    <div class="combo_item_blank_wrapper combo_item_desc_wrapper">检查目的</div>
                </div>
                @foreach($combo->items_data as $key => $item)
                    <div class="combo_item_item_wrapper">
                        <div class="combo_item_blank_wrapper combo_item_index_wrapper">{{ $key + 1 }}</div>
                        <div class="combo_item_blank_wrapper combo_item_name_wrapper">{{ $item['name'] }}</div>
                        <div class="combo_item_blank_wrapper combo_item_desc_wrapper">{{ $item['desc'] }}</div>
                    </div>
                @endforeach
            </div>
        </div>
        <div class="combo_desc_hospital_wrapper"
             :class="[tab_active==='hospital' ? 'combo_desc_tab_show_wrapper' :'']">
            <div class="combo_desc_hospital_card_wrapper">
                <div class="desc_hospital_avatar_wrapper">
                    <img src="{{ $hospital->logo }}" alt="">
                </div>
                <div class="desc_hospital_content_wrapper">
                    <div class="desc_hospital_name_wrapper">{{ $hospital->name }}</div>
                    <div class="desc_hospital_star_wrapper">
                        <div class="desc_hospital_star_item_wrapper">★</div>
                        <div class="desc_hospital_star_item_wrapper">★</div>
                        <div class="desc_hospital_star_item_wrapper">★</div>
                        <div class="desc_hospital_star_item_wrapper">★</div>
                        <div class="desc_hospital_star_item_wrapper">★</div>
                        <div class="desc_hospital_star_score_wrapper">5.0</div>
                    </div>
                    <div class="desc_hospital_info_wrapper">
                        <div class="desc_hospital_info_title_wrapper">地址：</div>
                        <div class="desc_hospital_info_text_wrapper">{{ $hospital->address }}</div>
                    </div>
                    <div class="desc_hospital_info_wrapper">
                        <div class="desc_hospital_info_title_wrapper">电话：</div>
                        <div class="desc_hospital_info_text_wrapper">{{ $hospital->tel }}</div>
                    </div>
                </div>
            </div>
            <div class="combo_desc_combo_title_wrapper">医院简介</div>
            <div class="combo_desc_combo_text_wrapper">{!! $hospital->desc !!}</div>
            <div class="combo_desc_combo_title_wrapper">地图</div>
            <div class="combo_desc_combo_text_wrapper">
                <div :ref="(e)=>{hospitalMapRef(e,Number({{$hospital->longitude}}),Number({{$hospital->latitude}}))}"
                     id="hospital_map_container"></div>
            </div>
        </div>
    </div>
@endsection