<template>
  <div>
    <h1>Upload 上传组件</h1>
    <p class="fbg-text">通过点击上传文件</p>
    <h3 class="fbg-title">上传图片</h3>
    <demo :code="imageUploadStr">
      <el-upload v-model="imageList" type="image" :size="1024" action="http://dev.upload.com/index.php" multiple :onSuccess="onSuccess">
        <p slot="tip">上传文件不能大于1MB！</p>
      </el-upload>
    </demo>

    <h3 class="fbg-title">上传文件</h3>
    <demo :code="fileUploadStr">
      <el-upload v-model="fileList" type="file" action="http://dev.upload.com/index.php" multiple :onSuccess="onSuccess" />
    </demo>
    <h3 class="fbg-title">上传限制</h3>
    <demo :code="limitUploadStr">
      <el-upload v-model="limitFileList" :maxlength="5" :format="['pdf', 'xls']" :size="1024" type="file" action="http://dev.upload.com/index.php" multiple :onSuccess="onSuccess" @checkError="handleCheckError">
        <p slot="tip">上传文件不能大于1MB, 只能上传pdf、xls文件, 最多只能上传5份</p>
      </el-upload>
    </demo>
    <h3 class="fbg-title">单个文件上传</h3>
    <demo :code="singleUploadStr">
      <el-upload v-model="file" action="http://dev.upload.com/index.php" :auto-upload="false" upload-button-text="上传文件" placeholder="请选择你需要上传的文件"  :onSuccess="onFileSuccess">
        <p class="success-status-text">上传成功 <i class="fbg-icon-success success-icon" /></p>
      </el-upload>
    </demo>
    <h3 class="fbg-title">属性</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>type</td>
          <td>上传控件类型</td>
          <td>String</td>
          <td>image|file|default</td>
          <td>file</td>
        </tr>
        <tr>
          <td>action</td>
          <td>提交地址</td>
          <td>String</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>multiple</td>
          <td>是否支持上传多张</td>
          <td>Boolean</td>
          <td>true|false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>maxlength</td>
          <td>上传数量限制</td>
          <td>Number</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>format</td>
          <td>限制上传格式</td>
          <td>Array</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>size</td>
          <td>限制上传文件大小（单位kb）</td>
          <td>Number</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>headers</td>
          <td>请求header扩展</td>
          <td>Object</td>
          <td>--</td>
          <td>-=</td>
        </tr>
        <tr>
          <td>urlMap</td>
          <td>url字段映射</td>
          <td>String</td>
          <td>--</td>
          <td>url</td>
        </tr>
        <tr>
          <td>nameMap</td>
          <td>name字段映射</td>
          <td>String</td>
          <td>--</td>
          <td>name</td>
        </tr>
        <tr>
          <td>autoUpload</td>
          <td>是否自动上传</td>
          <td>Boolean</td>
          <td>true|false</td>
          <td>true</td>
        </tr>
        <tr>
          <td>uploadButtonText</td>
          <td>上传按钮文本（type==image时不可用）</td>
          <td>String</td>
          <td>--</td>
          <td>上传</td>
        </tr>
        <tr>
          <td>placeholder</td>
          <td>(单个上传文件可用)</td>
          <td>String</td>
          <td>--</td>
          <td>上传</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">方法</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>方法名</th>
          <th>说明</th>
          <th>参数</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>onSuccess</td>
          <td>上传成功回调</td>
          <td>(res, file) => {return {
        url: res.file_name,
        name: file.name
      }}</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">事件</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>事件名称</th>
          <th>说明</th>
          <th>回调参数</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>onLookat</td>
          <td>查看大图</td>
          <td>path</td>
        </tr>
        <tr>
          <td>onRemove</td>
          <td>删除图片</td>
          <td>path</td>
        </tr>
        <tr>
          <td>clickItem</td>
          <td>点击图片</td>
          <td>path</td>
        </tr>
        <tr>
          <td>onPreview</td>
          <td>预览图片</td>
          <td>path</td>
        </tr>
        <tr>
          <td>checkError</td>
          <td>检测错误</td>
          <td>{type:format|size|maxlength, file:file}</td>
        </tr>
        <tr>
          <td>onError</td>
          <td>请求错误</td>
          <td>xhr</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">插槽</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>插槽名称</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>tip</td>
          <td>提示说明</td>
        </tr>
        <tr>
          <td>default</td>
          <td>自定义内容</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import hljs from '../util/highlight';
