<template>
  <div class="padding-top-bottom">
    <content-info :content.sync="mContent" @catalog-change="catalogChange" :site-config="siteConfig" :catalog-id="catalogId">
      <div slot="afterEditor">
        <div class="panel-fieldset">
          <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>
        </div>
        <div class="panel-fieldset" v-if="content.ID&&content.path&&content.fileName">
          <el-form-item prop="fullFilePath" label="视频" v-if="isExternalURL!=='C'">
            <div v-if="mContent.convertSuccess=='Y' || mContent.convertFlag=='N'">
              <el-row>
                <el-col :span="24" style="height:360px">
                  <video-player :src="(content.isExternalURL=='Y'?content.externalSource:prefix+content.path+content.fileName)+'?'+new Date()" :poster="prefix+content.logoFile" :auto-play="true"></video-player>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-button @click="captrue" title="引导图" type="text"><i  class="fa fa-scissors"></i>截取引导图</el-button>
                </el-col>
              </el-row>
            </div>
            <div v-else>
              <el-row>
                <el-col :span="10">
                  <span>视频正在转换处理...</span>
                </el-col>
                <el-col :span="10">
                  <el-button @click="reConvert" title="转换视频" type="text"><i  class="fa fa-refresh"></i>重新转换</el-button>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
        </div>
        <div class="panel-fieldset" v-if="content.ID&&isExternalURL==='C'">
          <el-form-item prop="fullFilePath" label="视频">
            <el-row>
              <el-col style="height:360px">
                <div width="100%" v-html="mContent.externalSource">{{mContent.externalSource}}</div>
              </el-col>
            </el-row>
          </el-form-item>
        </div>
        <div class="panel-fieldset">
          <el-form-item prop="file" label="上传"  v-if="isExternalURL=='N'" >
            <upload-file ref="uploadFile"  :allow-type="mContent.allowType" :file.sync="mContent.file" @set-title="setTitle"></upload-file>
          </el-form-item>
          <el-form-item prop="externalSource" :label="`${isExternalURL==='Y'?'远程地址':'代码块'}`" v-show="isExternalURL!='N'">
            <el-row>
              <el-col :span="20">
                <el-input v-model="mContent.externalSource"  type="textarea" :autosize="{ minRows: 4, maxRows: 8}" placeholder="http://" :verify="['NotNull', 'Length<100']"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <!-- <el-form-item prop="convertFlag" label="是否转换" v-show="isExternalURL=='N'">
            <el-row>
              <el-col :span="10">
                <el-switch v-model="content.convertFlag"  active-value="Y" inactive-value="N"></el-switch>
              </el-col>
               <el-col :span="14">
                 （注：转换格式在栏目管理统一设置）
              </el-col>
            </el-row>
          </el-form-item> -->
        </div>

      </div>
      {{mContent.allowType}}
      <div slot="fileExif">
        <el-collapse-item title="视频信息" name="3" class="sidebar-item-box" v-show="mContent.ID">
          <el-form label-width="70px" >
            <el-form-item label="原名称">
              <span>{{mContent.oldFileName}}</span>
            </el-form-item>
            <el-form-item label="大小">
              <span>{{mContent.fileSize}}</span>
            </el-form-item>
            <el-form-item label="类型">
              <span>{{mContent.suffix}}</span>
            </el-form-item>
            <el-form-item label="宽">
              <span>{{mContent.width}}</span>
            </el-form-item>
            <el-form-item label="高">
              <span>{{mContent.height}}</span>
            </el-form-item>
            <el-form-item label="日期">
              <span>{{mContent.produceTime}}</span>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </div>
    </content-info>
    <video-captrue-dialog :visible.sync="cutLogo.show" :type="cutLogo.type" :content="mContent" :per-id="cutLogo.perId" :duration="content.duration" @replacelogo="replacelogo"></video-captrue-dialog>
  </div>
</template>
<script>
import util from '@src/common/util.js'
import ContentInfo from '../../contentcore/components/ContentInfo.vue'
import UploadFileComponent from '../../contentcore/components/UploadFileComponent.vue'
import VideoPlayer from '@src/components/VideoPlayer.vue'
import VideoCaptureDialog from './VideoCaptureDialog.vue'

export default {
  components: {
    'content-info': ContentInfo,
    'upload-file': UploadFileComponent,
    'video-player': VideoPlayer,
    'video-captrue-dialog': VideoCaptureDialog
  },
  props: {
    content: {
      type: Object
    },
    siteConfig: {
      type: Object
    },
    contentId: {
      type: [String, Number]
    },
    catalogId: {
      type: [String, Number]
    }
  },
  computed: {
    mContent: {
      set(val) {
        this.$emit('update:content', val)
      },
      get() {
        Vue.set(this.content, 'convertFlag', 'Y')
        return this.content
      }
    },
    isExternalURL: {
      set(val) {
        Vue.set(this.content, 'isExternalURL', val)
        console.log('content', this.content)
      },
      get() {
        !this.content.isExternalURL && Vue.set(this.content, 'isExternalURL', 'N')
        let flag = this.content.isExternalURL
        Vue.set(this.content, 'convertFlag', flag === 'N' ? 'Y' : 'N')
        return flag
      }
    }
  },
  data() {
    return {
      prefix: window.app ? window.app.prefix : window.opener && window.opener.app ? window.opener.app.prefix : '',
      uploadType: [ //  {name:'本地上传'value:'N'},{name:'网络',value:'Y'},{name:'第三方云服务',value:'S'}
        { name: '本地上传', value: 'N' },
        { name: '网络', value: 'Y' },
        { name: '代码块', value: 'C' }
      ],
      cutLogo: {
        type: '',
        perId: '',
        show: false
      },
      initType: false
    }
  },
  methods: {
    async reConvert() {
      try {
        let resp = await axios.put(`/ui/video/${this.mContent.ID}/reConvert`, { catalogID: this.content.catalogID })
        if (resp.data.status === 1) {
          await util.showProgress(resp.data.taskID, `正在发布`, '发布成功')
          this.$router.go(0)
        } else {
          this.$alert(resp.data.message || '发布失败')
        }
      } catch (e) {
        util.showErrorNotification(e)
      }
    },
    captrue() {
      if (this.mContent.isExternalURL !== 'N') {
        util.showErrorMessageBox('只能截取本地视频logo')
        return
      }
      this.cutLogo.show = true
    },
    replacelogo(val) {
      if (val) {
        this.mContent = Object.assign({}, this.mContent, {logoFile: `${val.data}?${new Date().getTime()}`})
        this.mContent.logoFile = val.data
      }
    },
    setTitle(val) {
      let roter = this.$router.currentRoute.path
      if (roter.endsWith('/new')) {
        if (val && val.lastIndexOf('.') !== -1) {
          this.mContent.title = val.substring(0, val.lastIndexOf('.'))
        } else {
          this.mContent.title = val
        }
      }
    },
    addPic() {
      this.cutData.push({ time: 0 })
    },
    removePic(item, i) {
      if (i === 0) {
        return
      }
      this.cutData.splice(i, 1)
    },
    catalogChange(catalog) {
      this.$emit('catalog-change', catalog)
    }
  }
}
</script>
