<!DOCTYPE html>
<html>
<head>
    <title>人脸识别（保税展示跨境商品未支付订单）</title>
    #parse("sys/header.html")
</head>
<body>
<div id="rrapp" v-cloak>
	<div v-show="showList == 0">
        <Row :gutter="16">
            <div class="search-group">
                <i-col span="4">
                    <i-input v-model="q.orderSn" @on-enter="query" placeholder="订单编号"/>
                </i-col>
                <i-button @click="query">查询</i-button>
                <i-button @click="reloadSearch">重置</i-button>
            </div>
        </Row>
	    <table id="jqGrid"></table>
	    <div id="jqGridPager"></div>
    </div>

    <Card v-show="showList == 2">
        <p slot="title">{{title}}</p>
        <i-form ref="formValidate" :model="faceLivenessRecognition" :rules="ruleValidate" :label-width="80">
            <Form-item label="身份证" prop="idCard">
                <i-input type="text" v-model="faceLivenessRecognition.idCard" placeholder="身份证" disabled/>
            </Form-item>
            <Form-item label="姓名" prop="name">
                <i-input type="text" v-model="faceLivenessRecognition.name" placeholder="姓名" disabled/>
            </Form-item>
            <Form-item label="录制视频" prop="videoUrl" >
                <div style="width: 100% !important;">
                    <video src="" width="480" height="320" style="width: 480px !important;height: 320px !important;float: left" controls id="video"></video>
                    <p style="float: left;margin-left: 100px">视频录制成功预览：</p>
                    <div id="outVideo-div" style="border: 1px solid #ccc;width: 480px !important;height: 320px !important;float: left"></div>
                    <div style="border: 1px solid #ccc;width: 480px !important;height: 320px !important;">.</div>
                </div>
                <div style="width: 100% !important;">
                    <!--                <i-button id="rec">开始录制</i-button>-->
                    <!--                <i-button id="camera">拍照</i-button>-->
                    <div id="commentDiv" style="width: 100%;height: 30px;color: red"></div>
                    <div id="showtimes" style="width: 100%;height: 30px;color: red;font-weight: bolder;"></div>
                    <div style="width: 100%;height: 30px;color: red;font-weight: bolder;">点击开始或重新开始录像按钮，自动录像3秒视频上传后台服务，点击提交按钮进行活体人脸识别核验，失败了则重新录像</div>
                    <i-button id="startBtn">开始</i-button>
<!--                    <i-button id="stopBtn">停止</i-button>-->
                    <i-button id="ppBtn">重新开始录像</i-button>
                </div>

                <!--canvs绘制-->
<!--                <canvas width="480" height="320" id="outrec"></canvas>-->
                <!--base64绘制-->
<!--                <img id="imgvideo" style="display:none;" width="640" height="480" src="" />-->
            </Form-item>
            <i-button id="sub" type="primary" @click="handleSubmit('formValidate')">提交</i-button>
            <i-button type="warning" @click="reload" style="margin-left: 8px"/>返回</i-button>
        </i-form>
    </Card>

    <Card v-show="showList == 3">
        <p slot="title">{{title}}</p>
        <i-form ref="formValidate" :model="checkFaceOperator" :rules="ruleValidate" :label-width="120">
            <Form-item label="核验操作类型" prop="idCard">
                {{checkFaceOperator.checkOperatorType==1?'人脸活体识别':'按钮审核身份'}}
            </Form-item>
            <Form-item label="审核会员身份操作人" prop="checkOperatorSn">
                {{checkFaceOperator.checkOperatorSn}}
            </Form-item>
            <Form-item label="审核操作时间" prop="checkOperatorTime">
                {{checkFaceOperator.checkOperatorTime}}
            </Form-item>
            <i-button type="warning" @click="reload" style="margin-left: 8px"/>返回</i-button>
        </i-form>
    </Card>
</div>
<script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script>
<script src="${rc.contextPath}/js/faceid/type10ordernopay.js?_${date.systemTime}"></script>
</body>
</html>
