<template>
  <el-dialog title="选择资源库视频" :visible.sync="isVisible" :append-to-body="true" @open="dialogOpen" class="video-select-dialog">
      <el-row id="resources-row">
        <el-col :span="8" id="resources-col">
          <resource-select-menu @callback="catalogTreeNodeClick"></resource-select-menu>
        </el-col>
        <el-col :span="16">
          <div id="resources-search-div">
            <resource-tag-search :tags.sync="tags" ref="tagRef" @callback="loadingResourcesData" style="width:200px"></resource-tag-search>
            <el-input v-model="keyword" @keyup.enter.native="loadingResourcesData" style="width:270px" placeholder="请选择标题">
              <el-button slot="append" @click="loadingResourcesData">查询</el-button>
            </el-input>
          </div>
          <div class="floatVideoWrap" v-if="videoWrapModal">
            <video-player :src="videoFilePath" :poster="videoFilePath" :auto-play="true" width="450px" height="300px"></video-player>
          </div>
          <el-table :data="resourcesData" height="370" class="resources-table" highlight-current-row @selection-change="onSelectionChange">
            <el-table-column type="index" label=" " width="60" align="center"></el-table-column>
            <el-table-column type="selection" width="40" align="center"></el-table-column>
            <el-table-column label="名称" show-overflow-tooltip>
              <template slot-scope="scope">
                <div  class="floatPicCell">
                  {{scope.row.oldName}}.{{scope.row.suffix}}
                  <div class="floatPicWrap" v-show="!!scope.row.logFile">
                      <img :src="scope.row.logoFile" style="max-height:120px;max-width:120px" onerror="this.src='assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png';"/>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column width="60" label="类型" align="center">
              <template slot-scope="scope">
                <img :src="scope.row.icon">
              </template>
            </el-table-column>
            <el-table-column prop="fileSize" width="100" label="大小" align="center"></el-table-column>
            <el-table-column width="90" label=" ">
              <template slot-scope="scope">
                <span class="video-preview" @mouseover="videoPreview(scope.row)" @mouseout="videoWrapModal = false">
                  <el-button type="text">视频预览</el-button>
                </span>
              </template>
            </el-table-column>
          </el-table>
          <div class="resources-page-bar">
            <el-pagination @size-change="sizeChangeHandler" @current-change="currentChangeHandler" :current-page.sync="pageIndex" :page-sizes="pageSizes" :page-size="pageSize" :total="total" layout="total,->, prev, pager, next, jumper">
            </el-pagination>
          </div>
        </el-col>
      </el-row>
      <div slot="footer">
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
</template>
<script>
import util from '@src/common/util.js'
import ResourceSelectMenu from './ResourceSelectMenu.vue'
import videoPlayer from '@src/components/VideoPlayer.vue'
import ResourceTagSearch from '../../workspace/ResourceTagSearch.vue'
export default {
  components: {
    'resource-select-menu': ResourceSelectMenu,
    videoPlayer,
    'resource-tag-search': ResourceTagSearch
  },
  props: {
    content: {
      type: Object
    },
    visible: {
      type: Boolean
    }
  },
  data() {
    return {
      pageSizes: [10, 20, 30, 50], // 分页大小控制
      pageSize: 30, // 分页当前页大小
      pageIndex: 1, // 分页当前页索引
      total: 0, // 分页中数据总量
      keyword: '', // 搜索关键词
      branchInnerCode: 'Y',
      resourcesData: [],
      videoFilePath: '',
      videoWrapModal: false,
      selectedDatas: [],
      tags: []
    }
  },
  computed: {
    isVisible: {
      get() {
        return !!this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    sizeChangeHandler(val) {
      this.pageSize = val
      this.loadingResourcesData()
    },
    currentChangeHandler(val) {
      this.pageIndex = val
      this.loadingResourcesData()
    },
    // 栏目树点击节点触发事件
    catalogTreeNodeClick(val) {
      this.branchInnerCode = val
      this.loadingResourcesData()
    },
    // 加载资源数据
    async loadingResourcesData() {
      let obj = {
        branchInnerCode: this.branchInnerCode,
        resourceType: 'video',
        keyword: encodeURIComponent(this.keyword),
        tags: encodeURIComponent(this.tags),
        suffix: 'avi,wmv,mov,mpg,mpeg,flv,rm,rmvb,mp4',
        pageSize: this.pageSize,
        pageIndex: this.pageIndex - 1
      }
      let res = await axios.get('/ui/resourcesselector/resourcesdatagrid', {
        params: obj
      })
      this.resourcesData = res.data.data
      this.total = res.data.total
    },
    onSelectionChange(selection) {
      this.selectedDatas = selection.concat()
    },
    videoPreview(row) {
      this.videoFilePath = row.prefix + row.path
      this.videoWrapModal = true
    },
    dialogOpen() {
      this.tmpVideo = {
        title: '',
        info: '',
        sourceUrl: '',
        file: '',
        externalSource: 'http://',
        isExternalURL: 'R',
        convertFlag: 'N'
      }
      this.selectedDatas = []
      this.loadingResourcesData()
    },
    async confirm() {
      if (this.selectedDatas.length === 0) {
        this.$alert('请选择要添加的视频', '提示', {
          type: 'warning'
        })
        return
      }
      let res = await axios.post(`/ui/videogroup/${this.content.ID}/libres`, {
        data: this.selectedDatas
      })
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.isVisible = false
        this.$emit('refreshlist')
      }
    }
  }
}
</script>
<style scoped>
.el-300 {
  width: 300px;
}
</style>

<style>

/* 在一般情况下dialog宽为680像素，在逻辑分辨率480像素以下dialog宽为96% */
.video-select-dialog .el-dialog {
  width: 850px;
}
@media (max-width: 480px) {
  .video-select-dialog .el-dialog {
    width: 96%;
  }
}
</style>

<style scoped>
.tabs-wrap {
  height: 510px;
}

#resources-row {
  height: 460px;
  background-color: #f5f5f5;
  padding:1px;
}

#resources-col {
  overflow: auto;
  height: 99%;
}

.catalog-tree {
  color: black;
}

#resources-search-div {
  padding: 5px;
  text-align: right;
  border: 1px solid #eee;
  border-width: 1px 0;
}

.resources-page-bar {
  width: 100%;
  position: relative;
  bottom: 0px;
}

.resources-table {
  width: 100%;
}

.table-radio {
  font-size: 13px;
  font-weight: normal;
}

.el-upload__tip {
  word-break: break-all;
  word-wrap: break-word;
  line-height: 24px;
}

.floatPicWrap {
  display: none !important;
}

.floatPicCell:hover .floatPicWrap {
  display: block !important;
  position: absolute;
  left: 0;
  top: 0;
  float: left;
  z-index: 2200;
}

.audio-player {
  padding: 2px 0 2px 5px;
}

.audio-player:hover {
  border: 1px solid #ccc;
}

.video-preview:hover {
  padding: 5px 0;
  border: 1px solid #ccc;
}

.floatVideoWrap{
  position: absolute;
  float: left;
  z-index: 2200;
}
</style>
