<template>
  <div style="padding: 0px 10px;">
    <el-form label-position="left" label-width="100px">
      <el-form-item label="类型" prop="type">
        <el-select v-model="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="action">
        <el-input v-model="action" placeholder="上传地址" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="请求头" prop="headers">
        <el-input v-model="headers" placeholder="请求头" style="width: 178px;" />
      </el-form-item>
      <div class="ap-split-line" />
      <el-form-item label="多选" prop="multiple">
        <el-switch v-model="multiple" />
      </el-form-item>
      <el-form-item label="显示已上传文件列表" prop="showFileList">
        <el-switch v-model="showFileList" />
      </el-form-item>
      <el-form-item label="选取文件后立即上传" prop="autoUpload">
        <el-switch v-model="autoUpload" />
      </el-form-item>
      <el-form-item v-if="type == 'button'" label="列表展示类型（按钮）" prop="listType">
        <el-select v-model="listType">
          <el-option label="list（列表）" value="" />
          <el-option label="缩略图（卡片）" value="picture" />
        </el-select>
      </el-form-item>
      <div class="ap-split-line" />
      <el-form-item label="最大上传个数" prop="limit">
        <el-input-number v-model="limit" placeholder="最大上传个数" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="按钮名称" prop="btnName">
        <el-input v-model="btnName" placeholder="请输入按钮名称" style="width: 178px;" />
      </el-form-item>
      <el-form-item v-if="type == 'button' || type == 'drag'" label="按钮名称2" prop="btnName2">
        <el-input v-model="btnName2" placeholder="请输入按钮名称" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="备注信息" prop="remarks">
        <el-input v-model="remarks" placeholder="请输入备注信息" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="是否显示备注" prop="mark">
        <el-switch v-model="mark" />
      </el-form-item>
      <div class="ap-split-line" />
      <el-form-item label="点击列表已上传文件" prop="onPreview">
        <el-switch v-model="onPreview" />
      </el-form-item>
      <el-form-item label="列表移除文件" prop="onRemove">
        <el-switch v-model="onRemove" />
      </el-form-item>
      <el-form-item label="上传成功" prop="onSuccess">
        <el-switch v-model="onSuccess" />
      </el-form-item>
      <el-form-item label="上传失败" prop="onError">
        <el-switch v-model="onError" />
      </el-form-item>
      <el-form-item label="上传时" prop="onProgress">
        <el-switch v-model="onProgress" />
      </el-form-item>
      <el-form-item label="文件状态改变" prop="onChange">
        <el-switch v-model="onChange" />
      </el-form-item>
      <el-form-item label="上传文件之前" prop="beforeUpload">
        <el-switch v-model="beforeUpload" />
      </el-form-item>
      <el-form-item label="删除文件之前" prop="beforeRemove">
        <el-switch v-model="beforeRemove" />
      </el-form-item>
      <el-form-item label="文件超出个数限制" prop="onExceed">
        <el-switch v-model="onExceed" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ApDevItemBase from './ApDevItemBase'

