{include file="default/base/seller_top" /} 
<link rel="stylesheet" href="{$Think.PLUGINS_SITE_ROOT}/calendarpirce/css/calendar-price-jquery.min.css">
<script src="{$Think.PLUGINS_SITE_ROOT}/calendarpirce/js/calendar-price-jquery.min.js"></script>
<style type="text/css">
    .container{width: 100%}
    .calendarpirce .calendar-foot-wrapper{ display: flex;}
    .calendarpirce .btn-cancel{display: none!important;}
    .calendarpirce .cddsw-form-wrapper li{ padding:10px 0 }
</style>
<div class="seller_main">
{include file="default/base/seller_left" /}
<div class="seller_right">

    <div class="seller_items">
        {include file="default/base/seller_items" /}
    </div>

    <div class="item-publish p20">
      <form method="post" id="goods_form" action="{:url('Sellergoodsonline/edit_goods_sku')}">
        <input type="hidden" name="gid" value="{$goods.goods_id}" />
        <div class="dssc-form-goods">
          
            <dl>
                <dt><i class="required">*</i>商品名称：</dt>
                <dd>
                    <input type="text" class="text w400" name="g_name" id="g_name" value="{$goods.goods_name}" />
                    <p class="hint">{$Think.lang.sort_number_value}</p>
                </dd>
            </dl>

            <dl>
                <dt><i class="required">*</i>价格日期选择：</dt>
                <dd>
                    <a class="dssc-btn" href="javascript:void(0);" dstype="add_virtual">价格设置</a>
                    <input name="virtual_list" type="hidden" value="">
                </dd>
            <dl>

            <!-- <dl>
                <dt><i class="required">*</i>价格日期选择：</dt>
                <dd class="calendarpirce">
                    <div class="container"></div>
                    <input name="virtual_list" type="hidden" value="">
                </dd>
            <dl> -->
                
            </dl>
            <dl>
                <dt>退改说明：</dt>
                <dd>
                  <textarea name="g_advword" class="textarea h60 w400">{$goods.goods_advword|default=''}</textarea>
                  <span></span>
                  <p class="hint"></p>
                </dd>
            </dl>

            <dl>
                <dt>套餐详情{$Think.lang.ds_colon}</dt>
                <dd id="dsProductDetails">
                  <div class="tabs">
                    <div id="panel-1" class="ui-tabs-panel">
                        {:build_editor(['name'=>'virtual_content','content'=>htmlspecialchars_decode($goods.virtual_content),'url'=>$ajaxUrl])}
                        <textarea name="virtual_content" id="virtual_content"></textarea>
                        <p id="des_demo"></p>
                    </div>
                  </div>
                </dd>
            </dl>
        </div>
        <div class="bottom tc hr32 desc-btn">
            <input type="submit" class="submit dssc-btn" style="display:inline-block;" value="{$Think.lang.ds_submit}" />
            <a href="javascript:history.back(-1)" style="width: 130px;height:30px;line-height: 30px;margin-bottom: 10px; display:inline-block;"  class="dssc-btn mt10 f14">返回</a>
        </div>
      </form>
    </div>

</div>
</div>
<script src="{$Think.PLUGINS_SITE_ROOT}/jquery.ajaxContent.pack.js"></script>
<script src="{$Think.PLUGINS_SITE_ROOT}/mlselection.js"></script>
<script type="text/javascript" src="{$Think.PLUGINS_SITE_ROOT}/js/fileupload/jquery.iframe-transport.js" charset="utf-8"></script>
<script type="text/javascript" src="{$Think.PLUGINS_SITE_ROOT}/js/fileupload/jquery.ui.widget.js" charset="utf-8"></script>
<script type="text/javascript" src="{$Think.PLUGINS_SITE_ROOT}/js/fileupload/jquery.fileupload.js" charset="utf-8"></script>

<script src="{$Think.PLUGINS_SITE_ROOT}/jquery.mousewheel.js"></script>
<script type="text/javascript" src="{$Think.PLUGINS_SITE_ROOT}/jquery.charCount.js"></script>


<!--[if lt IE 8]>
  <script src="{$Think.BASE_SITE_ROOT}/js/json2.js"></script>
<![endif]-->
<script src="{$Think.HOME_SITE_ROOT}/js/sellergoods_add_step2.js"></script>
<script>


var mockData = JSON.parse('{$goods.virtual_list|raw}');

