<template>
  <div>
      <el-form :model="tmpImage" ref="imgInfoForm" label-width="180px">
          <el-form-item label="图片：">
                <el-upload ref="upload" action="" :multiple="false" :disabled="tmpFileList.length>0" :auto-upload="false" class="upload-additional-dic" :http-request="fileUploadHandler" :on-remove="removeFileHandler" :on-change="selectFileChangeHandler" :accept="allowtype" style="width:330px;">
                  <el-row :gutter="3">
                    <el-col :span="18">
                      <el-input disabled v-model="allowtype"></el-input>
                    </el-col>
                    <el-col :span="6">
                      <el-button type="primary">选择文件</el-button>
                    </el-col>
                  </el-row>
                  <div slot="tip" class="el-upload__tip" style="display:none">只能上传 {{allowtype}} 文件</div>
                </el-upload>
          </el-form-item>
      </el-form>
  </div>
</template>
<script>
import util from '@src/common/util.js'

export default {
  components: {
  },
  data() {
    return {
      tmpImage: {},
      specialID: this.$route.params.specialID,
      catalogID: this.$route.params.catalogID,
      dataType: 'SpecialImage',
      allowtype: '.mp4',
      tmpFileList: []

    }
  },
  created() {
    window.forDialogOnOk = this.forDialogOnOk
  },
  methods: {
    async init() {
      this.allowType = 'video'
      let resp = await axios.get(`/ui/pageweaver/resource/${this.allowType}/allowtypes`)
      if (resp.data.status === 1) {
        this.allowtype = resp.data.data
      }
    },
    /* 文件上传确定事件 */
    async fileUploadHandler(e) {
      let file = e.file
      const formData = new FormData()
      formData.append('file', file, file.name)
      for (let i in this.tmpImage) {
        formData.append(i, this.tmpImage[i])
      }
      formData.append('catalogID', this.catalogID)
      formData.append('specialID', this.specialID)
      formData.append('dataType', this.dataType)
      let resp = await axios.post(`/ui/pageweaver/resource/${this.specialID }/uploadvideo`,
        formData,
        {
          headers: {'Content-Type': 'multipart/form-data'}
        }
      )
      util.showResponseMessage(resp.data)
      return resp.data
    },
    removeFileHandler(file, files) {
      this.tmpFileList = JSON.parse(JSON.stringify(files))
    },
    /* 改变选中文件触发事件 */
    selectFileChangeHandler(file, files) {
      if (files.length > 1) {
        this.$message.info('文件总数量限制为1')
        return
      }
      this.tmpFileList = JSON.parse(JSON.stringify(files))
    },

    async confirm() {
      if (this.tmpFileList.length !== 1) {
        this.$alert('请选择要上传的文件', '提示', {
          type: 'info',
          confirmButtonText: '确定'
        })
        return
      }
      let res = await this.$refs.upload.submit()
      this.isShow = false
      return res.data
    },
    async forDialogOnOk(func) {
      let data = await this.confirm()
      if (func) {
        func(data)
      }
    }
  }
}
</script>