export default {
  name: 'ApDevItemUpload',
  extends: ApDevItemBase,
  data() {
    return {
      type: 'button', // 类型
      action: '#', // 上传的地址
      headers: '', // 请求头
      multiple: false, // 是否多选
      showFileList: true, // 是否显示已上传文件列表
      limit: 3, // 最大上传个数
      btnName: '选择文件', // 按钮名称
      btnName2: '点击上传', // 按钮名称2
      remarks: '这里是备注信息', // 备注信息
      mark: true, // 是否显示备注
      autoUpload: true, // 是否在选取文件后立即进行上传
      listType: 'list', // 上传文件列表展示类型
      onPreview: false, // 点击文件列表中已上传的文件时的钩子
      onRemove: false, // 文件列表移除文件时的钩子
      onSuccess: false, // 文件上传成功时的钩子
      onError: false, // 文件上传失败时的钩子
      onProgress: false, // 文件上传时的钩子
      onChange: false, // 文件状态改变时的钩子
      beforeUpload: false, // 上传文件之前的钩子
      beforeRemove: false, // 删除文件之前的钩子
      onExceed: false // 文件超出个数限制时的钩子
    }
  },
  watch: {
    type() {
      this.initOpt()
    },
    action() {
      this.initOpt()
    },
    headers() {
      this.initOpt()
    },
    limit() {
      this.initOpt()
    },
    btnName() {
      this.initOpt()
    },
    btnName2() {
      this.initOpt()
    },
    remarks() {
      this.initOpt()
    },
    mark() {
      this.initOpt()
    },
    multiple() {
      this.initOpt()
    },
    autoUpload() {
      this.initOpt()
    },
    showFileList() {
      this.initOpt()
    },
    listType() {
      this.initOpt()
    },
    onPreview() {
      this.initOpt()
    },
    onRemove() {
      this.initOpt()
    },
    onSuccess() {
      this.initOpt()
    },
    onError() {
      this.initOpt()
    },
    onProgress() {
      this.initOpt()
    },
    onChange() {
      this.initOpt()
    },
    beforeUpload() {
      this.initOpt()
    },
    beforeRemove() {
      this.initOpt()
    },
    onExceed() {
      this.initOpt()
    }
  },
  created() {
    this.initOpt()
  },
  methods: {
    initOpt() {
      this.template = `<el-upload ref="upload" @action@ @headers@ @multiple@ @showFileList@ @limit@ @autoUpload@ @drag@ @listType@ @onPreview@ @onRemove@ @onSuccess@ @onError@ @onProgress@ @onChange@ @beforeUpload@ @beforeRemove@ @onExceed@>
            @html@
        </el-upload>`

      this.data = `{}`

      this.methods = `{
                submitUpload(file) {
                    console.log('手动上传');
                    this.$refs.upload.submit();
                },
                @onPreview@@onRemove@@onSuccess@@onError@@onProgress@@onChange@@beforeUpload@@beforeRemove@@onExceed@
            }`

      this.replaceTemplate('@action@', `action="${this.action}"`)

      if (this.headers == '') {
        this.replaceTemplate(' @headers@', '')
      } else {
        this.replaceTemplate('@headers@', `headers="${this.headers}"`)
      }

      if (this.multiple) {
        this.replaceTemplate('@multiple@', 'multiple')
      } else {
        this.replaceTemplate(' @multiple@', '')
      }

      if (this.showFileList) {
        this.replaceTemplate(' @showFileList@', '')
      } else {
        this.replaceTemplate('@showFileList@', ':show-file-list="false"')
      }

      this.replaceTemplate('@limit@', `:limit=${this.limit}`)

      if (this.autoUpload) {
        this.replaceTemplate(' @autoUpload@', '')
      } else {
        this.replaceTemplate('@autoUpload@', ':auto-upload="false"')
      }

      if (this.type == 'button') {
        let str = `<el-button slot="trigger" size="small" type="primary">@btnName@</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">@btnName2@</el-button>
            @tip@`
        let str2 = `<div slot="tip" class="el-upload__tip">@remarks@</div>`
        str = str.replaceAll('@btnName@', this.btnName)
        str = str.replaceAll('@btnName2@', this.btnName2)
        str2 = str2.replaceAll('@remarks@', this.remarks)
        if (this.mark) {
          str = str.replaceAll('@tip@', str2)
        } else {
          str = str.replaceAll('@tip@', '')
        }
        this.replaceTemplate('@html@', str)
        this.replaceTemplate(' @drag@', '')
        this.replaceTemplate('@listType@', `list-type="${this.listType}"`)
      } else if (this.type == 'picture') {
        let str = `<i class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                        <i class="el-icon-delete"></i>
                    </span>
                </span>
            </div>
            @tip@`
        let str2 = `<div slot="tip" class="el-upload__tip">@remarks@</div>`
        str2 = str2.replaceAll('@remarks@', this.remarks)
        if (this.mark) {
          str = str.replaceAll('@tip@', str2)
        } else {
          str = str.replaceAll('@tip@', '')
        }
        this.replaceTemplate('@html@', str)
        this.replaceTemplate(' @drag@', '')
        this.replaceTemplate('@listType@', 'list-type="picture-card"')
      } else if (this.type == 'drag') {
        let str = `<i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>@btnName@</em> /
                <em @click="submitUpload">@btnName2@</em>
            </div>
            @tip@`
        let str2 = `<div slot="tip" class="el-upload__tip">@remarks@</div>`
        str2 = str2.replaceAll('@remarks@', this.remarks)
        if (this.mark) {
          str = str.replaceAll('@tip@', str2)
        } else {
          str = str.replaceAll('@tip@', '')
        }
        str = str.replaceAll('@btnName@', this.btnName)
        str = str.replaceAll('@btnName2@', this.btnName2)
        this.replaceTemplate('@html@', str)
        this.replaceTemplate('@drag@', 'drag')
        this.replaceTemplate('@listType@', `list-type="${this.listType}"`)
      }

      // 事件
      if (this.onPreview) {
        this.replaceTemplate('@onPreview@', `:on-preview="onPreviewFn"`)
        this.replaceMethods('@onPreview@', `onPreviewFn(file) {
                    console.log('点击文件列表中已上传的文件时');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @onPreview@', ``)
        this.replaceMethods('@onPreview@', ``)
      }

      if (this.onRemove) {
        this.replaceTemplate('@onRemove@', `:on-remove="onRemoveFn"`)
        this.replaceMethods('@onRemove@', `onRemoveFn(file, fileList) {
                    console.log('文件列表移除文件时');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @onRemove@', ``)
        this.replaceMethods('@onRemove@', ``)
      }

      if (this.onSuccess) {
        this.replaceTemplate('@onSuccess@', `:on-success="onSuccessFn"`)
        this.replaceMethods('@onSuccess@', `onSuccessFn(response, file, fileList) {
                    console.log('文件上传成功时');
                    this.$message.success(\`文件上传成功\`);
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @onSuccess@', ``)
        this.replaceMethods('@onSuccess@', ``)
      }

      if (this.onError) {
        this.replaceTemplate('@onError@', `:on-error="onErrorFn"`)
        this.replaceMethods('@onError@', `onErrorFn(err, file, fileList) {
                    console.log('文件上传失败时');
                    this.$message.success(\`文件上传失败\`);
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @onError@', ``)
        this.replaceMethods('@onError@', ``)
      }

      if (this.onProgress) {
        this.replaceTemplate('@onProgress@', `:on-progress="onProgressFn"`)
        this.replaceMethods('@onProgress@', `onProgressFn(event, file, fileList) {
                    console.log('文件上传时');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @onProgress@', ``)
        this.replaceMethods('@onProgress@', ``)
      }

      if (this.onChange) {
        this.replaceTemplate('@onChange@', `:on-change="onChangeFn"`)
        this.replaceMethods('@onChange@', `onChangeFn(file, fileList) {
                    console.log('文件状态改变时');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @onChange@', ``)
        this.replaceMethods('@onChange@', ``)
      }

      if (this.beforeUpload) {
        this.replaceTemplate('@beforeUpload@', `:before-upload="beforeUploadFn"`)
        this.replaceMethods('@beforeUpload@', `beforeUploadFn(file) {
                    console.log('上传文件之前');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @beforeUpload@', ``)
        this.replaceMethods('@beforeUpload@', ``)
      }

      if (this.beforeRemove) {
        this.replaceTemplate('@beforeRemove@', `:before-remove="beforeRemoveFn"`)
        this.replaceMethods('@beforeRemove@', `beforeRemoveFn(file, fileList) {
                    console.log('删除文件之前');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @beforeRemove@', ``)
        this.replaceMethods('@beforeRemove@', ``)
      }

      if (this.onExceed) {
        this.replaceTemplate('@onExceed@', `:on-exceed="onExceedFn"`)
        this.replaceMethods('@onExceed@', `onExceedFn(file, fileList) {
                    console.log('文件超出个数限制时');
                    this.$message.warning(\`文件超出个数限制\`);
                }`)
      } else {
        this.replaceTemplate(' @onExceed@', ``)
        this.replaceMethods('@onExceed@', ``)
      }
    }
  }
}
</script>
