<template>
  <div style="margin: 1rem;">
    <el-tabs type="border-card">


      <el-tab-pane label="图片上传组件">
        <div style="padding: 1rem;">
          <div>
            图片上传组件说明：
            <ol style="font-size: .8rem; line-height: 1.8;">
              <li>基础用法： &lt;w-image-uploader v-model="value" :getUploadKey="getUploadKey" max="1"
                v-model:uploading="uploading" /&gt;</li>
              <li>属性（getUploadKey）：获取上传凭证的方法，需要使用者提供，开发模式下提供:<br />
                前端示例<br />
                <pre class="code">
const getUploadKey =async () => {
  let r = await request.get("/file/upload/getUploadKey")
  return r.data
} </pre>
                后端示例<br />
                <pre class="code">  @GetMapping("getUploadKey")
  public R getUploadKey() {
    return R.ok().setData(FileUtils.getUploadKey());
  }</pre>

              </li>
              <li>属性（v-model）：双向绑定上传的文件URL,max=1是类型为String,否则为Array</li>
              <li>属性（v-model:uploading）：双向绑定是否上传中,PS: 上传完成后才允许业务表单提交</li>
              <li>属性（max）：允许上传的文件数量，0表示没有限制,默认：0</li>
              <li>属性（prefix）：上传路径前缀，默认：default</li>
              <li>属性（disabled）：禁止上传（图片预览模式）， 默认：false</li>
              <li>属性（text）：按钮文字，默认：上传图片</li>
              <li>属性（maxSize）：允许上传的文件最大大小,0表示不限制，默认：0</li>
              <li>属性（threadNum）：并行上传数量：默认：2</li>
              <li>属性（retry）：重试次数，默认：3 </li>
              <li>属性（saveSrc）：是否保存图片原文件，如果true，则下载时下载原图zip文件，否则下载大图片，默认：false </li>
              <li>属性（saveMin）：是否保存缩略图，如果true，则列表时显示缩略图，否则显示大图，默认：true </li>
              <li>属性（watermark）：是否添加水印，默认：true </li>
              <li>属性（noEffect）：是否无效果，本质设置css属性，默认：false </li>
              <li>css属性（--image-size）：图片显示大小，默认： 10em </li>
              <li>css属性（--image-border-radius）：图片显示圆角，默认： .4em</li>
              <li>css属性（--image-margin）：图片外边距，默认： .5em .5em 0 0</li>
              <li>css属性（--image-border）：图片边框，默认： #FFF solid 2px </li>
              <li>css属性（--image-box-shadow）：图片阴影，默认： 0 0 .2em #0005</li>
              <li>插槽（button）：上传按钮插槽</li>
              <li>插槽（default）：图片列表插槽，作用域：list，不建议定义</li>
              <li>事件（change）：modelValue发送了变化</li>
            </ol>

          </div>
          <el-divider>单图片上传</el-divider>
          <w-image-uploader v-model="imgs[0]" saveSrc max="1" v-model:uploading="imging" />
          <pre>绑定值：{{ imgs[0] }}</pre>
          <div>{{ imging ? '上传中' : '没有上传' }}

            <w-image-view ref="imgView" />
            <el-button @click="proxy.$refs.imgView.open(imgs[0])">重写的图片预览组件测试</el-button>
          </div>


          <el-divider>9张图片上传</el-divider>
          <div style="width: 50em;"><w-image-uploader v-model="imgs[1]" saveSrc max="9" text="9张图片上传"
              style="--image-size:15em;" /></div>

          <pre>绑定值：{{ imgs[1] }}</pre>

          <el-divider>预览模式</el-divider>
          <w-image-uploader style="width: 35em;" disabled :modelValue="[
            '/files/default/2024/10/24/d0wt3m3j4tud.webp',
            '/files/default/2024/10/24/4x53htt9v8j1.webp',
            '/files/default/2024/10/24/1trnacdjxeoju.webp',
            '/files/default/2024/10/24/742tvr5pq526.webp',
            '/files/default/2024/10/24/1dg74ibgi0xbj.webp',
            '/files/default/2024/10/24/1bgesfnixpfvt.webp',
            '/files/default/2024/10/24/h1legy4o8tko.webp',
            '/files/default/2024/10/24/9xe6yyoed9dj.webp'
          ]" />
        </div>
      </el-tab-pane>


      <el-tab-pane label="文件上传组件">
        <div style="padding: 1rem;">
          <div>
            文件上传组件说明：
            <ol style="font-size: .8rem; line-height: 1.8;">
              <li>基础用法： &lt;w-file-uploader v-model="value" :getUploadKey="getUploadKey" max="1"
                v-model:uploading="uploading" /&gt;</li>
              <li>大小大于chunksize的大文件上传会自动分片上传</li>
              <li>属性（getUploadKey）：获取上传凭证的方法，需要使用者提供，开发模式下提供:<br />
                前端示例<br />
                <pre class="code">
