<template>
 <div class="padding-top-bottom">
    <content-info :content.sync="mContent" @catalog-change="catalogChange" :site-config="siteConfig" :catalog-id="catalogId">
      <div slot="editorList" v-show="mContent.ID">
        <el-list-view ref="multipleTable" :data="videos" :page-size="0">
          <template slot-scope="row">
            <div class="panel-fieldset">
              <el-row :gutter="10">
                <el-col :span="8" class="video-thumbnail" v-if="row.isExternalURL==='C'">
                  <div v-html="row.path">{{row.path}}</div>
                </el-col>
                <el-col :span="8" class="video-thumbnail" v-else>
                  <div v-if="row.isExternalURL=='Y'&&row.convertSuccess!='Y'">视频正在转换中</div>
                  <video-player v-else :src="(row.isExternalURL=='Y'?row.path+row.fileName:prefix+row.path+row.fileName)+'?'+row.randomNumber" :poster="prefix + row.logoFile" width="100%" height="100%" :auto-play="false" ></video-player>
                </el-col>
                <el-col :span="15">
                  <el-row>
                    <el-col :span="2">
                      标题:
                    </el-col>
                    <el-col :span="22">
                      <el-input type="text" v-model="row.VTitle" />
                    </el-col>
                  </el-row>
                  <br/>
                  <el-row>
                    <el-col :span="2">
                      摘要:
                    </el-col>
                    <el-col :span="22">
                      <el-input type="textarea" v-model="row.VIntro" />
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <el-row class="list-card-buttons">
                <el-col :span="19">
                  <span><i class="video-info-item" v-if="row.isExternalURL === 'N'">原名称:<em>{{row.oldFileName}}</em></i> <i class="video-info-item" v-if="row.isExternalURL === 'N'">大小:<em>{{row.fileSize}}</em></i> 类型:<em>{{row.suffix}}</em> <i class="video-info-item" v-if="row.isExternalURL === 'N'">宽:<em>{{row.width}}</em> 高:<em>{{row.height}}</em></i> <i class="video-info-item" v-if="row.isExternalURL === 'N'">视频时长:<em>{{ row.duration | times }}</em></i></span>
                </el-col>
                <el-col :span="5" class="imgBtn-class">
                  <el-button @click="recover(row.ID)" v-if="row.isExternalURL === 'N'" class="el-button-extends"> <i class="fa fa-refresh" aria-hidden="true" title="重新转换"></i></el-button>
                  <el-button @click="setLogo(row)" v-if="row.isExternalURL === 'N'" class="el-button-extends"><i class="fa fa-camera-retro" aria-hidden="true" title="截取视频封面"></i></el-button>
                  <el-button @click="uploadLogo(row)" v-else class="el-button-extends"><i class="fa fa-file-image-o" aria-hidden="true" title="上传视频封面"></i></el-button>
                  <el-button v-show="row.logoFile" @click="setContentLogo(row)"  class="el-button-extends"><i class="fa fa-picture-o" aria-hidden="true" title="设置为视频集封面"></i></el-button>
                  <el-button @click="del(row.ID)"  class="el-button-extends"><i class="fa fa-times" aria-hidden="true" title="删除"></i></el-button>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-list-view>
        <el-toolbar>
          <el-button @click="addVideos('N')"><i class="fa fa-plus"></i>添加视频</el-button>
          <el-button @click="addVideos('Y')"><i class="fa fa-plus"></i>添加网络视频</el-button>
          <el-button @click="addVideos('R')"><i class="fa fa-plus"></i>添加资源库视频</el-button>
          <el-button @click="addVideos('C')"><i class="fa fa-plus"></i>添加视频代码片段</el-button>
        </el-toolbar>
      </div>
    </content-info>
    <video-captrue-dialog :visible.sync="cutLogo.show" :type="cutLogo.type" :content="content" :per-id="cutLogo.perId" :duration="cutLogo.duration" @replacelogo="replacelogo"></video-captrue-dialog>
    <video-upload-dialog :visible.sync="videoUploadModal" :content="content" :type="addVideoType" @refreshlist="refreshContentList"></video-upload-dialog>
    <video-select-dialog :visible.sync="videoSelectModal" :content="content" @refreshlist="refreshContentList"></video-select-dialog>
    <resource-dialog :show.sync="resourceDialogModal" :resourceDialogProps="resourceDialogProps" title="缩略图上传" @callback="resourceDialogCallback"></resource-dialog>
 </div>
