@using System.Text;
@using GBLab.Common.Expand;
@{
    Layout = "~/Views/School_NameCard/Shared/_Layout.cshtml";
    GBLab.Entities.T_TeacherNameCard info = ViewData["data"] as GBLab.Entities.T_TeacherNameCard;
}

<main class="micro-card-page">
    <section class="hd-info">
        <div class="hd-img">
            <div class="img-bg">
                <i class="img"><img src="@(info.F_Logo.DefaultIsNullOrEmpty(""))" alt=""></i>
            </div>
        </div>
        <div class="hd-txt">
            <span class="nm">@(info.F_Name.DefaultIsNullOrEmpty(""))</span>
            <span class="ads">
                <i class="icon-pos"></i>
                @(GBLab.Entities.Config.NameCardConfig.Config().SchoolName.DefaultIsNullOrEmpty(""))
            </span>
        </div>
    </section>
    <section class="bd-info">
        <div class="info-box">
            <a href="javascript:;" title="" class="icon-center modal-open" data-am-modal="{target: '#doc-modal-qrcode',dimmer:false,closeViaDimmer: 0}"></a>
            <a href="javascript:;" title="" class="icon-custom02 modal-open" data-am-modal="{target: '#doc-modal-honor',dimmer:false,closeViaDimmer: 0}">
                <i class="icon"></i>
                <span class="tit">荣誉</span>
            </a>
            <a href="javascript:;" title="" class="icon-card modal-open" data-am-modal="{target: '#doc-modal-card',dimmer:false}">
                <i class="icon"></i>
                <span class="tit">名片</span>
            </a>
            <a href="@(GBLab.Entities.Config.NameCardConfig.Config().SchoolMobileSite.DefaultIsNullOrEmpty(""))" title="" class="icon-interview modal-open">
                <i class="icon"></i>
                <span class="tit">官网</span>
            </a>
            <a href="javascript:;" title="" class="icon-case modal-open" data-am-modal="{target: '#doc-modal-case',dimmer:false,closeViaDimmer: 0}">
                <i class="icon"></i>
                <span class="tit">相册</span>
            </a>
            <a href="javascript:;" title="" class="icon-phone" data-am-modal="{target: '#doc-modal-phone',closeViaDimmer: 0}">
                <i class="icon"></i>
                <span class="tit">电话</span>
            </a>
            <a href="javascript:;" title="" class="icon-abstract modal-open" data-am-modal="{target: '#doc-modal-abstract',dimmer:false,closeViaDimmer: 0}">
                <i class="icon"></i>
                <span class="tit">简介</span>
            </a>
        </div>
    </section>
</main>

<!-- 模态框-电话 -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-phone">
    <div class="am-modal-dialog">
        <span class="phone">@(info.F_Phone.DefaultIsNullOrEmpty(""))</span>
        <div class="btn-box">
            <a href="javascript: void(0)" class="btn-cancel" data-am-modal-close>取消</a>
            <a href="javascript: void(0)" class="btn-call" data-am-modal-close>呼叫</a>
        </div>

    </div>
</div>

<!-- 模态框-二维码 -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-qrcode">
    <div class="am-modal-dialog">
        <div class="qrcode-box">
            <i class="qrcode"><img src="@(info.F_NameCard.DefaultIsNullOrEmpty(""))" alt=""></i>
            <a href="javascript:;" title="" class="icon-fingerprint"></a>
            扫码或长按识别&nbsp;秒存名片
        </div>
        <a href="javascript: void(0)" class="btn-close" data-am-modal-close></a>

    </div>
</div>