export default {
  data() {
    return {
      file: '',
      imageList: [],
      limitFileList: [],
      fileList: [],
      imageUploadStr: `
      <el-upload v-model="imageList" type="image" action="http://dev.upload.com/index.php" multiple :onSuccess="onSuccess" />
      <script>
      export default {
        data() {
          return {
            imageList: []
          }
        },
        methods: {
          onSuccess(res, file) {
            return {
              url: res.file_name,
              name: file.name
            }
          },
        }
      }
      <\/script>
      `,
      fileUploadStr: `
      <el-upload v-model="fileList" type="image" action="http://dev.upload.com/index.php" multiple :onSuccess="onSuccess" />
      <script>
      export default {
        data() {
          return {
            fileList: []
          }
        },
        methods: {
          onSuccess(res, file) {
            return {
              url: res.file_name,
              name: file.name
            }
          },
        }
      }
      <\/script>
      `,
      limitUploadStr: `
      <el-upload v-model="fileList" :maxlength="5" :format="['pdf', 'xls']" :size="1024" type="file" action="http://dev.upload.com/index.php" multiple :onSuccess="onSuccess">
        <p slot="tip">上传文件不能大于1MB, 只能上传pdf、xls文件, 最多只能上传5份</p>
      </el-upload>
      <script>
      export default {
        data() {
          return {
            fileList: []
          }
        },
        methods: {
          onSuccess(res, file) {
            return {
              url: res.file_name,
              name: file.name
            }
          },
        }
      }
      <\/script>
      `,
      singleUploadStr: `
      <el-upload v-model="file" :auto-upload="false" upload-button-text="上传文件" placeholder="请选择你需要上传的文件" action="http://dev.upload.com/index.php" :onSuccess="onSuccess">
        <p class="success-status-text">上传成功 <i class="fbg-icon-success success-icon" /></p>
      </el-upload>
      <script>
      export default {
        data() {
          return {
            file: ''
          }
        },
        methods: {
          onSuccess(res, file) {
            return res.file_name;
          },
        }
      }
      <\/script>
      <style lang="scss" scoped>
      .success-icon {
        color: #3CCCA6;

      }
      .success-status-text {
        color: #999;
      }
      </style>
      `
    }
  },
  mounted() {
    hljs.highlightCode();
  },
  methods: {
    onSuccess(res, file) {
      return {
        url: 'http://dev.upload.com' + res.file_name,
        name: file.name
      }
    },
    onFileSuccess(res, file) {
      return res.file_name;
    },
    uploadPreview(src, file) {
      this.imageList.push({
        url: src,
        name: file.name
      });
    },
    uploadProgress(data) {
      console.log(data);
    },
    handdleOnRemove(index) {
      this.imageList.splice(index, 1);
    },
    handleCheckError(data) {
      switch(data.type) {
        case 'format': 
          this.$message({type: 'error', message: '只允许上传pdf、xls文件'});
          break;
        case 'size':
          this.$message({type: 'error', message: '文件大小不能超过1MB'});
          break;
        case 'maxlength':
          this.$message({type: 'error', message: '最多只能上传5个文件'});
          break;
      }
      
    },
    handleChange(path, data, stopEvent) {
      stopEvent();
    }
  }
}
</script>
<style lang="scss" scoped>
.success-icon {
  color: #3CCCA6;

}
.success-status-text {
  color: #999;
}
</style>