<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-block">
                        <input type="text" name="email" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-user-front-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <div style="padding-bottom: 10px;">
                <table id="LAY-user-manage" lay-filter="LAY-user-manage"></table>
            </div>
        </div>
    </div>
</div>
@verbatim
    <script type="text/html" id="user">
        <div style="height: 100%;display: flex;">
            <div style="height: 100%;">
                <img style="max-width: 100%;max-height: 100%;" src="{{d.user.avatar_url}}"/>
            </div>
            <div style="padding-left: 8px;">
                <span>{{d.user.username}}</span>
            </div>
        </div>

    </script>
    <script type="text/html" id="status">
        {{#  if(d.status == 0 ){ }}
        <span>未支付</span>
        {{#  } else { }}
        <span>已支付</span>
        {{#  } }}
    </script>
@endverbatim

<script src="/layuiadmin/layui/layui.js"></script>
<script src="/static/js/alpha_2.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/'
    }).extend({
        index: 'lib/index'
    }).use(['index', 'form', 'table', 'layer'], function () {
        const $ = layui.$, form = layui.form, table = layui.table, layer = layui.layer;


        let tableList = table.render({
            elem: '#LAY-user-manage',
            url: "{{url('wallet/getOrders')}}",
            // toolbar: true,
            // defaultToolbar: ['filter'],
            cols: [[
                {field: 'user', title: '用户', templet: "#user"},
                {field: 'order_no', title: '订单号'},
                {field: 'product_id', title: '产品ID'},
                {field: 'price', title: '价格'},
                {field: "wallet", title: "充值金额"},
                {field: "updated_at", title: '更新时间'},
                {field: "status", title: "状态", templet: "#status"},
            ]],
            page: true,
            limit: 50,
            limits: [50, 100, 200, 300],
            where: {lang: 'zh-CN'},
            height: 'full-137',
            text: {none: '无数据'},
            parseData(res) {
                return {
                    code: res.data.code,
                    msg: res.data.msg,
                    count: res.data.count,
                    data: res.data.data
                };
            }
        });

        table.on('tool(LAY-user-manage)', function (obj) {
            switch (obj.event) {
                case "buy":
                    layer.prompt({
                        title: "钱包余额充值",
                        formType: 0,
                        placeholder: '请输入要充值的金额'
                    }, (value, index, elem) => {
                        const priceRegex = /^\d+(\.\d{1,2})?$/;
                        if (!priceRegex.test(value)) return false;
                        if (parseInt(value) === 0) return false;

                        $.ajax({
                            url: "{{ route('user.buyWallet') }}",
                            method: 'post',
                            headers: {'X-CSRF-TOKEN': "{{ csrf_token() }}"},
                            data: {userId: obj.data.id, wallet: value},
                            success(res) {
                                if (res.code === 0) {
                                    tableList.reloadData();
                                    layer.close(index);
                                } else {
                                    layer.msg(res.msg);
                                }
                            }
                        });
                    });
                    break;
                case "video":
                    let src = obj.data.video;
                    let deo = document.createElement('video');
                    deo.src = src;
                    deo.onloadedmetadata = function () {
                        let videoWidth = deo.videoWidth;
                        let videoHeight = deo.videoHeight;
                        let maxWidth = 800;
                        let maxHeight = 600;
                        if (videoWidth > maxWidth) {
                            let scale = maxWidth / videoWidth;
                            videoWidth = maxWidth;
                            videoHeight = videoHeight * scale;
                        }
                        if (videoHeight > maxHeight) {
                            let scale = maxHeight / videoHeight;
                            videoHeight = maxHeight;
                            videoWidth = videoWidth * scale;
                        }
                        layer.open({
                            type: 2,
                            title: false,
                            area: [`${videoWidth}px`, `${videoHeight}px`],
                            shade: 0.8,
                            closeBtn: 0,
                            shadeClose: true,
                            content: src, // video 地址
                        });

                    };
                    break;
                case "mp4":
                    let url = obj.data.photo[0];
                    let video = document.createElement('video');
                    video.src = url;
                    video.onloadedmetadata = function () {
                        let videoWidth = video.videoWidth;
                        let videoHeight = video.videoHeight;
                        let maxWidth = 800;
                        let maxHeight = 600;
                        if (videoWidth > maxWidth) {
                            let scale = maxWidth / videoWidth;
                            videoWidth = maxWidth;
                            videoHeight = videoHeight * scale;
                        }
                        if (videoHeight > maxHeight) {
                            let scale = maxHeight / videoHeight;
                            videoHeight = maxHeight;
                            videoWidth = videoWidth * scale;
                        }

                        layer.open({
                            type: 2,
                            title: false,
                            area: [`${videoWidth}px`, `${videoHeight}px`],
                            shade: 0.8,
                            closeBtn: 0,
                            shadeClose: true,
                            content: url, // video 地址

                        });
                    };


                    layer.msg('点击遮罩区域可关闭');
                    break;
                case "img":
                    let start = this.dataset.index - 1;
                    let data = [];
                    for (let i = 1; i < obj.data.photo.length; i++) {
                        if (obj.data.photo[i]) {
                            data.push({
                                "alt": `个人自拍_${i}`,
                                "pid": (i - 1),
                                "src": obj.data.photo[i],
                                "thumb": obj.data.photo[i],
                            });
                        }
                    }
                    layer.photos({
                        toolbar: false,
                        photos: {
                            title: "个人自拍",
                            id: obj.data.id,
                            start: start,
                            data: data
                        }
                    });
                    break;
            }

            console.log(this.src);
            // console.log(obj)
        });

        form.on('submit(LAY-user-front-search)', function (data) {
            let field = data.field;
            table.reload('LAY-user-manage', {
                where: field
            });
        });
    });
</script>
</body>
</html>
