{extend name="../../admin/view/main"}

{block name="button"}

{if auth("add")}
<button data-open="{:url('add')}" class='layui-btn layui-btn-sm layui-btn-primary'>添加规则</button>
{/if}

{if auth("remove")}
<button data-action='{:url("remove")}' data-rule="id#{key}" data-csrf="{:systoken('remove')}" data-confirm="确定要删除这些规则吗？" class='layui-btn layui-btn-sm layui-btn-primary'>删除规则</button>
{/if}

{/block}

{block name='content'}
<div class="think-box-shadow">
    {include file='keys/index_search'}
    <table class="layui-table margin-top-10" lay-skin="line">
        {notempty name='list'}
        <thead>
        <tr>
            <th class='list-table-check-td think-checkbox'>
                <label><input data-auto-none data-check-target='.list-check-box' type='checkbox'/></label>
            </th>
            <th class='list-table-sort-td'>
                <button type="button" data-reload class="layui-btn layui-btn-xs">刷 新</button>
            </th>
            <th class="text-left nowrap">关键字</th>
            <th class="text-left nowrap">类型</th>
            <th class="text-left nowrap">预览</th>
            <th class="text-left nowrap">添加时间</th>
            <th class="text-left nowrap">状态</th>
            <th></th>
        </tr>
        </thead>
        {/notempty}
        <tbody>
        {foreach $list as $key=>$vo}
        <tr>
            <td class='list-table-check-td think-checkbox'>
                <label><input class="list-check-box" value='{$vo.id}' type='checkbox'/></label>
            </td>
            <td class='list-table-sort-td'>
                <label><input data-action-blur="{:request()->url()}" data-value="id#{$vo.id};action#sort;sort#{value}" data-loading="false" value="{$vo.sort}" class="list-sort-input"></label>
            </td>
            <td class="text-left nowrap">
                {notempty name='vo.qrc'}<i class="fa fa-qrcode fa-lg pointer margin-right-5" data-load="{$vo.qrc}" data-time="false" data-tips-text="生成关键字二维码"></i>{/notempty}
                {$vo.keys}
            </td>
            <td class="text-left nowrap">{$vo.type}</td>
            <td class="text-left nowrap notselect">
                {if $vo.type eq '音乐'}
                <a data-phone-view='{:url("@wechat/api.review/music")}?title={$vo.music_title|urlencode}&desc={$vo.music_desc|urlencode}'>预览 <i class="fa fa-eye"></i></a>
                {elseif in_array($vo.type,['文字','转客服'])}
                <a data-phone-view='{:url("@wechat/api.review/text")}?content={$vo.content|urlencode}'>预览 <i class="fa fa-eye"></i></a>
                {elseif $vo.type eq '图片'}
                <a data-phone-view='{:url("@wechat/api.review/image")}?content={$vo.image_url|urlencode}'>预览 <i class="fa fa-eye"></i></a>
                {elseif $vo.type eq '图文'}
                <a data-phone-view='{:url("@wechat/api.review/news/".$vo.news_id)}'>预览 <i class="fa fa-eye"></i></a>
                {elseif $vo.type eq '视频'}
                <a data-phone-view='{:url("@wechat/api.review/video")}?title={$vo.video_title|urlencode}&desc={$vo.video_desc|urlencode}&url={$vo.video_url|urlencode}'>预览 <i class="fa fa-eye"></i></a>
                {elseif $vo.type eq '语音'}
                <a data-phone-view='{:url("@wechat/api.review/voice")}?content={$vo.voice_url|urlencode}'>预览 <i class="fa fa-eye"></i></a>
                {else}
                {$vo.content}
                {/if}
            </td>
            <td class="text-left nowrap">{$vo.create_at|format_datetime}</td>
            <td class='text-left nowrap'>{if $vo.status eq 0}<span class="color-red">已禁用</span>{elseif $vo.status eq 1}<span class="color-green">使用中</span>{/if}</td>
            <td class='text-left nowrap'>

                {if auth("edit")}
                <a class="layui-btn layui-btn-sm" data-open='{:url("edit")}?id={$vo.id}'>编 辑</a>
                {/if}

                {if $vo.status eq 1 and auth("state")}
                <a class="layui-btn layui-btn-sm layui-btn-warm" data-action="{:url('state')}" data-value="id#{$vo.id};status#0" data-csrf="{:systoken('state')}">禁 用</a>
                {elseif auth("state")}
                <a class="layui-btn layui-btn-sm layui-btn-warm" data-action="{:url('state')}" data-value="id#{$vo.id};status#1" data-csrf="{:systoken('state')}">启 用</a>
                {/if}

                {if auth("remove")}
                <a class="layui-btn layui-btn-sm layui-btn-danger" data-confirm="确定要删除该规则吗？" data-action="{:url('remove')}" data-value="id#{$vo.id}" data-csrf="{:systoken('remove')}">删 除</a>
                {/if}

            </td>
        </tr>
        {/foreach}
        </tbody>
    </table>
    {empty name='list'}<span class="notdata">没有记录哦</span>{else}{$pagehtml|raw|default=''}{/empty}
