<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>ElementSync - AppUIAuto</title>
    <link rel="stylesheet" href="./layui/css/layui.css" media="all">
    <link rel="stylesheet" href="./layui/css/soulTable.css" media="all"/>
    <script type="text/javascript" src="./layui/layui.js"></script>
    <script type="text/javascript" src="./layui/clipboard.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-bg-black">ElementSync</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <div class="layui-fluid">
            <div class="layui-row">
                <form class="layui-form layui-form-pane" action="" style="margin-left: 190px;padding: 10px">
                    <div class="layui-form-item">
                        <label class="layui-form-label layui-hide-xs" style="width: 180px">请输入页面对象根目录</label>
                        <div class="layui-input-inline layui-hide-xs" style="width: 45%">
                            <input type="text" name="rootPath" lay-verify="required" placeholder="请输入页面对象根目录"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid" style="padding: 0!important;">
                            <button type="button" class="layui-btn" lay-submit lay-filter="formSubmit">立即同步</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree">
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="#">特殊分组</a>
                    <dl class="layui-nav-child">
                        <dd><a class="pageRequest" href="#"
                               data-param="{&quot;elementType&quot;: &quot;&quot;,&quot;pageID&quot;: &quot;&quot;}">全部数据</a>
                        </dd>
                        <dd><a class="pageRequest" href="#"
                               data-param="{&quot;elementType&quot;: 3,&quot;pageID&quot;: &quot;&quot;}">个人数据</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="#">Py文件读取</a>
                    <dl id="view" class="layui-nav-child"></dl>
                </li>
            </ul>
        </div>
        <script id="itemData" type="text/html">
            {{# layui.each(d, function(index, item){ }}
            <dd><a class="pageRequest" href="#"
                   data-param="{&quot;pageID&quot;: &quot;{{ item.pageID }}&quot;}">{{
                item.pageName }}</a></dd>
            {{# }); }}
            {{# if(d.length === 0){ }}
            <dd><a href="#">未加载到数据</a></dd>
            {{# } }}
        </script>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="margin: 20px">
            <form class="layui-row layui-form layui-form-pane" action="">
                <div class="layui-hide layui-form-item">
                    <input type="text" name="selectType" value="fuzzy">
                </div>
                <div class="layui-col-sm12 layui-form-item">
                    <div class="layui-inline" style="display: inline">
                        <label class="layui-form-label" style="width: 60px;">名称</label>
                        <div class="layui-input-inline" style="width: 12%;">
                            <input type="text" name="elementName" class="layui-input" placeholder="请输入元素名称">
                        </div>
                    </div>
                    <div class="layui-inline" style="display: inline">
                        <label class="layui-form-label" style="width: 90px;">Android</label>
                        <div class="layui-input-inline" style="width: 18%;">
                            <input type="text" name="elementAndroidLocate" class="layui-input"
                                   placeholder="请输入Android定位关键值">
                        </div>
                    </div>
                    <div class="layui-inline" style="display: inline">
                        <label class="layui-form-label" style="width: 60px;">IOS</label>
                        <div class="layui-input-inline" style="width: 18%;">
                            <input type="text" name="elementIOSLocate" class="layui-input" placeholder="请输入IOS定位关键值">
                        </div>
                    </div>
                    <div class="layui-inline" style="display: inline">
                        <label class="layui-form-label" style="width: 60px;">备注</label>
                        <div class="layui-input-inline" style="width: 12%;">
                            <input type="text" name="elementRemark" class="layui-input" placeholder="请输入备注">
                        </div>
                    </div>
                    <div class="layui-inline" style="display: inline">
                        <button type="button" class="layui-btn mgl-20" lay-submit lay-filter="search"><i
                                class="layui-icon">&#xe615;</i>查询
                        </button>
                        <button class="layui-btn layui-btn-primary" type="reset" lay-active="reset">重置</button>
                    </div>
                </div>
            </form>
            <table id="myTable" lay-filter="myTable"></table>
            <script type="text/html" id="expandAll">
                <div class="layui-card" style="margin: 10px;border: 1px solid #f1f2f6;">
                    <div class="layui-card-header" style="background-color: #ced6e0">
                        <h3 style="display: inline">Python代码</h3>
                        <button data-clipboard-target="#{{d.elementName}}" style="display: inline;margin-bottom: 5px;"
                                type="button" class="js-clipboard layui-btn layui-btn-radius layui-btn-primary">
                            一键复制
                        </button>
                    </div>
                    <div id="{{d.elementName}}" class="layui-card-body" style="background-color: #2b2b2b">
                        <h3>
                            # {{d.elementRemark}}<br>
                            <span style="color: #90548c">self</span><span style="color: #a2b1bd">.{{d.elementName}}_locator ={</span><br>
                            {{# if(typeof d.elementAndroidLocate == 'string' && d.elementAndroidLocate.length > 0){ }}
                            <div style="text-indent: 1em"><span style="color: #638655">'Android'</span><span
                                    style="color: #a2b1bd">: {</span></div>
                            <div style="text-indent: 2em"><span style="color: #638655">{{d.elementAndroidLocate}}</span>
                            </div>
                            <div style="text-indent: 1em"><span style="color: #a2b1bd">}</span><span
                                    style="color: #cb7530">,</span></div>
                            {{# } }}
                            {{# if(typeof d.elementIOSLocate == 'string' && d.elementIOSLocate.length > 0){ }}
                            <div style="text-indent: 1em"><span style="color: #638655">'iOS'</span><span
                                    style="color: #a2b1bd">: {</span></div>
                            <div style="text-indent: 2em"><span style="color: #638655">{{d.elementIOSLocate}}</span>
                            </div>
                            <div style="text-indent: 1em"><span style="color: #a2b1bd">}</span></div>
                            {{# } }}
                            <span style="color: #a2b1bd">}</span><br>
                            <span style="color: #90548c">self</span><span style="color: #a2b1bd">.{{d.elementName}} = Element(</span><span
                                style="color: #90548c">self</span><span
                                style="color: #a2b1bd">.d</span><span style="color: #cb7530">,</span> <span
                                style="color: #90548c">self</span><span
                                style="color: #a2b1bd">.{{d.elementName}}_locator)</span><br>
                        </h3>
                    </div>
                </div>
            </script>
            <script type="text/html" id="toolbar">
                <a class="layui-btn layui-btn-sm" lay-event="clearFilter">清除所有筛选条件</a>
                <a class="layui-btn layui-btn-sm" lay-event="addElement">添加</a>
                <a class="layui-btn layui-btn-sm" lay-event="chatGPT">添加</a>
            </script>
            <script type="text/html" id="elementTypeTpl">
                {{# if(d.elementType === 0){ }}
                <div style="background-color: #5FB878;border-radius:5px;text-align: center;color: #ffffff">已保存</div>
                {{# } else if(d.elementType === 1){ }}
                <div style="background-color: #FF5722;border-radius:5px;text-align: center;color: #ffffff">新添加</div>
                {{# } else if(d.elementType === 2){ }}
                <div style="background-color: #FFB800;border-radius:5px;text-align: center;color: #ffffff">被修改</div>
                {{# } else { }}
                <div style="background-color: #2F4056;border-radius:5px;text-align: center;color: #ffffff">未知</div>
                {{# } }}
            </script>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        <div class="layui-layout-right" style="margin-right: 30px">
            作者：张远涛&emsp;&emsp;说明文档：<a href="http://www.baidu.com">http://www.baidu.com</a>
        </div>
    </div>
</div>
<script>
    // 自定义模块，这里只需要开放soulTable即可
    layui.config({
        base: '/layui/modules/',   // 第三方模块所在目录
        version: 'v1.6.4' // 插件版本号
    }).extend({
        soulTable: 'soulTable/soulTable',
        tableChild: 'soulTable/tableChild',
        tableMerge: 'soulTable/tableMerge',
        tableFilter: 'soulTable/tableFilter',
        excel: 'soulTable/excel',
    });

    //JS
    layui.use(['element', 'layer', 'util', 'upload', 'form', 'table', 'soulTable', 'laytpl'], function () {
        const element = layui.element
            , layer = layui.layer
            , util = layui.util
            , upload = layui.upload
            , form = layui.form
            , table = layui.table
            , soulTable = layui.soulTable
            , laytpl = layui.laytpl
            , $ = layui.$;

        let clipboard;
        let elementType = "";
        let pageID = "";

        function menuClick() {
            $(".pageRequest").click(function (data) {
                const param = JSON.parse(data.target.getAttribute("data-param"));
                elementType = param.elementType;
                pageID = param.pageID;
                table.reload('myTable', {
                    where: param
                })
            });
        }

        function flashPages() {
            $.get('/page/all', function (response) {
                const data = response.data;
                const getTpl = itemData.innerHTML
                    , view = document.getElementById('view');
                laytpl(getTpl).render(data, function (html) {
                    view.innerHTML = html;
                });
                menuClick();
                element.render();
            });
        }

        $(function () {
            flashPages();
            clipboard = new ClipboardJS('.js-clipboard');
            clipboard.on('success', function (e) {
                layer.msg('复制成功');
                e.clearSelection();
            });

            clipboard.on('error', function (e) {
                layer.msg('复制失败');
            });
        });

        //提交
        form.on('submit(formSubmit)', function (data) {
            const loading = layer.load(2);
            $.ajax({
                type: 'post',
                url: '/element/sync',
                dataType: 'json',
                data: data.field,
                success: function (res) {
                    layer.close(loading);
                    table.reload('myTable', {
                        where: {
                            elementType: ''
                        }
                    })
                    flashPages();
                    if (res.code == "0") {
                        layer.open({
                            title: '同步结果'
                            , content: '同步成功'
                            , icon: 1
                        });
                    } else {
                        layer.open({
                            title: '同步结果'
                            , content: '同步失败，请检查路径是否正确！'
                            , icon: 2
                        });
                    }
                },
                error: function (errMsg) {
                    layer.close(loading);
                    console.log(errMsg);
                }
            })
            return false;
        });

        form.on('submit(search)', function (data) {
            data.field["elementType"] = elementType;
            data.field["pageID"] = pageID;
            table.reload('myTable', {
                where: data.field
            })
        });

        //处理属性 为 lay-active 的所有元素事件
        util.event('lay-active', {
            reset: function (othis) {
                table.reload('myTable', {
                    where: {
                        elementType: elementType,
                        pageID: pageID
                    }
                })
            }
        });

        table.render({
            elem: '#myTable'
            , id: 'myTable'
            , url: '/element/data'
            , where: {
                elementType: ''
            }
            , height: 'full-200'
            , toolbar: '#toolbar'
            , page: false
            , totalRow: true
            , defaultToolbar: ['filter', 'exports']
            , overflow: {
                type: 'title'
                , hoverTime: 300 // 悬停时间，单位ms, 悬停 hoverTime 后才会显示，默认为 0
                , color: 'black' // 字体颜色
                , bgColor: 'white' // 背景色
            }
            , initSort: {
                field: 'elementType' //排序字段，对应 cols 设定的各字段名
                ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
            }
            , cols: [
                [
                    {title: '#', width: 50, children: '#expandAll', childWidth: 'full'},
                    {
                        field: 'elementType',
                        title: '元素状态',
                        width: 140,
                        sort: true,
                        filter: true,
                        templet: '#elementTypeTpl'
                    },
                    {field: 'elementName', title: '元素名', width: 200, sort: true, filter: true},
                    {field: 'elementAndroidLocate', title: '元素Android端定位值', width: 485, sort: true, filter: true},
                    {field: 'elementIOSLocate', title: '元素IOS端定位值', width: 485, sort: true, filter: true},
                    {field: 'elementRemark', title: '元素备注', width: 300, filter: true},
                    // {field: 'pageID', title: '所属页面ID', width: 200, sort: true, filter: true},
                ]
            ]
            , done: function (data) {
                soulTable.render(this);
            }
        });

        table.on('toolbar(myTable)', function (obj) {
            if (obj.event === 'clearFilter') {
                // 清除所有筛选条件并重载表格
                // 参数: tableId
                soulTable.clearFilter('myTable')
            } else if (obj.event === 'addElement') {
                layer.open({
                    type: 2,
                    area: ['700px', '450px'],
                    fixed: false, //不固定
                    maxmin: true,
                    resizing: false,
                    content: 'addElement',
                    success: function (layero, index) {
                        let iframe = window['layui-layer-iframe' + index];
                        console.log(iframe);
                        // console.log("父组件" + pageID);
                        iframe.child(pageID);
                    }
                });
            } else if (obj.event === 'chatGPT') {
                layer.open({
                    type: 2,
                    area: ['900px', '1000px'],
                    fixed: false, //不固定
                    maxmin: true,
                    resizing: false,
                    content: 'chatGPT'
                });
            }
        });
    });
</script>
</body>
</html>