<div class="form-item clearfix">
    <label class="form-label form-required">活动名称：</label>
    <div class="form-content"><input class="input" placeholder="请填写活动名称" value="<%:name{required:true,blength:[20,50]}%>" /></div>
</div>

<div class="form-item clearfix">
    <label class="form-label">色彩：</label>
    <div class="form-content"><input mx-view="app/gallery/mx-color/picker" class="input" /></div>
</div>

<div class="form-item">
    <label class="form-label form-required">活动时间：</label>
    <div class="form-content">
        <mx-view path="app/gallery/mx-dropdown/index"
            searchbox="true"
            empty-text="请选择日期"
            selected="<%:day{required:true}%>" style="width:180px;">
            <item value="mon">周一</item>
            <item value="wed">周三</item>
            <item value="thu">周四</item>
            <item value="fri">周五</item>
            <item value="sat">周六</item>
        </mx-view>
        <span class="ib ml5 mr5">-</span>
        <input class="input" style="width:145px" placeholder="请选择时间" value="<%:time{required:true}%>" mx-view="app/gallery/mx-time/picker" />
    </div>
</div>

<div class="form-item">
    <label class="form-label form-required">标签：</label>
    <div class="form-content">
        <mx-view path="app/gallery/mx-taginput/index"
            list="<%@list%>"
            placeholder="请选择标签"
            selected="<%:tags{required:true}%>"
        ></mx-view>
    </div>
</div>
<div class="form-item">
    <label class="form-label">checkbox：</label>
    <div class="form-content">
        <label class="mr10">
            <mx-input type="checkbox" <%:checkbox%> name="cb" value="c1" class="checkbox" />c1
        </label>
        <label class="mr10">
            <mx-input type="checkbox" <%:checkbox%> name="cb" value="c2" class="checkbox" />c2
        </label>
        <label class="mr10">
            <mx-input type="checkbox" <%:checkbox%> name="cb" value="c3" class="checkbox" />c3
        </label>
        <label class="mr10">
            <mx-input type="checkbox" <%:checkbox%> name="cb" value="c4" class="checkbox" />c4
        </label>
    </div>
</div>
<div class="form-item">
    <label class="form-label">radio：</label>
    <div class="form-content">
        <label class="mr10">
            <mx-input type="radio" <%:radio%> value="r1" class="radio" name="magix" />r1
        </label>
        <label class="mr10">
            <mx-input type="radio" <%:radio%> value="r2" class="radio" name="magix" />r2
        </label>
        <label class="mr10">
            <mx-input type="radio" <%:radio%> value="r3" class="radio" name="magix" />r3
        </label>
    </div>
</div>
<div class="form-item">
    <label class="form-label">日期：</label>
    <div class="form-content">
        <input mx-view="app/gallery/mx-calendar/datepicker" class="input" placeholder="请选择开始日期" value="<%:dateStart%>" style="width:162px;">
        <span class="ib ml5 mr5">-</span>
        <input mx-view="app/gallery/mx-calendar/datepicker" class="input" placeholder="请选择结束日期" value="<%:dateEnd%>" style="width:162px;">
    </div>
</div>
<div class="form-item">
    <label class="form-label">范围：</label>
    <div class="form-content">
        <mx-view mx-view="app/gallery/mx-slider/index"
            max="200"
            min="0"
            value="<%:range%>"
            step="0.2"
        ></mx-view>
    </div>
</div>
<div class="form-item">
    <label class="form-label">范围：</label>
    <div class="form-content">
        <mx-view mx-view="app/gallery/mx-slider/range"
            max="500"
            min="200"
            value="<%:range1%>"
            step="10"
        ></mx-view>
    </div>
</div>
<div class="form-item">
    <label class="form-label">封面：</label>
    <div class="form-content">
        <mx-view
            tag="button"
            class="btn btn-brand"
            path="app/gallery/mx-uploader/index"
            action="./"
            view-name="file1"
            multiple="true"
        >上传文件</button>
    </div>
</div>

<div class="form-item">
    <label class="form-label">备注：</label>
    <div class="form-content">
        <textarea class="textarea" rows="8"><%:mark{maxLength:10}%></textarea>
    </div>
</div>
<div class="form-footer">
    <button class="btn btn-brand" mx-click="isValid()">isValid</button>
    <button class="btn btn-brand ml10" mx-click="getData()">getData</button>
</div>

let Magix = require('magix');
let Form = require('app/gallery/mx-form/index');
module.exports = Magix.View.extend({
    tmpl: '@index.html',
    mixins: [Form],
    render() {
        let me = this;
        me.updater.digest({
            checkbox: [],
            range: 0,
            range1: [230, 300],
            list: [111111111111111, 222222222222222, 333333333333, 44444444444444]
        });
    },
    'isValid<click>' () {
        console.log(this.isValid());
    },
    'getData<click>' () {
        let src = this.updater.get();
        let data = this.fromKeys(src, 'name,day,time,tags,checkbox,radio,dateStart,dateEnd,range,range1,mark');
        console.log(data);
    }
});