$(function(){

    $('a[dstype="add_virtual"]').click(function () {
        var _html = value ='';
        _html+='<div class="card-wrapper">';
        _html+='<div class="card-notice">价格日历设置区间为：今天——{$goods.virtual_indate|date="Y-m-d"}</div>';
        _html+='<div class="calendarpirce"><div class="container"></div></div>';
        //_html+='<div class="bottom"><input type="button" class="submit" value="确定" onclick="virtual()"></div>';
        _html+='</div>';
        html_form('addVirtual', '价格设置', _html, 780, 1);
        setVirtual();
    });


    $('#goods_form').validate({
        submitHandler:function(form){
            ds_ajaxpost('goods_form','default');
        },
        rules : {
            g_name : {
                required    : true,
                minlength   : 3,
                maxlength   : 50
            },
            g_storage  : {
                digits      : true,
                min         : 0,
                max         : 999999999
            },

        },
        messages : {
            g_name  : {
                required    : '<i class="iconfont">&#xe64c;</i>{$Think.lang.store_goods_index_goods_name_null}',
                minlength   : '<i class="iconfont">&#xe64c;</i>{$Think.lang.store_goods_index_goods_name_help}',
                maxlength   : '<i class="iconfont">&#xe64c;</i>{$Think.lang.store_goods_index_goods_name_help}'
            },
            g_storage : {
                digits      : '<i class="iconfont">&#xe64c;</i>{$Think.lang.store_goods_index_goods_stock_error}',
                min         : '<i class="iconfont">&#xe64c;</i>{$Think.lang.store_goods_index_goods_stock_checking}',
                max         : '<i class="iconfont">&#xe64c;</i>{$Think.lang.store_goods_index_goods_stock_checking}'
            },
        }
    });

});

  
 /**
 * 日历设置弹窗中输入框配置
 * key：输入框对应的key；
 * name：输入框的名称；
 * type：输入框的类型；
 * placeholder：输入框的提示信息；
 * editable：是否可编辑，默认true；
 * disabled：是否禁用不显示
 */
function setVirtual(){
    
    var calendarConfig = [
      {
        key: 'goods_price',
        name: '销售价',
        type: 'text',
        placeholder: '请输入'
      },
      {
        key: 'goods_stock',
        name: '库存',
        type: 'number',
        placeholder: '请输入库存'
      },
    ]
  
    /**
     * 数据在日历中的展现配置
     * key：与日历设置弹窗中输入框配置的key对应
     * name：显示在日历中的名称(例如：name为库存，key为stock的输入值为100时，最终展现在日历中的是-库存100)
     */
    var showConfig = [
      { key: 'goods_price', name: '价格:￥' },
      { key: 'goods_stock', name: '库存:' },
    ]
  
    var zxCalendar = $.CalendarPrice({
      el: '.container',
      // startDate: '2017-08-02',// 设置开始日期，可选参数，默认为系统当前日期
      endDate:"{$goods.virtual_indate|date='Y-m'}" , // 设置日历显示结束日期，可选参数，默认为开始日期相同的1年后的日期
      data: mockData,// 初始数据
      config: calendarConfig,// 配置需要设置的字段名称，请与你传入的数据对象对应
      show: showConfig,// 配置在日历中要显示的字段
      style: {}
    });

    // 监听设置表单提交
    // 将阻止默认流程执行
    // 继续执行默认流程，请执行参数next()
    zxCalendar.$on('submit-form', function (data, next) {
      // data 设置的数据
      //console.log('$(submit-form)表单数据 ================', data)
      const formData = data.formData

      // 继续执行下一步
      next()
    })

    // 设置数据变化
    zxCalendar.$on('setup-value-change', function (data) {
      //console.log('$on(setup-value-change)设置窗口被修改数据....', data);
      // 取消设置
      // 这里可以触发关闭设置窗口
    })

    // 点击确定按钮回调，返回当前设置数据
    zxCalendar.$on('confirm', function (data) {

        mockData = data;

        const dateArr = JSON.stringify(data);
        //console.log('$on(confirm)点击确定按钮通知！', dateArr);
        $('input[name="virtual_list"]').val(dateArr);
        DialogManager.close('addVirtual');
    })

    // 点击取消按钮回调
    zxCalendar.$on('cancel', function () {
      //console.log('$on(cancel)取消设置 ....');
    })
}


</script>


{include file="default/base/mall_footer" /}