{extend name="index_layout"/}
{block name="main"}
<style>
.broadcast-form-wrap{max-width:980px;margin:0 auto;}
.broadcast-form-wrap .layui-card{box-shadow:none;border:1px solid #f2f2f2;border-radius:6px;}
.broadcast-form-wrap .layui-card-body{padding:22px 26px;}
.broadcast-tabs{margin-bottom:18px;}
.broadcast-section{margin-bottom:18px;border:1px solid #f2f2f2;border-radius:6px;background:#fafafa;}
.broadcast-section-title{padding:14px 18px;font-size:15px;font-weight:600;color:#333;border-bottom:1px solid #f0f0f0;background:#fff;}
.broadcast-section-body{padding:18px;}
.broadcast-form-wrap .layui-form-label{width:110px;}
.broadcast-form-wrap .layui-input-block{margin-left:140px;}
.broadcast-form-wrap .layui-form-pane .layui-form-checkbox{margin-top:0;}
.broadcast-check-group{padding:10px 15px;min-height:38px;line-height:30px;background:#fff;border:1px solid #e6e6e6;border-radius:2px;}
.broadcast-inline-note{margin-top:8px;color:#999;font-size:12px;}
.broadcast-footer{padding-top:8px;}
.broadcast-tips{padding:12px 14px;background:#fff;border:1px dashed #e6e6e6;border-radius:4px;color:#666;line-height:1.8;}
@media (max-width: 992px){
  .broadcast-form-wrap .layui-form-label{width:100px;}
  .broadcast-form-wrap .layui-input-block{margin-left:130px;}
}
</style>
<div class="layui-fluid broadcast-form-wrap">
  <div class="layui-card">
    <div class="layui-card-body">
      <form id="broadcastForm" class="layui-form layui-form-pane" method="post" action="">
        {:token_field()}

        <div class="broadcast-section">
          <div class="broadcast-section-title">基础信息</div>
          <div class="broadcast-section-body">
            <div class="layui-row layui-col-space16">
              <div class="layui-col-md6">
                <div class="layui-form-item">
                  <label class="layui-form-label">任务名称</label>
                  <div class="layui-input-block">
                    <input type="text" name="row[name]" required lay-verify="required" placeholder="请输入群发任务名称" autocomplete="off" class="layui-input">
                  </div>
                </div>
              </div>
              <div class="layui-col-md3">
                <div class="layui-form-item">
                  <label class="layui-form-label">语言</label>
                  <div class="layui-input-block">
                    <select name="row[lang]" lay-filter="broadcast-lang">
                      {volist name="langList" id="lang"}
                      <option value="{$lang.mark}" {if condition="$defaultLang eq $lang.mark"}selected{/if}>{$lang.name} ({$lang.mark})</option>
                      {/volist}
                    </select>
                  </div>
                </div>
              </div>
              <div class="layui-col-md3">
                <div class="layui-form-item">
                  <label class="layui-form-label">来源标识</label>
                  <div class="layui-input-block">
                    <input type="text" name="row[source_key]" placeholder="可选，如 footer" autocomplete="off" class="layui-input">
                  </div>
                </div>
              </div>
              <div class="layui-col-md6">
                <div class="layui-form-item">
                  <label class="layui-form-label">邮件模板</label>
                  <div class="layui-input-block">
                    <select name="row[template_id]" required lay-verify="required">
                      <option value="">请选择模板</option>
                      {volist name="templateList" id="tpl"}
                      <option value="{$tpl.id}" data-lang="{$tpl.lang}">{$tpl.name} / {$tpl.lang}</option>
                      {/volist}
                    </select>
                  </div>
                </div>
              </div>
              <div class="layui-col-md6">
                <div class="layui-form-item">
                  <label class="layui-form-label">任务备注</label>
                  <div class="layui-input-block">
                    <input type="text" name="row[remark]" placeholder="可记录本次营销主题、活动说明等" autocomplete="off" class="layui-input">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="broadcast-section">
          <div class="broadcast-section-title">筛选条件</div>
          <div class="broadcast-section-body">
            <div class="layui-row layui-col-space16">
              <div class="layui-col-md4">
                <div class="layui-form-item">
                  <label class="layui-form-label">订阅状态</label>
                  <div class="layui-input-block">
                    <div class="broadcast-check-group">
                      <input type="checkbox" name="row[status_filter][]" value="1" title="已订阅" checked>
                      <input type="checkbox" name="row[status_filter][]" value="0" title="已取消">
                      <input type="checkbox" name="row[status_filter][]" value="9" title="用户退订">
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-col-md4">
                <div class="layui-form-item">
                  <label class="layui-form-label">确认状态</label>
                  <div class="layui-input-block">
                    <div class="broadcast-check-group">
                      <input type="checkbox" name="row[confirm_status_filter][]" value="1" title="已确认" checked>
                      <input type="checkbox" name="row[confirm_status_filter][]" value="0" title="未确认" checked>
                    </div>
                    <div class="broadcast-inline-note">默认包含已确认和未确认订阅用户，避免因确认状态筛空名单。</div>
                  </div>
                </div>
              </div>
              <div class="layui-col-md4">
                <div class="layui-form-item">
                  <label class="layui-form-label">最近发送</label>
                  <div class="layui-input-block">
                    <div class="broadcast-check-group">
                      <input type="checkbox" name="row[last_send_status_filter][]" value="0" title="未发送" checked>
                      <input type="checkbox" name="row[last_send_status_filter][]" value="1" title="成功" checked>
                      <input type="checkbox" name="row[last_send_status_filter][]" value="2" title="失败" checked>
                    </div>
                    <div class="broadcast-inline-note">默认包含全部最近发送状态，避免误筛掉订阅用户。</div>
                  </div>
                </div>
              </div>
              <div class="layui-col-md12">
                <div class="layui-form-item">
                  <label class="layui-form-label">去重规则</label>
                  <div class="layui-input-block">
                    <div class="broadcast-check-group">
                      <input type="checkbox" name="row[exclude_sent]" value="1" title="排除已发送过 marketing_broadcast 的订阅用户" checked>
                      <input type="checkbox" name="row[allow_user_unsubscribed]" value="1" title="允许包含“用户退订”状态（默认不发送）">
                    </div>
                    <div class="broadcast-inline-note">默认不会给“用户退订”状态发送营销邮件；仅在特殊场景手动勾选后才允许包含。</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="broadcast-section">
          <div class="broadcast-section-title">说明</div>
          <div class="broadcast-section-body">
            <div class="broadcast-tips">
              模板中可使用变量：{{email}}、{{lang}}、{{broadcast_name}}、{{broadcast_id}}、{{template_name}}。<br>
              保存任务后不会立即发送，需要回到“营销群发”列表手动点击“执行发送”。
            </div>
          </div>
        </div>

        <div class="layui-form-item broadcast-footer">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit>保存任务</button>
            <a class="layui-btn layui-btn-primary" href="{:url('Emailbroadcast/index')}">返回列表</a>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
{/block}