{$layout}
{$template "../menu"}
<!-- {$template "menu"} -->

{$var "header"}
<link href="/js/quill/quill.snow.css" rel="stylesheet">
<script src="/js/quill/quill.min.js"></script>
{$end}

<form class="ui form" data-tea-action="$" data-tea-success="success">
    <csrf-token></csrf-token>
    <input type="hidden" name="body" v-model="body"/>
    
    <div class="config-section">
        <div class="section-title">{{t('创建新文章')}}</div>
        
        <div class="config-item">
            <div class="item-label">{{t('所属产品')}} *</div>
            <div class="item-content">
                <b-select
                    name="productCode"
                    v-model="productCode"
                    auto-width
                    :options="[
                        {label: t('所属产品'), value: ''},
                        ...products.map(product => ({
                            label: product.name,
                            value: product.code,
                        }))
                    ]"
                ></b-select>
            </div>
        </div>
        
        <div class="config-item">
            <div class="item-label">{{t('文章分类')}} *</div>
            <div class="item-content">
                <b-select
                    name="categoryId"
                    v-model="categoryId"
                    auto-width
                    :options="[
                        {label: t('选择分类'), value: '0'},
                        ...categories.map(category => ({
                            label: category.name,
                            value: category.id,
                        }))
                    ]"
                ></b-select>
            </div>
        </div>
        
        <div class="config-item">
            <div class="item-label">{{t('文章标题')}} *</div>
            <div class="item-content">
                <input type="text" name="subject" ref="focus" :placeholder="t('请输入文章标题')"/>
            </div>
        </div>
        
        <div class="config-item">
            <div class="item-label">{{t('文章类型')}} *</div>
            <div class="item-content">
                <b-select
                    name="type"
                    v-model="type"
                    auto-width
                    :options="[
                        {label: t('常规'), value: 'normal'},
                        {label: t('URL'), value: 'url'},
                    ]"
                ></b-select>
            </div>
        </div>
        
        <div class="config-item" v-show="type == 'url'">
            <div class="item-label">{{t('URL')}} *</div>
            <div class="item-content">
                <input type="text" name="url" maxlength="200" :placeholder="t('请输入文章对应的URL地址')"/>
            </div>
        </div>
        
        <div class="config-item" v-show="type == 'normal'">
            <div class="item-label">{{t('内容')}} *</div>
            <div class="item-content">
                <div id="editor" style="min-height: 20em;"></div>
            </div>
        </div>
    </div>
    
    <div class="margin"></div>
    <submit-btn></submit-btn>
</form>