{{ define "index/index.html" }}
{{template "public/header" .}}
<div class="index_bd index_bg">
    <div class="top_search cs">
        <div class="top_search_con">
            <div class="search">
                <img src="/static/img/zoom.png">
                <input type="text" name="keywords" id="keywords"  onkeydown='if(event.keyCode==13){loadList();}' placeholder="请输入手机号，单号">
            </div>
            <div class="search_sx">搜索</div>
        </div>
    </div>
    <div class="content" id="content">
        <!-- <div class="list_bd">
            <div class="list_title">
                <div class="list_tit">订单编号：</div>
                <div class="list_num">RYHZL191102001</div>
                <div class="list_state daipaishe" onclick="daiPai(this)">待拍摄</div>
            </div>
            <div class="list_con">
                <div class="list">
                    <div class="list_name">妈妈姓名：</div>
                    <div class="list_info">张三</div>
                </div>
                <div class="list">
                    <div class="list_name">宝宝姓名：</div>
                    <div class="list_info">张三四</div>
                </div>
                <div class="list">
                    <div class="list_name">宝宝年龄：</div>
                    <div class="list_info">3岁</div>
                </div>
                <div class="list">
                    <div class="list_name">拍照类型：</div>
                    <div class="list_info"></div>
                </div>
                <div class="list">
                    <div class="list_name">拍照店面：</div>
                    <div class="list_info">瑞景店</div>
                </div>
                <div class="list">
                    <div class="list_name">拍照状态：</div>
                    <div class="list_info">待拍摄</div>
                </div>
                <div class="list">
                    <div class="list_name">拍照日期：</div>
                    <div class="list_info">2020-12-08</div>
                </div>
                <div class="list">
                    <div class="list_name">拍照时间：</div>
                    <div class="list_info">10:00</div>
                </div>
                <div class="list">
                    <div class="list_name">套系金额：</div>
                    <div class="list_info">￥24608</div>
                </div>
            </div>
        </div> -->
        <!-- <div class="list_bd">
            <div class="list_title">
                <div class="list_tit">订单编号：</div>
                <div class="list_num">RYHZL191102001</div>
                <div class="list_state paishezhong">拍摄中</div>
            </div>
            <div class="list_con">
                <div class="list">
                    <div class="list_name">妈妈姓名：</div>
                    <div class="list_info">张三</div>
                </div>
                <div class="list">
                    <div class="list_name">宝宝姓名：</div>
                    <div class="list_info">张三四</div>
                </div>
                <div class="list">
                    <div class="list_name">宝宝年龄：</div>
                    <div class="list_info">3岁</div>
                </div>
                <div class="list">
                    <div class="list_name">拍照类型：</div>
                    <div class="list_info"></div>
                </div>
                <div class="list">
                    <div class="list_name">拍照店面：</div>
                    <div class="list_info">瑞景店</div>
                </div>
                <div class="list">
                    <div class="list_name">拍照状态：</div>
                    <div class="list_info">拍摄中</div>
                </div>
                <div class="list">
                    <div class="list_name">拍照日期：</div>
                    <div class="list_info">2020-12-08</div>
                </div>
                <div class="list">
                    <div class="list_name">拍照时间：</div>
                    <div class="list_info">10:00</div>
                </div>
                <div class="list">
                    <div class="list_name">套系金额：</div>
                    <div class="list_info">￥24608</div>
                </div>
            </div>
        </div>
        <div class="list_bd">
            <div class="list_title">
                <div class="list_tit">订单编号：</div>
                <div class="list_num">RYHZL191102001</div>
                <div class="list_state yipaishe">已拍摄</div>
            </div>
            <div class="list_con">
                <div class="list">
                    <div class="list_name">妈妈姓名：</div>
                    <div class="list_info">张三</div>
                </div>
                <div class="list">
                    <div class="list_name">宝宝姓名：</div>
                    <div class="list_info">张三四</div>
                </div>
                <div class="list">
                    <div class="list_name">宝宝年龄：</div>
                    <div class="list_info">3岁</div>
                </div>
                <div class="list">
                    <div class="list_name">拍照类型：</div>
                    <div class="list_info"></div>
                </div>
                <div class="list">
                    <div class="list_name">拍照店面：</div>
                    <div class="list_info">瑞景店</div>
                </div>
                <div class="list">
                    <div class="list_name">拍照状态：</div>
                    <div class="list_info">已拍摄</div>
                </div>
                <div class="list">
                    <div class="list_name">拍照日期：</div>
                    <div class="list_info">2020-12-08</div>
                </div>
                <div class="list">
                    <div class="list_name">拍照时间：</div>
                    <div class="list_info">10:00</div>
                </div>
                <div class="list">
                    <div class="list_name">套系金额：</div>
                    <div class="list_info">￥24608</div>
                </div>
            </div>
        </div> -->
    </div>
    <!-- 二维码弹窗 -->
    <div class="box" id="box">
        <div class="box_bg">
            <div class="box_bd">
                <div style="color: red;">拍下二维码点击开始拍摄（6小时有效）</div>
                <img class="box_ewm" id="qrcode" src="" />
                <!-- <div class="box_btn" id="kaishiBtn">开始拍摄</div> -->
                <div class="box_close" onclick="boxClose(this)"></div>
            </div>
        </div>
    </div>