</template>
<script>
import util from '@src/common/util.js'
import ContentInfo from '../../contentcore/components/ContentInfo.vue'
import videoUpload from '../../contentcore/components/UploadVideoDialog.vue'
import videoSelectDialog from '../../contentcore/components/VideoSelectDialog.vue'
import VideoPlayer from '@src/components/VideoPlayer.vue'
import VideoCaptureDialog from './VideoCaptureDialog.vue'
import resouceDialog from '@src/pages/contentcore/resourceDialog.vue'
let currentVideo = null
export default {
  components: {
    'content-info': ContentInfo,
    'video-upload-dialog': videoUpload,
    'video-player': VideoPlayer,
    'video-captrue-dialog': VideoCaptureDialog,
    'resource-dialog': resouceDialog,
    videoSelectDialog
  },
  filters: {
    times: function(val) {
      let s = val % 60
      let m = (val - s) / 60 % 60
      let h = (val - m * 60 - s) / (60 * 60)
      return `${h >= 1 ? h + '时' : ''}${m >= 1 ? m + '分' : ''}${s >= 1 ? s + '秒' : ''}`
    }
  },
  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() {
        return this.content
      }
    },
    videos: {
      set(val) {
        this.mContent = Object.assign({}, this.mContent, { videos: val })
      },
      get() {
        // TODO: 在vue的规则里get方法里不能赋值，请调整下面的代码
        // if (this.content.videos) {
        //   this.content.videos = this.content.videos.filter(function(image, index) {
        //     return image.ID > 0
        //   })
        //   this.content.videos.forEach(video => {
        //     video.randomNumber = parseInt(Math.random() * 1000000)
        //   })
        // }
        return this.content.videos
      }
    }
  },
  data() {
    return {
      prefix: window.app ? window.app.prefix : window.opener && window.opener.app ? window.opener.app.prefix : '',
      videoUploadModal: false,
      cutLogo: {
        type: 'group',
        perId: '',
        show: false,
        duration: 0
      },
      addVideoType: '',
      videoSelectModal: false,
      resourceDialogModal: false,
      resourceDialogProps: {
        resourceType: 'image',
        catalogID: 0,
        inputType: 'radio',
        imageType: 'logo'
      }
    }
  },
  methods: {
    addVideos(type) {
      if (type === 'R') {
        this.videoSelectModal = true
        return
      }
      this.addVideoType = type
      this.videoUploadModal = true
    },
    async del(id) {
      let resp = await axios.delete(`/ui/videogroup/${this.content.ID}/${id}`)
      util.showResponseMessage(resp.data)
      if (resp.data.status === 1) {
        this.refreshContentList()
      }
    },
    async recover(id) {
      try {
        let resp = await axios.put(`/ui/videogroup/${this.content.ID}/reconvert/${id}`, {catalogID: this.content.catalogID})
        if (resp.data.status === 1) {
          await util.showProgress(resp.data.taskID, `正在转换...`, '转换成功')
          this.refreshContentList()
        } else {
          this.$alert(resp.data.message || '转换失败')
        }
      } catch (e) {
        util.showErrorNotification(e)
      }
    },
    async setLogo(row) {
      if (row.isExternalURL === 'Y') {
        util.showErrorMessageBox('网络视频等无法截取logo')
        return
      }
      this.cutLogo = Object.assign({}, this.cutLogo, { perId: row.ID, show: true, duration: row.duration })
    },
    uploadLogo(row) {
      this.resourceDialogModal = true
      currentVideo = row
    },
    resourceDialogCallback(spath, path) {
      currentVideo.logoFile = path
    },
    setContentLogo(row) {
      if (row.logoFile) {
        this.mContent.logoFile = row.logoFile
      }
    },
    replacelogo(res) {
      if (res.data) {
        var basicVideoInfo = res.data.data
        if (basicVideoInfo) {
          for (let i = 0; i < this.videos.length; i++) {
            let video = this.videos[i]
            if (video.ID === basicVideoInfo.ID) {
              video.logoFile = basicVideoInfo.logoFile + (basicVideoInfo.logoFile.indexOf('?') !== -1 ? '&random=' : '?random=') + Date.now()
              break
            }
          }
        }
      }
    },
    refreshContentList() {
      this.$emit('refreshlist', true)
      this.randomNumber = parseInt(Math.random() * 1000000)
    },
    catalogChange(catalog) {
      this.$emit('catalog-change', catalog)
    }
  }
}
</script>
<style scoped>
.el-button-extends {
  padding: 0px;
  border: none;
}
.imgBtn-class {
  text-align: right;
}
.list-img {
  text-align: center;
  max-width: 200px;
  max-height: 178px;
}
.video-thumbnail {
  width: 240px;
  height: 180px;
}
.video-info-item{
  font-style:normal;
}
.list-card-buttons i{
  padding-right: 0;
}
</style>
<style>
.editor-style-title .el-input__inner {
  color: inherit;
}
.video-thumbnail .vjs-big-play-button {
  top: 68px !important;
  left: 70px !important;
}
.video-status-converting {
  color:#909399;
  text-align:center;
  font-size:16px;
  line-height:180px;
}
</style>
