<template>
  <div style="padding: 0px 10px;">
    <el-form :model="opts" label-position="left" label-width="100px" class="demo-ruleForm">
      <el-form-item label="栅格" prop="span">
        <el-slider v-model="opts.span" :step="1" :min="1" :max="24" />
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model="opts.type">
          <el-option label="button（按钮）" value="button" />
          <el-option label="picture（带缩略图）" value="picture" />
          <el-option label="drag（拖拽）" value="drag" />
        </el-select>
      </el-form-item>
      <el-form-item label="标签" prop="labelName">
        <el-input v-model="opts.labelName" placeholder="labelName" />
      </el-form-item>
      <el-form-item label="上传地址" prop="action">
        <el-input v-model="opts.action" placeholder="上传地址" />
      </el-form-item>
      <el-form-item label="请求头" prop="headers">
        <el-input v-model="opts.headers" placeholder="请求头" />
      </el-form-item>
      <el-form-item label="最大上传个数" prop="limit">
        <el-input v-model="opts.limit" placeholder="最大上传个数" />
      </el-form-item>
      <el-form-item label="名称（按钮）" prop="btnName">
        <el-input v-model="opts.btnName" placeholder="请输入按钮名称" />
      </el-form-item>
      <el-form-item label="名称2（按钮）" prop="btnName2">
        <el-input v-model="opts.btnName2" placeholder="请输入按钮名称" />
      </el-form-item>
      <el-form-item label="备注信息" prop="remarks">
        <el-input v-model="opts.remarks" placeholder="请输入备注信息" />
      </el-form-item>
      <el-form-item label="是否显示备注" prop="mark">
        <el-switch v-model="opts.mark" />
      </el-form-item>
      <el-form-item label="允许多选" prop="multiple">
        <el-switch v-model="opts.multiple" />
      </el-form-item>
      <el-form-item label="选取文件后立即上传" prop="autoUpload">
        <el-switch v-model="opts.autoUpload" />
      </el-form-item>
      <el-form-item label="显示已上传文件列表" prop="showFileList">
        <el-switch v-model="opts.showFileList" />
      </el-form-item>
      <el-form-item label="列表展示类型（按钮）" prop="listType">
        <el-select v-model="opts.listType">
          <el-option label="list（列表）" value="" />
          <el-option label="缩略图（卡片）" value="picture" />
        </el-select>
      </el-form-item>
      <el-button>保存</el-button>
    </el-form>
  </div>
</template>

<script>
import ApDevPropBase from './base/ApDevPropBase'
import ElButton from 'element-ui/packages/button/src/button'

export default {
  name: 'ApDevUploadProp',
  components: { ElButton },
  extends: ApDevPropBase,
  data() {
    return {

    }
  },
  methods: {

  }
}
</script>

<style scoped>

</style>
