<?php defined('InShopNC') or exit('Access Invalid!'); ?>
<style>
    input {
        width: 270px;
    }
</style>
<div class="page">
    <!-- 页面导航 -->
    <div class="fixed-bar">
        <div class="item-title">
            <h3><?php echo $output['item_title']; ?></h3>
            <ul class="tab-base">
                <?php foreach ($output['menu'] as $menu) {
                    if ($menu['menu_key'] == $output['menu_key']) { ?>
                        <li><a href="JavaScript:void(0);" class="current"><span><?php echo $menu['menu_name']; ?></span></a>
                        </li>
                    <?php } else { ?>
                        <li>
                            <a href="<?php echo $menu['menu_url']; ?>"><span><?php echo $menu['menu_name']; ?></span></a>
                        </li>
                    <?php }
                } ?>
            </ul>
        </div>
    </div>
    <div class="fixed-empty"></div>
    <form method="post" id="serch_special">
        <input type="hidden" name="form_submit" value="ok">
        <table class="tb-type1 noborder search">
            <tbody>
            <tr style="background: rgb(255, 255, 255);">
                <td>
                    <label>专题ID：<input type="text" name="search_special_id"></label>
                </td>
                <td>
                    <label>专题描述：<input type="text" name="special_desc"></label>
                </td>
                <td>
                    <a href="javascript:void(0);" id="ncsubmit" class="btn-search" title="查询">&nbsp;</a>
                </td>
            </tr>
            </tbody>
        </table>
    </form>
    <script type="text/javascript">
        $(function () {
            $('#ncsubmit').on('click', function () {
                $('#serch_special').submit();
            });
        })
    </script>
    <!-- 帮助 -->
    <table class="table tb-type2" id="prompt">
        <tbody>
        <tr class="space odd">
            <th colspan="12" class="nobg">
                <div class="title nomargin">
                    <h5><?php echo $lang['nc_prompts']; ?></h5>
                    <span class="arrow"></span></div>
            </th>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>点击添加专题按钮可以添加新的专题，专题描述可以点击后直接修改</li>
                    <li>点击编辑按钮对专题内容进行修改</li>
                    <li>点击删除按钮可以删除整个专题</li>
                </ul>
            </td>
        </tr>
        </tbody>
    </table>
    <!-- 列表 -->
    <form id="list_form" method="post">
        <table class="table tb-type2">
            <thead>
            <tr class="space">
                <th colspan="15" class="nobg"><?php echo $lang['nc_list']; ?></th>
            </tr>
            <tr class="thead">
                <th class="center w96">专题编号</th>
                <th class="center w144">专题描述</th>
                <th class="center w400">设置专题搜索关键字和分享图片</th>
                <th class="w200 align-center"><span><?php echo $lang['nc_handle']; ?></span></th>
            </tr>
            </thead>
            <tbody id="treet1">
            <?php if (!empty($output['list']) && is_array($output['list'])) { ?>
                <?php foreach ($output['list'] as $key => $value) { ?>
                    <tr class="hover">
                        <td class="center"><?php echo $value['special_id']; ?></td>
                        <td class="center"><span nc_type="edit_special_desc"
                                                 column_id="<?php echo $value['special_id']; ?>"
                                                 title="<?php echo $lang['nc_editable']; ?>"
                                                 class="alignleft editable tooltip w270"><?php echo $value['special_desc']; ?></span>
                        </td>
                        <td>
                            <div class="share_img left" style="width: 100px;height: 100px;border: 1px solid #c7c7c7;display: flex;">
                                <?php if(empty($value['share_image'])){?>
                                    <img class="dialog_item_image" src="" style="display: none;margin: auto;">
                                <?php }else{?>
                                    <img class="dialog_item_image" style="margin: auto;" src="<?php echo $value['share_image']?>">
                                <?php };?>
                            </div>
                            <div class="floatleft">
                                <input type="hidden" name="special_id" value="<?php echo $value['special_id']; ?>">
                                <span>关键字：</span>
                                <input type="text" name="search_keyword" style="margin-bottom: 10px;" placeholder="添加该专题的搜索关键字"
                                       value="<?php echo $value['keywords']; ?>">
                                <br>
                                <span>封面：</span>
                                <input type="file" name="special_image" style="width: 62px;" data-special-id="<?php echo $value['special_id'];?>" class="btn_upload_image">
                                <input type="hidden" class="dialog_bg_image_name" value="">
                                <span class="progress" style="display: none;"></span>
                                <br>
                                <a class="btn search_keyword" style="margin-top:10px; "><span>添加</span></a>
                            </div>
                        </td>
                        <td class="nowrap align-center">
                            <a target="_blank"
                               href="<?php echo BASE_SITE_URL . "/mobile/index.php?act=special&op=index&special_id={$value['special_id']}&client_type=wap"; ?>">预览</a>&nbsp;|&nbsp;
                            <a href="<?php echo urlAdmin('mb_special', 'special_edit', array('special_id' => $value['special_id'])); ?>">编辑</a>
                            &nbsp;|&nbsp; <a href="javascript:;" nctype="btn_del"
                                             data-special-id="<?php echo $value['special_id']; ?>">删除</a>
                        </td>
                    </tr>
                <?php } ?>
            <?php } else { ?>
                <tr class="no_data">
                    <td colspan="16"><?php echo $lang['nc_no_record']; ?></td>
                </tr>
            <?php } ?>
            <tr style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">
                <td colspan="20"><a id="btn_add_mb_special" href="javascript:;" class="btn-add marginleft">添加专题</a></td>
            </tr>
            </tbody>
            <?php if (!empty($output['list']) && is_array($output['list'])) { ?>
                <tfoot>
                <tr class="tfoot">
                    <td colspan="16">
                        <div class="pagination"> <?php echo $output['page']; ?> </div>
                    </td>
                </tr>
                </tfoot>
            <?php } ?>
        </table>
    </form>