</div>
    <script type="text/html" id="tpl_order_info">
        <div class="list_bd">
            <div class="list_title">
                <div class="list_tit">订单编号：</div>
                <div class="list_num">{%=this.orderId%}&nbsp;服次：{%=this.currentfc%}</div>
                {%if (this.state == "待拍摄"){%}
                <div class='list_state daipaishe ' data-order_sn="{%=this.orderId%}" data-fc="{%=this.currentfc%}" data-bbname="{%=this.bbname%}" data-wname="{%=this.wname%}" data-targetdate="{%=this.targetdate%}" onclick="daiPai(this)">待拍摄</div>
                {%}else if(this.state == "拍摄中"){%}
                <div class='list_state paishezhong' data-order_sn="{%=this.orderId%}" data-fc="{%=this.currentfc%}" data-bbname="{%=this.bbname%}" data-wname="{%=this.wname%}" data-targetdate="{%=this.targetdate%}" onclick="toDetail(this)">拍摄中</div>
                {%}else if(this.state == "已完成"){%}
                <div class='list_state yipaishe' data-order_sn="{%=this.orderId%}" data-fc="{%=this.currentfc%}" data-bbname="{%=this.bbname%}" data-wname="{%=this.wname%}"  data-targetdate="{%=this.targetdate%}" onclick="toDetail(this)">已完成</div>
                {%}%}
            </div>
            <div class="list_con">
                <div class="list">
                    <div class="list_name">妈妈姓名：</div>
                    <div class="list_info">{%this.wname%}</div>
                </div>
                <div class="list">
                    <div class="list_name">宝宝姓名：</div>
                    <div class="list_info">{%this.bbname%}</div>
                </div>
                <div class="list">
                    <div class="list_name">宝宝年龄：</div>
                    <div class="list_info">{%this.bbage%}</div>
                </div>
                <div class="list">
                    <div class="list_name">拍照类型：</div>
                    <div class="list_info">{%this.phototype%}</div>
                </div>
                <div class="list">
                    <div class="list_name">订单店面：</div>
                    <div class="list_info">{%this.ddshop_name%}</div>
                </div>
                <div class="list">
                    <div class="list_name">拍照状态：</div>
                    <div class="list_info">{%this.photostate%}</div>
                </div>
                <div class="list">
                    <div class="list_name">拍照日期：</div>
                    <div class="list_info">{%this.photodate%}</div>
                </div>
                <div class="list">
                    <div class="list_name">拍照时间：</div>
                    <div class="list_info">{%this.phototime%}</div>
                </div>
                <div class="list">
                    <div class="list_name">套系金额：</div>
                    <div class="list_info">￥{%this.total_money%}</div>
                </div>
            </div>
        </div>
    </script>
    <script type="text/javascript">
        var keywords = ""
        var currentOrderId = "";
        var currentFc = 0;
        var bbname,wname;
        var loadList,loadingstate=false;
        function daiPai(obj){
            currentOrderId = $(obj).data("order_sn");
            currentFc = $(obj).data("fc")
            bbname =$(obj).data("bbname")
            wname =$(obj).data("wname")
            targetdate = $(obj).data("targetdate")
            let data = {
                orderId: currentOrderId,
                fc:currentFc,
            }
            console.log(data)
            let src = "/qrshow?data="+JSON.stringify(data)
            $("#qrcode").attr("src",src)
            $("#box").show()
            loadingstate=true;
            setTimeout(function(){
                getOrderState(currentOrderId,currentFc,bbname,wname,targetdate);
            },1000)
        }
        function getOrderState(currentOrderId,currentFc,bbname,wname,targetdate){
            common.ajax({
                url: "/getOrderState",
                data: {order_sn:currentOrderId,fc:currentFc},
            }).then((ret)=>{
                if (ret.code == 200 && ret.data.state == 1){
                    window.location.href = '/detail?order_sn='+currentOrderId+"&fc="+currentFc+"&wname="+wname+"&babyname="+bbname+"&targetdate="+targetdate;
                    return;
                }else if($('#box').is(':visible')){
                    setTimeout(function(){
                        getOrderState(currentOrderId,currentFc,bbname,wname,targetdate);
                    },1000)
                }
            })
        }
        function toDetail(obj){
            currentOrderId = $(obj).data("order_sn");
            currentFc = $(obj).data("fc")
            bbname =$(obj).data("bbname")
            wname =$(obj).data("wname")
            targetdate = $(obj).data("targetdate")
            window.location.href = '/detail?order_sn='+currentOrderId+"&fc="+currentFc+"&wname="+wname+"&babyname="+bbname+"&targetdate="+targetdate;
        }
        function boxClose(obj){
            loadingstate=false;
            $("#box").hide()
        }
        $("#kaishiBtn").click(function(){
            // let loadid = layer.load(1)
            common.ajax({
                url: "/start",
                data: {order_sn:currentOrderId,fc:currentFc},
            }).then((ret)=>{
                // layer.close(loadid);
                console.log("login res:",ret)
                if (ret.code != 200){
                    layer.alert(ret.msg);
                    return;
                }
                window.location.href = '/detail?order_sn='+currentOrderId+"&fc="+currentFc+"&wname="+wname+"&babyname="+bbname;
            }).catch((err)=>{
                // layer.close(loadid);
                layer.alert(err);
            })
        })
        
        layui.use(['form','layer'], function(){
            let layer = layui.layer;
            $(".search_sx").click(()=>{
                keywords = $("#keywords").val();
                if (!keywords){
                    alert("请输入关键词进行搜索。");
                    return;
                }
                loadList();
            })
            $(()=>{
                loadList();
            })
            loadList = function(){
                keywords = $("#keywords").val();
                // let loadid = layer.load(1)
                common.ajax({
                    url: "/getOrders",
                    data: {keywords:keywords},
                }).then((ret)=>{
                    // layer.close(loadid);
                    console.log("login res:",ret)
                    if (ret.code != 200){
                        layer.alert(ret.msg);
                        return;
                    }
                    let html = "";
                    ret.data.forEach(order => {
                        html += common.buildHtmlFromTemplate("tpl_order_info",order)
                    });
                    $("#content").html(html);
                    if (html!='') {
                        $(".top_search").removeClass('cs');
                        $(".index_bd").removeClass('index_bg');
                    }
                }).catch((err)=>{
                    // layer.close(loadid);
                    layer.alert(err);
                })
            }
        })


    </script>
{{template "public/footer" .}}
{{end}}