{% extends 'wgcomm/base.html' %}
{% block tail %}
    <script src="static/wgcomm/js/datepicker.js"></script>
    <script src="static/wgcomm/js/wgdatepicker.js"></script>
    {#    <script src="static/wgcomm/js/user-photo.js"></script>#}
{% endblock %}
{% block tail_min %}
    <script src="static/wgcomm/js/datepicker.min.js"></script>
    <script src="static/wgcomm/js/wgdatepicker.min.js"></script>
    {#    <script src="static/wgcomm/js/user-photo.min.js"></script>#}

{% endblock %}
{% block title %}
    Edit User
{% endblock %}

{% block main_content %}
    <!--app-content open-->
    <div class="app-content main-content mt-0">
        <div class="side-app">
            <!-- CONTAINER -->
            <div class="main-container container-fluid">

                <!-- PAGE-HEADER -->
                <div class="page-header">
                    <div>
                        <h1 class="page-title">Edit User</h1>
                    </div>
                    <div class="ms-auto pageheader-btn">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">Configuration</li>
                            <li class="breadcrumb-item"><a href="javascript:void(0);">user</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Edit</li>
                        </ol>
                    </div>
                </div>
                <!-- PAGE-HEADER END -->
                {% with messages = get_flashed_messages() %}
                    {% if messages %}
                        <div class="form-group">
                            <ul>
                                {% for message in messages %}
                                    <li class="text-danger">{{ message }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}
                {% endwith %}

                <!DOCTYPE html>
                <script>
                    // 启动摄像头
                    navigator.mediaDevices.getUserMedia({video: {width: 1280, height: 720}})
                        .then(stream => document.getElementById('video').srcObject = stream);

                    {#function openx() {#}
                    {#  let video = document.querySelector('.video');#}
                    {#      const constraints = {#}
                    {#        video: {#}
                    {#          width: { ideal: 1280 },  // 优先使用1280宽度#}
                    {#          height: { ideal: 720 }   // 优先使用720高度#}
                    {#        }#}
                    {#      };#}
                    {#      let isok = navigator.mediaDevices.getUserMedia(constraints); //这里主要是用于请求user打Open摄像头的Privilege#}
                    {#      isok.then(res => {     //可以看Exit是使用promise封装的 那么我们就可以使用then和catch#}
                    {#          video.srcObject = res;    //user允许时 将摄像头对象的画面转移Tovideo上面#}
                    {#          video.play();                //打Openvideo的画面#}
                    {#      }).catch((err) => {#}
                    {#          console.log(err)            //拒绝时Print错误信息#}
                    {#      })#}
                    {#  }#}

                    function pho() {
                        let video = document.querySelector('.video');
                        let canvas = document.querySelector('canvas');
                        // Configuration目标尺寸
                        canvas.width = 295;
                        canvas.height = 413;
                        // 计算裁剪区域（保持1:1.4比例）
                        const srcRatio = video.videoWidth / video.videoHeight;
                        const targetRatio = 295 / 413; // ≈0.714
                        let sx, sy, sw, sh;

                        if (srcRatio > targetRatio) {
                            // 裁剪宽度
                            sw = video.videoHeight * targetRatio;
                            sh = video.videoHeight;
                            sx = (video.videoWidth - sw) / 2;
                            sy = 0;
                        } else {
                            // 裁剪高度
                            sh = video.videoWidth / targetRatio;
                            sw = video.videoWidth;
                            sx = 0;
                            sy = (video.videoHeight - sh) / 2;
                        }

                        canvas.getContext("2d").drawImage(video, sx, sy, sw, sh, 0, 0, 295, 413);   //第一Unit参数为要截取的dom对象，第二Unit和第三Unit为xy轴的偏移值    3-4为截取图像的大小
                        {#document.getElementById('imageDisplay').src = canvas.toDataURL();#}
                        document.getElementById('f_photostr').value = canvas.toDataURL('image/jpeg', 0.85);
                        document.getElementById('submitsave').hidden = 0;
                    }

                    //function exit() {
                    //        let video = document.querySelector('.video');
                    //    video.srcObject.getTracks()[0].stop();   //这里如果打Open了麦克风、getTracks是一Unit数组，我们同样需要获取下标[1]来Close摄像头 打Open麦克风[0]就是麦克风
                    //}

                </script>

                <!--ROW OPENED-->
                <div class="row">
                    <div class="col-lg-12 col-md-12">
                        <div class="card">
                            {#                                     <button  class="btn btn-primary"  onclick="openx()">调用摄像头</button>#}
                            <button class="btn btn-primary" onclick="pho()">photo</button>
                            {#                                    <button  class="btn btn-primary"  onclick="exit()">Close摄像头</button>#}
                            <form action="{{ url_for('wgcomm.web_user_captureface') }}" method="post"
                                  enctype="multipart/form-data">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                {{ wgform._csrf }}
                                <div class="row p-5">
                                    <div class="btn-list text-end">
                                        <button id="submitcancel" name="submitcancel" class="btn btn-outline-danger"
                                                type="submit" value="Cancel">
                                            <i class="fe fe-x-circle"></i>
                                            Cancel
                                        </button>
                                        <button id="submitsave" name="submitsave" class="btn btn-primary" type="submit"
                                                value="Save" hidden="hidden">
                                            <i class="fe fe-check-circle"></i>
                                            Save
                                        </button>
                                        {#                                        <button id="submitsave" name="submitsaveandadd" class="btn btn-primary"#}
                                        {#                                                type="submit" value="Save And Continue">#}
                                        {#                                            <i class="fe fe-check-square"></i>#}
                                        {#                                            Save And Continue#}
                                        {#                                        </button>#}
                                    </div>
                                </div>
                                <div class="card-body">
                                    <input type="hidden" name="f_ConsumerID" value="{{ wgform.f_ConsumerID.data }}">
                                    <div class="form-group">
                                        {{ wgform.f_ConsumerNO.label }}:
                                        {{ wgform.f_ConsumerNO.data }}
                                        <div hidden="hidden">{{ wgform.f_ConsumerNO( class="form-control") }}</div>

                                        {{ wgform.f_ConsumerName.label }}:
                                        {{ wgform.f_ConsumerName.data }}
                                        <div hidden="hidden">{{ wgform.f_ConsumerName( class="form-control") }}</div>

                                        {{ wgform.f_CardNO.label }}:
                                        {{ wgform.f_CardNO.data }}
                                        <div hidden="hidden">{{ wgform.f_CardNO( class="form-control") }}</div>
                                    </div>
                                    <div>
                                        <video width="500" height="500" autoplay class="video" id="video"></video>
                                        <canvas width="500" height="500"></canvas>
                                    </div>
                                    <div hidden>
                                        <a href="#"><img src="" alt="" id="imageDisplay"></a>
                                        {{ wgform.f_photostr( class="form-control") }}
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>
                    <!--ROW CLOSED-->
                </div>
            </div>
        </div>
    </div>
    <!-- CONTAINER CLOSED -->
{% endblock %}