const getUploadKey =async () => {
  let r = await request.get("/file/upload/getUploadKey")
  return r.data
} </pre>
                后端示例<br />
                <pre class="code">  @GetMapping("getUploadKey")
  public R getUploadKey() {
    return R.ok().setData(FileUtils.getUploadKey());
  }</pre>

              </li>
              <li>属性（v-model）：双向绑定上传的文件URL,max=1是类型为String,否则为Array</li>
              <li>属性（v-model:uploading）：双向绑定是否上传中,PS: 上传完成后才允许业务表单提交</li>
              <li>属性（max）：允许上传的文件数量，0表示没有限制,默认：0</li>
              <li>属性（prefix）：上传路径前缀，默认：default</li>
              <li>属性（keepFilename）：是否保留文件名, 默认：true</li>
              <li>属性（disabled）：禁止上传（文件预览模式）， 默认：false</li>
              <li>属性（text）：按钮文字，默认：上传文件</li>
              <li>属性（accept）：允许上传的文件扩展名列表，默认：'' ,office:'.doc,.docx,.ppt,.pptx,.xls,.xlsx'</li>
              <li>属性（maxSize）：允许上传的文件最大大小,0表示不限制，默认：0</li>
              <li>属性（threadNum）：并行上传数量：默认：2</li>
              <li>属性（retry）：重试次数，默认：3 </li>
              <li>属性（chunksize）：分片大小，默认：5Mb，不建议修改</li>
              <li>属性（border）：文件项是否显示边框，默认：true</li>
              <li>插槽（button）：上传按钮插槽</li>
              <li>插槽（default）：文件列表，作用域：list，不建议定义</li>
              <li>事件（change）：modelValue发送了变化</li>

            </ol>

          </div>
          <el-divider>单文件上传</el-divider>
          <w-file-uploader v-model="data[0]" max="1" v-model:uploading="uploading" />
          <pre>绑定值：{{ data[0] }}</pre>
          <div>{{ uploading ? '上传中' : '没有上传' }}</div>

          <el-divider>预览模式</el-divider>
          <w-file-uploader v-model="data[0]" max="1" :border="false" disabled />

          <el-divider>单word文件小于10kb上传</el-divider>
          <w-file-uploader v-model="data[1]" max="1" accept=".docx,.doc" text="单word文件小于10kb上传" :max-size="10240" />
          <pre>绑定值：{{ data[1] }}</pre>


          <el-divider>多文件上传</el-divider>
          <w-file-uploader v-model="data[2]" max="2" />
          <pre>绑定值：{{ data[2] }}</pre>
        </div>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()

const data = ref(['/files/default/2024/10/24/2nhdirb2ujey/5mb.txt'])
const uploading = ref(false)

const imgs = ref(['/files/default/2024/10/24/d0wt3m3j4tud.webp'])
const imging = ref(false)
</script>
<style lang="scss" scoped>
.code {
  border: solid 1px #0001;
  margin: .5rem;
  padding: .5rem;
  border-radius: .3rem;
}
</style>