<template>
    <el-button :disabled="!content.ID" @click="show=true" :type="buttonType" :priv="'com.zving.cms.Catalog.Content.Edit.'+catalogId" v-if="content.contentTypeID=='VideoGroup'">
      <i class="fa fa-arrow-up"></i>上传
    <el-dialog title="视频上传" :visible.sync="show" :append-to-body="true" style="margin:0 auto">
      <el-form :model="tmpVideo" inline  ref="videoInfoForm" label-width="180px">
          <el-form-item label=" " v-show="this.id">
            <el-row>
              <el-col :span="18">
                  <img :src="prefix + tmpVideo.path+tmpVideo.fileName" style="width:200px" />
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item prop="isExternalURL" label="类型">
            <el-radio-group v-model="isExternalURL">
              <el-radio v-for="item in uploadType" :key="item.value" :value="item.value" :label="item.value">{{item.name}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="file" label="文件"  v-if="isExternalURL=='N'" >
            <upload-file :allow-type="allowtype" :file.sync="tmpVideo.file" ></upload-file>
          </el-form-item>
          <el-form-item prop="externalSource" label="远程地址" v-show="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="是否转换" >
            <el-row>
              <el-col :span="4">
                <el-switch v-model="content.convertFlag"  active-value="Y" inactive-value="N"></el-switch>
              </el-col>
               <el-col :span="20">
                 （注：转换格式在栏目管理统一设置）
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="标题：" prop="name">
            <el-row>
              <el-col :span="18">
                <el-input v-model="tmpVideo.name" :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">确 定</el-button>
      </div>
    </el-dialog>
   </el-button>
</template>
<script>
import util from '@src/common/util.js'
import UploadFileComponent from './UploadFileComponent.vue'

export default {
  components: {
    'upload-file': UploadFileComponent
  },
  props: {
    content: {
      type: Object
    },
    id: {
      type: [String, Number]
    },
    button: {
      type: Boolean,
      default: false
    },
    buttonType: {
      type: String,
      default: 'info'
    },
    catalogId: {
      type: [String, Number]
    }
  },
  data() {
    return {
      tmpVideo: {
        name: '',
        author: '',
        info: '',
        cname: '',
        sourceUrl: '',
        file: '',
        externalSource: ''
      },
      imgeditMode: 2,
      isInputUrl: false,
      contentSelectorDialogModal: false,
      catalogSelectorDialogModal: false,
      tmpFileList: [],
      allowtype: '.avi,.wmv,.mov,.mpg,.mpeg,.flv,.rm,.rmvb,.mp4',
      prefix: '',
      show: false,
      uploadType: [
        {name: '本地上传', value: 'N'}, {name: '网络', value: 'Y'}, {name: '第三方云服务', value: 'S'}
      ],
      isExternalURL: 'N'
    }
  },
  watch: {
    content() {
      if (this.content.ID) {
        this.init()
      }
    }
  },
  methods: {
    async init() {
      if (!this.id) {
        return
      }
      let resp = await axios.get(`/ui/contentcore/contents/${this.content.ID}/images/${this.id}`)
      this.tmpVideo = resp.data.data
      this.prefix = resp.data.prefix
    },
    async confirm() {
      let formData = new FormData()
      if (!this.id && !this.tmpVideo.file) {
        this.$alert('请选择要上传的文件', '提示', {
          type: 'warning'
        })
        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)
      let resp = await axios.post(`/ui/contentcore/contents/${this.content.ID}/images/upload`, formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      })
      util.showResponseMessage(resp.data)
      if (resp.data.status === 1) {
        this.show = false
        this.$emit('refresh-content')
      }
    }
  }
}
</script>
<style scoped>
.el-300 {
  width: 300px;
}
</style>