</div>
{/block}

{block name="script"}
<script>

    $(function () {
        /**
         * 默认类型事件
         * @type String
         */
        $('body').off('change', 'select[name=type]').on('change', 'select[name=type]', function () {
            var value = $(this).val(), $form = $(this).parents('form');
            var $current = $form.find('[data-keys-type="' + value + '"]').removeClass('hide');
            $form.find('[data-keys-type]').not($current).addClass('hide');
            switch (value) {
                case 'news':
                    return $('[name="news_id"]').trigger('change');
                case 'text':
                    return $('[name="content"]').trigger('change');
                case 'image':
                    return $('[name="image_url"]').trigger('change');
                case 'video':
                    return $('[name="video_url"]').trigger('change');
                case 'music':
                    return $('[name="music_url"]').trigger('change');
                case 'voice':
                    return $('[name="voice_url"]').trigger('change');
            }
        });

        function showReview(params) {
            params = params || {};
            $('#phone-preview').attr('src', '{"@wechat/review"|app_url}&' + $.param(params));
        }

        // 图文显示预览
        $('body').off('change', '[name="news_id"]').on('change', '[name="news_id"]', function () {
            showReview({type: 'news', content: this.value});
        });
        // 文字显示预览
        $('body').off('change', '[name="content"]').on('change', '[name="content"]', function () {
            showReview({type: 'text', content: this.value});
        });
        // 图片显示预览
        $('body').off('change', '[name="image_url"]').on('change', '[name="image_url"]', function () {
            showReview({type: 'image', content: this.value});
        });
        // 音乐显示预览
        var musicSelector = '[name="music_url"],[name="music_title"],[name="music_desc"],[name="music_image"]';
        $('body').off('change', musicSelector).on('change', musicSelector, function () {
            var params = {type: 'music'}, $parent = $(this).parents('form');
            params.title = $parent.find('[name="music_title"]').val();
            params.url = $parent.find('[name="music_url"]').val();
            params.image = $parent.find('[name="music_image"]').val();
            params.desc = $parent.find('[name="music_desc"]').val();
            showReview(params);
        });
        // 视频显示预览
        var videoSelector = '[name="video_title"],[name="video_url"],[name="video_desc"]';
        $('body').off('change', videoSelector).on('change', videoSelector, function () {
            var params = {type: 'video'}, $parent = $(this).parents('form');
            params.title = $parent.find('[name="video_title"]').val();
            params.url = $parent.find('[name="video_url"]').val();
            params.desc = $parent.find('[name="video_desc"]').val();
            showReview(params);
        });

        // 默认事件触发
        $('select[name=type]').map(function () {
            $(this).trigger('change');
        });

        /*! 删除关键字 */
        $('[data-delete]').on('click', function () {
            var id = this.getAttribute('data-delete');
            var url = this.getAttribute('data-action');
            var dialogIndex = $.msg.confirm('确定要删除这条记录吗？', function () {
                $.form.load(url, {id: id}, 'post', function (ret) {
                    if (ret.code === "SUCCESS") {
                        window.location.reload();
                    }
                    $.msg.close(dialogIndex);
                });
            })
        });
    });
</script>
{/block}