<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layuiAdmin 网站用户</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>
        .layui-form-radio > i {
            margin-right: 8px !important;
        }

        .layui-form-radio {
            margin-right: 20px !important;
        }

        .layui-form-radioed > .lay-skin-tag {
            color: #fff !important;
            background-color: #16b777 !important;
            border-radius: 100px;
        }

    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body" style="margin-bottom: 30px;">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm abbb" id="langButton">
                    <span style="display: inline-block;width: 45px;">中文</span>
                    <i class="layui-icon layui-icon-down layui-font-12"></i>
                </button>
            </div>
            <table id="table" lay-filter="table"></table>
        </div>
    </div>
</div>
<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>

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

<script>


    layui.config({
        base: '/layuiadmin/'
    }).extend({
        index: 'lib/index'
    }).use(['index', 'table', 'dropdown'], function () {
        const $ = layui.$, table = layui.table, dropdown = layui.dropdown, layer = layui.layer;
        let lang = 'zh';

        table.on('edit(table)', function (obj) {
            let data = obj.data;
            let value = obj.value;
            if (value.replace(/\s/g, '') === '') {
                layer.tips('值不能为空', this, {tips: 1});
                return obj.reedit();
            }

            let lang = aTable.config.where.lang;
            $.ajax({
                url: "{{ route('user.setData') }}",
                method: "post",
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}",
                },
                data: {
                    lang, data
                },
                success(res) {
                    if (res.code !== 0) {
                        layer.alert(res.msg);
                    }
                }
            });
        });
        table.on('tool(table)', (obj) => {
            let event = obj.event, data = obj.data;
            switch (event) {
                case "edit":
                    location.href = `/user/evaluation/edit?id=${data.id}&lang=${lang}`;
                    break;
                case 'cover':
                    layer.photos({
                        toolbar: false,
                        photos: {
                            title: "封面",
                            id: data.id,
                            start: 0,
                            data: [{
                                "alt": `封面${data.id}`,
                                "pid": data.id,
                                "src": data.cover,
                                "thumb": data.cover,
                            }]
                        }
                    });
                    break;
                case "show":
                case "skip":
                    $.ajax({
                        url: "{{ route('user.setData') }}",
                        method: "post",
                        headers: {
                            'X-CSRF-TOKEN': "{{ csrf_token() }}",
                        },
                        data: {
                            id: data.id,
                            [event]: data[event] ? 0 : 1,
                        },
                        success(res) {
                            if (res.code === 0) {
                                obj.update({
                                    [event]: data[event] ? 0 : 1,
                                }, true);
                            } else {
                                layer.alert(res.msg);
                            }
                        }
                    });
                    break;

            }


        });
        table.on('toolbar(table)', (obj) => {
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            var data = checkStatus.data;
            layer.alert(layui.util.escape(JSON.stringify(data)));
        });
        let aTable = table.render({
            elem: '#table',
            url: "{{url('user/data')}}",
            defaultContextmenu: false,
            where: {lang: 'zh'},
            cols: [[
                {field: "name", title: '采集项', width: 100, templet: nameForZh,},
                {
                    field: "cover", title: '封面', width: 100, templet(d) {
                        if (d.cover === '') return '';
                        return `<img lay-event="cover" lay-tips="查看大图" style="height: 30px;object-fit: contain;border: 1px solid rgba(0,0,0,.3);margin-right: 3px; width: 48px;object-fit: cover;" src="${d.cover}" />`;
                    }
                },
                {field: "title", title: '标题', maxWidth: 250},
                {field: 'subTitle', title: '指引语',},
                // {title: "内容", templet: content, width: 200},
                {
                    title: "是否必填", width: 100, templet: (d) => {
                        return (!d.skip) ?
                            `<i lay-event="skip" style="cursor: pointer;font-size: 20px;color:#16BAAA;" class="layui-icon layui-icon-ok"/>`
                            :
                            `<i lay-event="skip" style="cursor: pointer;font-size: 20px;color: #FF5722;" class="layui-icon layui-icon-close"/>`;
                    }
                },
                // {
                //     title: '是否开启', width: 100, templet: (d) => {
                //         return (!d.show) ?
                //             `<i lay-event="show" style="cursor: pointer;font-size: 20px;color: #FF5722;" class="layui-icon layui-icon-close"/>`
                //             :
                //             `<i lay-event="show" style="cursor: pointer;font-size: 20px;color:#16BAAA;" class="layui-icon layui-icon-ok"/>`;
                //     }
                // },
                {title: '操作', width: 100, toolbar: '#toolbar'}
            ]],
            page: false,
            done: function (a) {
                dropdown.render({
                    elem: '.abbb',
                    data: [{id: 'zh', title: '中文'}, {id: 'en', title: 'English'}],
                    click: function (obj) {
                        this.elem.find('span').text(obj.title);
                        lang = obj.id;
                        if (lang !== aTable.config.where.lang) {
                            aTable.config.where.lang = lang;
                            aTable.reloadData({where: {lang: obj.id}});
                        }
                    }
                });
            },
        });

        function nameForZh(d) {
            let zh = {
                name: '姓名',
                sex: '性别',
                birthday: '生日',
                city: '家庭地址',
                occupation: '职业',
                income: '年收入',
                declaration: '恋爱宣言',
                phone: '手机号',
                tags: '标签',
                line: '社交账号',
                video: '视频'
            };
            return zh[d.name];
        }

        function content(d) {
            switch (d.type) {
                case "longText":
                case 'text':
                case "phone":
                case "date":
                    return `<input class="layui-input" readonly>`;
                case 'radio':
                case "checkbox":
                    return radio(d);
                case 'address':
                    if (aTable.config.where.lang === 'zh') {
                        return `<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-disabled">选择</a>`;
                    } else {
                        return `<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-disabled">Choose</a>`;
                    }
                case 'image':
                    if (aTable.config.where.lang === 'zh') {
                        return `<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-disabled">上传</a>`;
                    } else {
                        return `<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-disabled">Upload</a>`;
                    }
                default:
                    return "";

            }
        }

        function radio(data) {
            let title = data.title;
            data = data.data;
            let msg = '';
            for (let i = 0; i < data.length; i++) {
                msg += `<input disabled `;
                if (i === 0) msg += 'checked';
                msg += ` type="radio" name="${title}" value="${data[i]}" title="${data[i]}">`;
            }
            return msg;
        }
    });
</script>
</body>
</html>
