<!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">
    <style type="text/css">
        /*您可以将下列样式写入自己的样式表中*/
        /*layui 元素样式改写*/
        .layui-btn-sm {
            line-height: normal;
            font-size: 12.5px;
        }

        .layui-table-view .layui-table-body {
            min-height: 256px;
        }

        .layui-table-cell .layui-input.layui-unselect {
            height: 30px;
            line-height: 30px;
        }

        /*设置 layui 表格中单元格内容溢出可见样式*/
        .table-overlay .layui-table-view,
        .table-overlay .layui-table-box,
        .table-overlay .layui-table-body {
            overflow: visible;
        }

        .table-overlay .layui-table-cell {
            height: auto;
            overflow: visible;
        }

        .imgStyle {
            padding: 10px;
            width: 80px;
            height: 80px;
        }

        .layui-table-cell {
            font-size: 14px;// table自动换行
            padding: 0 5px;
            height: auto;
            overflow: visible;
            text-overflow: inherit;
            white-space: normal;
            word-break: break-all;
        }
    </style>
</head>
<body>

<div class="layui-tab layui-tab-card">
    <ul class="layui-tab-title">
        <li class="layui-this">资料详情</li>
        <li>图片详情</li>
    </ul>
    <div class="layui-tab-content" style="background-color: #fff;">
        <div class="layui-tab-item layui-show">

            <form class="layui-form" action="" lay-filter="component-form-check">
                <button class="layui-btn" id="id_save_edit" lay-submit lay-filter="component-form-check"
                        style="display: none">保存
                </button>
            </form>
            <form class="layui-form" action="" lay-filter="component-form-check">
                <button class="layui-btn" id="id_save_pass" lay-submit lay-filter="component-form-check"
                        style="display: none">保存
                </button>
            </form>

            <div id="tableRes" class="table-overlay">
                <table id="dataTable" lay-filter="dataTable" class="layui-hide"></table>
            </div>

        </div>
        <div class="layui-tab-item">
            <div id="tableResImage" class="table-overlay">
                <table id="imageTable" lay-filter="imageTable-operate" class="layui-hide"></table>
                <script type="text/html" id="datagrid-operate-bar">
                    {{# for(var i in d.images){ }}
                    <a lay-event="view_{{ i }}" id="image_{{ i }}">
                        <img src="{{ d.images[i] }}" class="imgStyle"/>
                    </a>
                    {{# } }}
                </script>
            </div>

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

<script src="../../layuiadmin/layui/layui.js"></script>

<script>
    layui.config({
        base: '../../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'layer', 'form',], function () {
        var $ = layui.$
            , admin = layui.admin
            , table = layui.table
            , form = layui.form
            , layer = layui.layer;

        var id = layui.view.getParameterByName('id');

        var tbWidth = $("#tableRes").width();
        var layTableId = "layTable";
        var tableIns = table.render({
            elem: '#dataTable',
            id: layTableId,
            data: [],
            width: tbWidth,
            page: false,
            limit: 100,
            loading: true,
            even: true, //不开启隔行背景
            cols: [[
                {title: '序号', type: 'numbers'},
                {field: 'label', title: '名称', width: '15%',},
                {field: 'value', title: '内容', width: '30%',},
                {field: 'edit_time', title: '最后修改时间', width: '15%',},
                {field: 'reason', title: '打回修改原因', edit: 'text', width: '20%',},
            ]]
        });

        var tbImageWidth = $("#tableResImage").width();
        var layTableImageId = "layTableImage";
        var tableImageIns = table.render({
            elem: '#imageTable',
            id: layTableImageId,
            data: [],
            width: tbImageWidth,
            page: false,
            limit: 100,
            loading: true,
            even: true, //不开启隔行背景
            cols: [[
                {title: '序号', type: 'numbers'},
                {field: 'label', title: '名称', width: '15%',},
                {field: 'images', title: '图片', toolbar: '#datagrid-operate-bar', width: '40%',},
                {field: 'edit_time', title: '最后修改时间', width: '15%',},
                {field: 'reason', title: '打回修改原因', edit: 'text', width: '20%',},
            ]]
        });

        admin.req({
            url: '/order/' + id + '/get_detail/',
            done: function (res) {
                if (res.code === 0) {
                    var rows = res.data.order_info;
                    var oldData = table.cache[layTableId];
                    for (var k in rows) {
                        oldData.push(
                            {
                                label: rows[k].label,
                                value: rows[k].value,
                                name: rows[k].name,
                                edit_time: rows[k].edit_time,
                                reason: rows[k].reason,
                                type: rows[k].type,
                            }
                        )
                    }
                    tableIns.reload({
                        data: oldData
                    });

                    var image_rows = res.data.image_info;
                    var oldImageData = table.cache[layTableImageId];
                    for (var i in image_rows) {
                        oldImageData.push(
                            {
                                label: image_rows[i].label,
                                images: image_rows[i].images,
                                name: image_rows[i].name,
                                edit_time: image_rows[i].edit_time,
                                reason: image_rows[i].reason,
                                type: image_rows[i].type,
                            }
                        )
                    }
                    tableImageIns.reload({
                        data: oldImageData
                    });
                }
                else
                    layer.msg('获取内容失败', {icon: 5});
            }
        });

        //监听工具条
        table.on('tool(imageTable-operate)', function (obj) {
            var imgsList = obj.data.images;
            var index = obj.event.split('_')[1]
            var newPage = window.open();
            newPage.document.write("<img src=" + imgsList[index] + " />")
        })
        //保存
        form.on('submit(component-form-check)', function (data) {
            if (data.elem.id === "id_save_pass") {
                admin.req({
                    url: '/order/' + id + '/checkEdit/?statu=1'
                    , data: {items: []}
                    , type: 'post'
                    , done: function (res) {
                        parent.layui.onSubmitPass(res);
                    }
                });
            } else if (data.elem.id === "id_save_edit") {
                var rows = table.cache[layTableId];
                var items = [];
                for (var k in rows) {
                    if (rows[k].reason) {
                        var item = {
                            name: rows[k].name,
                            reason: rows[k].reason,
                            type: rows[k].type,
                        };
                        items.push(item);
                    }
                }
                var image_rows = table.cache[layTableImageId];
                for (var i in image_rows) {
                    if (image_rows[i].reason) {
                        var item2 = {
                            name: image_rows[i].name,
                            reason: image_rows[i].reason,
                            type: image_rows[i].type,
                        };
                        items.push(item2);
                    }
                }

                if (items.length === 0) {
                    layer.msg("请填写退回修改的原因", {icon: 2})
                    return false;
                }
                admin.req({
                    url: '/order/' + id + '/checkEdit/?statu=2'
                    , data: {items: JSON.stringify(items)}
                    , type: 'post'
                    , done: function (res) {
                        parent.layui.onSubmitEdit(res);
                    }
                });
            }

            return false;
        });
        parent.layui.submitEdit = function () {
            $("#id_save_edit").click();
        };
        parent.layui.submitPass = function () {
            $("#id_save_pass").click();
        };
    });

</script>
</body>
</html>
