{% load simpletags %}
<style type="text/css">
    .el-upload-list{
        height: 30px!important;
        line-height: 30px!important;
    }
</style>
<el-dialog
        :title="layer.title"
        :visible.sync="layer.visible"
        :width="layer.data.width||'50%'">
    <el-alert style="margin-bottom: 20px" v-if="layer.data.tips" :title="layer.data.tips" type="success" :closable="false"></el-alert>
    <el-form ref="form" :model="layer.params" :label-width="layer.data.labelWidth||'80px'" size="small">
        <el-form-item v-for="item in layer.params" :label="item.label"
                      :rules="[{ required: item.require||false, trigger: 'blur' }]">
            <el-select v-if="item.type=='select'" :style="{width:item.width}" :size="item.size"
                       v-model="item.value">
                <el-option
                        v-for="node in item.options"
                        :key="node.key"
                        :label="node.label"
                        :value="node.key">
                </el-option>
            </el-select>

            <el-date-picker
                    v-else-if="item.type=='date'"
                    :style="{width:item.width}"
                    :size="item.size"
                    v-model="item.value"
                    type="date">
            </el-date-picker>

            <el-date-picker
                    v-else-if="item.type=='datetime'"
                    :style="{width:item.width}"
                    :size="item.size"
                    v-model="item.value"
                    type="datetime">
            </el-date-picker>

            <el-rate
                    v-else-if="item.type=='rate'"
                    :style="{width:item.width}"
                    :size="item.size"
                    v-model="item.value">
            </el-rate>
            <el-color-picker
                    v-else-if="item.type=='color'"
                    :style="{width:item.width}"
                    :size="item.size"
                    v-model="item.value">
            </el-color-picker>
            <el-slider
                    v-else-if="item.type=='slider'"
                    :style="{width:item.width}"
                    :size="item.size"
                    v-model="item.value">
            </el-slider>
            <el-switch
                    v-else-if="item.type=='switch'"
                    :style="{width:item.width}"
                    :size="item.size"
                    v-model="item.value">
            </el-switch>
            <el-input-number
                    v-else-if="item.type=='input_number'"
                    :style="{width:item.width}"
                    :size="item.size"
                    v-model="item.value">
            </el-input-number>

            <el-checkbox-group
                    v-else-if="item.type=='checkbox'"
                    :style="{width:item.width}"
                    :size="item.size"
                    v-model="item.value">

                <el-checkbox v-for="node in item.options" v-model="node.key" :label="node.label"
                             :key="node.key"></el-checkbox>

            </el-checkbox-group>

            <el-radio-group
                    v-else-if="item.type=='radio'"
                    :style="{width:item.width}"
                    :size="item.size"
                    v-model="item.value">

                <el-radio v-for="node in item.options" v-model="node.key" :label="node.label"
                          :key="node.key"></el-radio>

            </el-radio-group>

            <input v-else-if="item.type=='file'" type="file" :ref="item.key"/>

            <el-input v-else v-model="item.value" :type="item.type" :style="{width:item.width}"
                      :size="item.size"></el-input>
        </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="layerDataSubmit('{% get_model_ajax_url %}')" v-text="layer.data.confirm_button||'确定'"></el-button>
        <el-button @click="layer.visible = false" v-text="layer.data.cancel_button||'取消'"></el-button>
    </span>
</el-dialog>