</div>
<form id="del_form" action="<?php echo urlAdmin('mb_special', 'special_del'); ?>" method="post">
    <input type="hidden" id="del_special_id" name="special_id">
</form>
<div id="dialog_add_mb_special" style="display:none;">
    <form id="add_form" method="post" action="<?php echo urlAdmin('mb_special', 'special_save'); ?>">
        <table class="table tb-type2">
            <tbody>
            <tr class="noborder">
                <td colspan="2" class="required"><label class="validation"
                                                        for="special_desc">专题描述<?php echo $lang['nc_colon']; ?></label>
                </td>
            </tr>
            <tr class="noborder">
                <td class="vatop rowform"><input type="text" value="" name="special_desc" class="txt"></td>
                <td class="vatop tips">专题描述，最多20个字</td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="2"><a id="submit" href="javascript:void(0)"
                                   class="btn"><span><?php echo $lang['nc_submit']; ?></span></a></td>
            </tr>
            </tfoot>
        </table>
    </form>
</div>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/js/jquery-ui/jquery.ui.js"></script>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/js/dialog/dialog.js" id="dialog_js"
        charset="utf-8"></script>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/js/jquery.edit.js"></script>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/js/fileupload/jquery.iframe-transport.js" charset="utf-8"></script>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/js/fileupload/jquery.ui.widget.js" charset="utf-8"></script>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/js/fileupload/jquery.fileupload.js" charset="utf-8"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //添加专题
        $('#btn_add_mb_special').on('click', function () {
            $('#dialog_add_mb_special').nc_show_dialog({title: '添加专题'});
        });

        //提交
        $("#submit").click(function () {
            $("#add_form").submit();
        });

        $('#add_form').validate({
            errorPlacement: function (error, element) {
                error.appendTo(element.parents('tr').prev().find('td:first'));
            },
            rules: {
                special_desc: {
                    required: true,
                    maxlength: 20
                }
            },
            messages: {
                special_desc: {
                    required: "专题描述不能为空",
                    maxlength: "专题描述最多20个字"
                }
            }
        });

        //删除专题
        $('[nctype="btn_del"]').on('click', function () {
            if (confirm('确认删除?')) {
                $('#del_special_id').val($(this).attr('data-special-id'));
                $('#del_form').submit();
            }
        });

        //编辑专题描述
        $('span[nc_type="edit_special_desc"]').inline_edit({act: 'mb_special', op: 'update_special_desc'});

        //添加搜索关键字和图片

        $('.search_keyword').on('click', function () {
            var dialog_bg_image_name = $(this).siblings('.dialog_bg_image_name').val();
            var keyword = $(this).siblings('input[name="search_keyword"]').val();
            var special_id = $(this).siblings('input[name="special_id"]').val();
            if (!keyword) {
                alert('请输入关键字');
                return;
            }
            $.post('index.php?act=mb_special&op=search_keyword_cover', {
                cover_img:dialog_bg_image_name,
                keyword: keyword,
                special_id: special_id
            }, function (res) {
                if (res == 200) {
                    alert('提交成功');
                }
            });
        });


        var url_upload_image = '<?php echo urlAdmin('mb_special', 'special_image_upload');?>';
        //图片上传
        $(".btn_upload_image").fileupload({
            dataType: 'json',
            url: url_upload_image,
            formData: {special_id: $(this).attr('data-special-id')},
            add: function (e, data) {
                $(this).siblings('.progress').text('上传中...').show();
                data.submit();
            },
            done: function (e, data) {
                var result = data.result;
                if (typeof result.error === 'undefined') {
                    $(this).siblings('.progress').text('').hide();
                    $(this).parent().siblings('.share_img').children('.dialog_item_image').attr('src', result.image_url);
                    $(this).parent().siblings('.share_img').children('.dialog_item_image').show();
                    $(this).siblings('.dialog_bg_image_name').val(result.image_url);
                } else {
                    showError(result.error);
                }
            }
        });
    })
</script> 