<!-- 模态框-简介 -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-abstract">
    <div class="am-modal-dialog">
        <div class="abstract-box">
            <div class="abstract-bd">
                <div class="item">
                    <span class="tit">微信：</span>
                    <div class="txt">@(info.F_WeiXin.DefaultIsNullOrEmpty(""))</div>
                </div>
                <div class="item">
                    <span class="tit">邮箱：</span>
                    <div class="txt">@(info.F_Email.DefaultIsNullOrEmpty(""))</div>
                </div>
                <div class="item">
                    <span class="tit">手机：</span>
                    <div class="txt">@(info.F_Phone.DefaultIsNullOrEmpty(""))</div>
                </div>
                <div class="item">
                    <span class="tit">任职列表：</span>
                    <div class="txt">
                        @Html.Raw(info.F_DutyNames.DefaultIsNullOrEmpty(""))
                    </div>
                </div>
            </div>
        </div>
        <a href="javascript: void(0)" class="btn-close" data-am-modal-close></a>
    </div>
</div>

<!-- 模态框-名片 -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-card">
    <div class="am-modal-dialog">
        <div class="card-box">
            <div class="txt">
                <span class="tit">学校：</span>
                <span class="info">@(GBLab.Entities.Config.NameCardConfig.Config().SchoolName.DefaultIsNullOrEmpty(""))</span>

            </div>
            <div class="txt">
                <span class="tit">电话：</span>
                <span class="info">@(info.F_Phone.DefaultIsNullOrEmpty(""))</span>
                @*<a href="" title="" class="contact icon-btn">联系我</a>*@
            </div>
            @*<div class="txt">
                    <span class="tit">QQ：</span>
                    <span class="info">@(info.f_.DefaultIsNullOrEmpty(""))</span>
                </div>*@
            <div class="txt">
                <span class="tit">邮箱：</span>
                <span class="info">@(info.F_Email.DefaultIsNullOrEmpty(""))</span>
            </div>
            <div class="txt">
                <span class="tit">微信：</span>
                <span class="info">@(info.F_WeiXin.DefaultIsNullOrEmpty(""))</span>
                @*<a href="" title="" class="wechat icon-btn">加微信</a>*@
            </div>
        </div>
        <a href="javascript: void(0)" class="btn-close" data-am-modal-close></a>

    </div>
</div>

<!-- 模态框-相册 -->
<div class="am-modal-actions" id="doc-modal-case">
    <div class="modal-case-box">

        <div class="swiper-container">
            <div class="swiper-wrapper">
                @{
                    var imgs = info.F_ImgsUser.DefaultIsNullOrEmpty("").Split(',');
                    int i = 0;
                    foreach (var item in imgs)
                    {
                        i++;
                        <div class="swiper-slide">
                            <img src="@(item)" alt="相册">
                            <div class="info">
                                <span class="tit">相册@(i)</span>
                                <span class="txt">@(info.F_Name)的相册</span>
                            </div>
                        </div>
                    }
                }
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <a href="javascript: void(0)" class="btn-close" data-am-modal-close></a>
    </div>
</div>

<!-- 模态框 荣誉 -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-honor">
    <div class="am-modal-dialog">
        <div class="honor-box">
            <span class="tit">荣誉：</span>
            <div class="txt">
                <div class="txt-bd">
                    @{
                        imgs = info.F_ImgsCert.DefaultIsNullOrEmpty("").Split(',');
                        i = 0;
                        foreach (var item in imgs)
                        {
                            i++;
                            <i class="img-item">
                                <img src="@(item)" alt="教师荣誉">
                            </i>
                        }
                    }
                </div>

            </div>
            <a href="javascript: void(0)" class="btn-close" data-am-modal-close></a>

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

<script src="/App_Themes/Skin_Site/School_NameCard/js/jquery.min.js"></script>
<script src="/App_Themes/Skin_Site/School_NameCard/js/amazeui.min.js"></script>
<script src="/App_Themes/Skin_Site/School_NameCard/js/common.js"></script>
<script src="/App_Themes/Skin_Site/School_NameCard/js/amazeui.swiper.min.js"></script>

<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
        paginationType: 'fraction',

        coverflow: {
            rotate: 50,
            stretch: 50,
            depth: 100,
            modifier: 1,
            slideShadows: true
        }

    });
    $(".modal-open").click(function () {
        $(".bd-info").css("display", "none");
    });
    $(".btn-close").click(function () {
        $(".bd-info").css("display", "block");
    });
</script>