{extend name="base/header" /}
{block name="body"}
<style>
    .layui-tab-content{ margin-right:15px;}
    .el-cascader{ width:100%;}

</style>
<script src="/static/admin/element/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="/static/admin/element/index.css?v=1">
<!-- 引入组件库 -->
<script src="/static/admin/element/index.js"></script>
<div style="margin: 0px 20px 0px 0px">
    <form class="layui-form " style="margin-top: 20px;" id="fjfrom">

        <div class="layui-form-item">
            <label class="layui-form-label"> 选择分类 </label>
            <div class="layui-input-block">

                <select name="cate_id">
                    <option value="">请选择分类</option>
                    {:$categorydata}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">证书标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" placeholder="证书标题" autocomplete="off" maxlength="200" class="layui-input" value="{$data.title|default=''}">

            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">证书简介</label>
            <div class="layui-input-block">

                <textarea placeholder="请输入证书简介" name="description" class="layui-textarea" maxlength="250">{$data.description|default=''}</textarea>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">证书图片</label>
            <div class="layui-input-block" id="thumb_id">

            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">发放方式</label>
            <div class="layui-input-block">
                <input type="radio" name="ff_type" value="0" title="线上" checked {eq name="$data.ff_type|default=''" value="0"}checked{/eq}>
                <input type="radio" name="ff_type" value="1" title="邮寄" {eq name="$data.ff_type|default=''" value="1"}checked{/eq}>
            </div>
            <div class="layui-form-mid" style="color: #f51212;"><i class="layui-icon"></i> 证书发放方式：线上需要管理员后台上传证书,邮寄需要用户填写收获地址</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">价格</label>
            <div class="layui-input-block">
                <input type="text" name="price" placeholder="请输入价格" autocomplete="off" class="layui-input"
                       value="{$data.price|default='0'}">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">证书标签</label>
            <div class="layui-input-block" id="vueapp">
                <el-cascader
                        @change="handleChange"
                        @visible-change="removeqita"
                        v-model="selectedValue"
                        :options="options"
                        :props="{ multiple: true, checkStrictly: true,emitPath:false }"
                        clearable></el-cascader>

                <input type="hidden" name="tag_ids" id="moretag_ids" class="layui-input" />
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">时间</label>
            <div class="layui-input-inline">
                <input type="text" name="start_time" id="start_time" placeholder="报名开始时间" autocomplete="off" class="layui-input"
                       value="{$data.start_time ? $data.start_time|date='Y-m-d' : ''}">
            </div>

            <div class="layui-input-inline">
                <input type="text" name="end_time" id="end_time" placeholder="报名结束时间" autocomplete="off" class="layui-input"
                       value="{$data.end_time ? $data.end_time|date='Y-m-d' : ''}">
            </div>

        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">适合人群</label>
            <div class="layui-input-block">
                <input type="text" name="shrq" placeholder="请输入适合人群" autocomplete="off" maxlength="220" class="layui-input"
                       value="{$data.shrq|default=''}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">发证机构</label>
            <div class="layui-input-block">
                <input type="text" name="fzjg" placeholder="请输入发证机构" autocomplete="off" maxlength="220" class="layui-input"
                       value="{$data.fzjg|default=''}">
            </div>
        </div>


        <div id="contentup">


        </div>
        <input type="hidden" name="id" value="{$data.id|default=0}">
    </form>
</div>

{/block}
{block name="script"}

<script type="text/javascript">
    layui.use(['tagsInput','buildItems', 'form', 'laydate', 'util'], function () {
        var form = layui.form;
        var inputTags = layui.tagsInput;
        var laydate = layui.laydate;
        // 渲染
        laydate.render({
            elem: '#start_time'
        });
        laydate.render({
            elem: '#end_time'
        });
        /*解析顶部分组选项*/
        var str = [{
            "name": "thumb_id",
            "title": "上传图片",
            "value": "{$data.thumb_id|default=''|get_upload_file}",
            "pathid": "{$data.thumb_id|default=''}",
            "type": "imagewt"
        }];
        layui.buildItems.build({
            fjbid:'fjfrom',
            bid: 'thumb_id',
            url: '',
            map: layui.cache.maps + 'system.upload/',
            gid: 1,
            data: str
        });


        // PHP 内容输出
        var phpContent = "<?= htmlspecialchars($data['content'], ENT_QUOTES, 'UTF-8') ?>";
        phpContent =  phpContent.replace('&quot;', '');

        function removeLastDoubleQuote(str) {
            const index = str.lastIndexOf('&quot;');
            if (index !== -1) {
                return str.slice(0, index) + str.slice(index + 6);
            }
            return str; // 没有双引号时返回原字符串
        }
        phpContent =  removeLastDoubleQuote(phpContent);
        console.log(phpContent);
// 高级解码函数
        function decodePHPContent(encoded) {
            try {
                // 解码 JSON
                let decoded = JSON.parse(encoded);

                // 创建临时容器处理 PHP 标签
                const tempDiv = document.createElement('div');
                tempDiv.innerHTML = decoded;

                // 查找所有代码块
                const codeBlocks = tempDiv.querySelectorAll('pre[class*="brush:"]');

                // 修复 PHP 标签
                codeBlocks.forEach(pre => {
                    pre.innerHTML = pre.innerHTML
                        .replace(/&lt;\?php/g, '<?php')
                        .replace(/\?&gt;/g, '?>')
                        .replace(/&amp;/g, '&')
                        .replace(/&lt;/g, '<')
                        .replace(/&gt;/g, '>');
                });

                return tempDiv.innerHTML;
            } catch (e) {
                console.error('内容解码错误:', e);
                return encoded; // 返回原始内容作为后备
            }
        }
        var editorContent = decodePHPContent(phpContent);
        var str = [{
            "name": "content",
            "title": "文章内容",
            // "value": '{$data.content|default=""}',
            "value": editorContent,
            "type": "ueditor",
            "style": "height:500px",
        }];
        layui.buildItems.build({
            fjbid:'fjfrom',
            bid: 'contentup',
            url: '',
            map: layui.cache.maps + 'system.upload/',
            gid: 1,
            data: str
        });

        layui.buildItems.init();
        form.render();

        $("#inputTags").tagsInput();

    });

    var callbackdata = function () {
        var data = $(".layui-form").serialize();
        return data;
    };


    new Vue({
        el: '#vueapp',
        data: function() {
            return {
                props: { multiple: true },
                selectedValue:[{$data.tag_ids|default=''}],
                options:{:$certtaglist}
                }
        },
        methods: {
            handleChange(value) {
                console.log(value);
                $('#moretag_ids').val(value);
            },
            removeqita(){
                $('.el-cascader__dropdown .layui-form-checkbox').remove();
            },
        }
    })


</script>
{/block}