<template>
  <el-dialog :title="tmpVideo.isExternalURL=='N'?'添加视频':'添加网络视频'" class="el-dialog-video-upload" :visible.sync="isVisible" :append-to-body="true" @open="dialogOpen" @close="dialogClose" style="margin:0 auto">
      <el-form :model="tmpVideo" inline  ref="videoInfoForm" label-width="80px">
          <el-form-item prop="file" label="文件"  v-show="tmpVideo.isExternalURL=='N'" >
            <upload-file :allow-type="allowtype" ref="uploadComponent" :file.sync="tmpVideo.file" ></upload-file>
          </el-form-item>
          <el-form-item prop="externalSource" :label="`${type=='Y'?'远程地址':'代码片段'}`" v-show="tmpVideo.isExternalURL!='N'">
            <el-row>
              <el-col :span="20">
                <el-input v-model="tmpVideo.externalSource"  type="textarea" :autosize="{ minRows: 4, maxRows: 8}" placeholder="http://" :verify="['NotNull', 'Length<100']" class="el-300"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <!-- <el-form-item prop="convertFlag" label="是否转换" v-show="tmpVideo.isExternalURL=='N'">
            <el-row>
              <el-col :span="3">
                <el-switch v-model="tmpVideo.convertFlag"  active-value="Y" inactive-value="N"></el-switch>
              </el-col>
               <el-col :span="21">
                 （注：转换格式在栏目管理统一设置）
              </el-col>
            </el-row>
          </el-form-item> -->
          <br/>
          <resource-tags :tags.sync="tmpVideo.tag"></resource-tags>
          <!-- <el-form-item label="标题：" prop="title">
            <el-row>
              <el-col :span="18">
                <el-input v-model="tmpVideo.title" :span="10" class="el-300"></el-input>
             </el-col>
            </el-row>
          </el-form-item><br/>
          <el-form-item label="简介：" prop="info">
            <el-row>
              <el-col :span="18">
                <el-input type="textarea" :rows="4" v-model="tmpVideo.info" :span="10" class="el-300"></el-input>
             </el-col>
            </el-row>
          </el-form-item> -->
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="confirm" :loading="confirmLoading">确 定</el-button>
      </div>
    </el-dialog>
</template>
<script>
import util from '@src/common/util.js'
import UploadFileComponent from './UploadFileComponent.vue'
import resourceTag from '../../workspace/components/ResourceTags.vue'
export default {
  components: {
    'resource-tags': resourceTag,
    'upload-file': UploadFileComponent
  },
  props: {
    content: {
      type: Object
    },
    type: {
      type: String
    },
    visible: {
      type: Boolean
    }
  },
  data() {
    return {
      confirmLoading: false,
      tmpVideo: {
        title: '',
        info: '',
        sourceUrl: '',
        file: '',
        externalSource: '',
        isExternalURL: 'N',
        convertFlag: 'N'
      },
      tmpFileList: [],
      allowtype: '.avi,.wmv,.mov,.mpg,.mpeg,.flv,.rm,.rmvb,.mp4',
      prefix: '',
      uploadType: [
        {name: '本地上传', value: 'N'}, {name: '网络', value: 'Y'}, {name: '视频代码片段', value: 'C'}
      ]
    }
  },
  computed: {
    isVisible: {
      get() {
        return !!this.visible
      },
      set(val) {
        this.tmpFileList = []
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    dialogOpen() {
      this.tmpVideo = {
        title: '',
        info: '',
        sourceUrl: '',
        file: '',
        externalSource: 'http://',
        isExternalURL: this.type,
        convertFlag: 'Y'
      }
      if (this.type !== 'N') {
        Vue.delete(this.tmpVideo, 'file')
      }
      this.confirmLoading = false
    },
    dialogClose() {
      this.tmpVideo = {
        title: '',
        info: '',
        sourceUrl: '',
        externalSource: '',
        isExternalURL: 'N',
        convertFlag: 'N'
      }
      this.$refs.uploadComponent.clearFile()
    },
    async confirm() {
      this.confirmLoading = true
      let formData = new FormData()
      if (this.tmpVideo.isExternalURL === 'N' && !this.tmpVideo.file) {
        util.showResponseMessage({message: '请选择要上传的文件'})
        this.confirmLoading = false
        return
      }
      if (this.tmpVideo.isExternalURL === 'N') {
        let extension = this.tmpVideo.file.name.substring(this.tmpVideo.file.name.lastIndexOf('.') + 1, this.tmpVideo.file.name.length)
        if (!this.allowtype.includes(extension.toLowerCase())) {
          util.showResponseMessage({message: `不支持的文件格式${extension}`})
          this.confirmLoading = false
          return
        }
      }
      for (let i in this.tmpVideo) {
        formData.append(i, this.tmpVideo[i])
      }
      formData.append('catalogID', this.content.catalogID)
      formData.append('groupID', this.content.ID)
      try {
        let progressInfo = this.$refs['uploadComponent'].progressInfo
        progressInfo.visible = true
        let resp = this.tmpVideo.file ? await axios.post(`/ui/videogroup/${this.content.ID}/upload`, formData, {
          timeout: 6000000000,
          headers: { 'Content-Type': 'multipart/form-data' },
          onUploadProgress: progressEvent => {
            let total = progressEvent.total - 0
            let loaded = progressEvent.loaded - 0
            progressInfo.percent = total === loaded ? 100 : (loaded / total * 100).toFixed() - 0
          }
        })
          : await axios.post(`/ui/videogroup/${this.content.ID}/remote`, formData)
        progressInfo.visible = false
        this.confirmLoading = false
        if (resp.data.status === 1) {
          if (this.tmpVideo.isExternalURL === 'N') {
            await util.showProgress(resp.data.taskID, `正在上传...`, '上传成功')
          } else {
            util.showSuccess('操作成功')
          }
          this.dialogClose()
          this.$emit('refreshlist')
          this.isVisible = false
        } else {
          util.showResponseMessage({message: resp.data.message || '上传失败'})
        }
      } catch (e) {
        util.showErrorMessageBox(e)
        this.confirmLoading = false
      }
    }
  }
}
</script>
<style scoped>
.el-300 {
  width: 300px;
}
.el-dialog-video-upload{
  width:900px;
}
@media (max-width:480px){
  .el-dialog-video-upload{
    width:96%;
  }
}
</style>
