<template>
  <el-dialog title="上传资源" :visible.sync="isShow">
    <el-form ref="uploadFileForm" :model="uploadFile" :rules="uploadFileRules" label-width="110px"  class="content-form" >
      <el-form-item prop="catalogID" label="转载到：" >
        <el-row>
          <el-col :span="12">
            <el-radio-group v-model="uploadFile.uploadType">
              <el-radio label="upload">本地上传</el-radio>
              <el-radio label="internet">网络</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
      </el-form-item>
      <div v-if="uploadFile.uploadType=='upload'">
        <el-form-item prop="file" 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="uploadFile.allowType" style="width:330px;">
            <el-row :gutter="3">
              <el-col :span="18">
                <el-input disabled v-model="uploadFile.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">只能上传 {{uploadFile.allowType}} 文件</div>
        </el-form-item>
      </div>
      <div v-else>
        <el-form-item prop="url" label="URL地址：" >
          <el-row>
            <el-col :span="12">
              <el-input v-model="uploadFile.url"/>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item prop="name" label="名称：" >
          <el-row>
            <el-col :span="12">
               <el-input v-model="uploadFile.name"/>
            </el-col>
          </el-row>
        </el-form-item>
      </div>
    </el-form>
     <div slot="footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: ['show', 'catalogID'],
  data() {
    return {
      tmpFileList: [],
      uploadFile: {
        uploadType: 'upload',
        allowType: '',
        name: '',
        url: ''
      }
    }
  },
  computed: {
    isShow: {
      set(val) {
        this.$emit('update:show', val)
      },
      get() {
        return this.show
      }
    }
  },
  async created () {
    let resp = await axios.get('/ui/member/resourceupload')
    if (resp.data.status === 1) {
      this.uploadFile = resp.data.data
    }
  },
  methods: {
    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 fileUploadHandler(event) {
      const { file } = event
      const formData = new FormData()
      formData.append('file', file)
      for (let i in this.uploadFile) {
        formData.append(i, this.uploadFile[i])
      }
      for (let i in this.tmpParams) {
        formData.append(i, this.tmpParams[i])
      }
      let upload = await axios.post(
        `/ui/catalogresources/${this.uploadFile.catalogID}/upload`,
        formData,
        {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
      )
      util.showResponseMessage(upload.data)
      if (upload.data.status === 1) {
        this.$emit(
          'callback',
          this.uploadFile.URL,
          this.uploadFile.name
        )
        this.isShow = false
      }
    },
    confirm() {
      if (this.uploadFile.uploadType === 'upload') {
        if (this.tmpFileList.length === 0) {
          this.$alert('请选择要上传的文件', '提示', {
            type: 'info',
            confirmButtonText: '确定'
          })
          return
        }
        this.$refs.upload.submit()
        return
      }
      if (this.uploadFile.uploadType === 'internet') {
        this.isShow = false
        this.$emit(
          'callback',
          this.uploadFile.URL,
          this.uploadFile.name
        )
      }
    }
  }
}
</script>
