<template>
  <div>
        <el-row id="resources-row">
            <el-col :span="7" id="resources-col">
              <resource-select-menu @callback="catalogTreeNodeClick"></resource-select-menu>
            </el-col>
            <el-col :span="17">
              <el-toolbar style="position:relative">
                <span v-if="resourcePickerProps.selectorURL === 'imageResources'">
                  <el-button>
                    <i class="fa fa-cut"></i>裁剪</el-button>
                </span>
              </el-toolbar>
              <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"></el-input>
                <el-button type="primary" @click="loadingResourcesData">查询</el-button>
              </div>
              <div v-if="resourcePickerProps.selectorURL === 'imageResources'">
                <div style="height:320px;overflow:auto;background-color:#F7F7F7;">
                  <el-radio-group v-model="imgRadio">
                    <ul class="resources-ul">
                      <li v-for="item in resourcesData" v-bind:key="item.ID" @click="imgClick(item.prefix+item.logoFile,item.ID,item.logoFile)">
                        <div class="img-div" style="height:126px;width:126px; line-height:126px;text-align:center;cursor:pointer;">
                          <img style="max-width:125px;max-height:125px;" :imageid="item.ID" :title="item.name" :src="item.prefix+item.logoFile" onerror="this.src='assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png';">
                        </div>
                        <el-radio :label="item.prefix+item.logoFile">{{item.oldName}}</el-radio>
                      </li>
                    </ul>
                  </el-radio-group>
                </div>
              </div>
              <div v-if="resourcePickerProps.selectorURL === 'fileResources'">
                <el-table :data="resourcesData" height="320" class="resources-table" v-loading="resourcesDataLoading" highlight-current-row @row-click="selecteRow">
                  <el-table-column type="index" width="60" align="center"></el-table-column>
                  <el-table-column label="名称">
                    <template slot-scope="scope">
                      <el-radio v-model="imgRadio" :label="scope.row.prefix+scope.row.path" class="table-radio">&nbsp;{{scope.row.name}}
                      </el-radio>
                    </template>
                  </el-table-column>
                  <el-table-column width="80" label="类型">
                    <template slot-scope="scope">
                      <img :src="scope.row.icon">
                    </template>
                  </el-table-column>
                  <el-table-column prop="fileSize" width="100" label="大小"></el-table-column>
                </el-table>
              </div>
              <!-- 下面两种资源情况没有做相应的测试，具体样式可能会要细调 -->
              <div v-if="resourcePickerProps.selectorURL === 'videoResources'">
                <el-table :data="resourcesData" height="320" class="resources-table" v-loading="resourcesDataLoading" highlight-current-row @row-click="selecteRow">
                  <el-table-column type="index" width="60" align="center"></el-table-column>
                  <el-table-column label="名称">
                    <template slot-scope="scope">
                      <div style="float:left;">
                        <el-radio v-model="imgRadio" :label="scope.row.ID" class="table-radio">&nbsp;
                        </el-radio>
                      </div>
                      <div style="float:left;overflow:visible;">
                        <div class="floatPicWrap" :style="scope.row.logoFile=''?'display:none':''">
                          <img :src="scope.row.oldName+scope.row.suffix" style="max-height:120px;max-width:120px" onerror="this.src='assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png';" />
                        </div>
                        {{scope.row.oldName}}.{{scope.row.suffix}}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column width="80" label="类型">
                    <template slot-scope="scope">
                      <img :src="scope.row.icon">
                    </template>
                  </el-table-column>
                  <el-table-column prop="fileSize" width="100" label="大小"></el-table-column>
                </el-table>
              </div>
              <div v-if="resourcePickerProps.selectorURL === 'audioResources'">
                <el-table :data="resourcesData" height="320" class="resources-table" v-loading="resourcesDataLoading" highlight-current-row @row-click="selecteRow">
                  <el-table-column type="index" width="60" align="center"></el-table-column>
                  <el-table-column label="名称">
                    <template slot-scope="scope">
                      <el-radio v-model="imgRadio" :label="scope.row.ID" class="table-radio">&nbsp;{{scope.row.name}}
                      </el-radio>
                    </template>
                  </el-table-column>
                  <el-table-column width="80" label="类型">
                    <template slot-scope="scope">
                      <img :src="scope.row.icon">
                    </template>
                  </el-table-column>
                  <el-table-column prop="fileSize" width="100" label="大小"></el-table-column>
                  <el-table-column width="70" label="">
                    <template slot-scope="scope">
                      <embed name="movie" type="application/x-shockwave-flash" src="../../tools/musicplayer.swf?player_mode=mini&counter=off&volume_btn=off" width="60" height="20" wmode="transparent" quality="high" :flashvars="'mp3='+scope.row.prefix+scope.row.path"/>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <!--分页-->
              <div class="resources-page-bar">
                <el-pagination @size-change="resourcesSizeChangeHandler" @current-change="resourcesCurrentChangeHandler" :current-page.sync="resourcesPageIndex" :page-sizes="resourcesPageSizes" :page-size="resourcesPageSize" :total="resourcesTotal" layout="total, prev, pager, next, jumper">
                </el-pagination>
              </div>
            </el-col>
        </el-row>
  </div>
</template>

<script>
import util from '@src/common/util.js'
import ResourceSelectMenu from '@src/pages/contentcore/components/ResourceSelectMenu.vue'
import ResourceTagSearch from '../../workspace/ResourceTagSearch.vue'
export default {
  components: {
    'resource-select-menu': ResourceSelectMenu,
    'resource-tag-search': ResourceTagSearch
  },
  props: [
    'resourcePickerProps' //  传递过来的对象，可包含manualAllowTypedataType,dataID,resourceType    //  catalogIDimageWidth,imageHeight,resourceID,inputType,suffix等多个属性
  ],
  data() {
    return {
      resourcesPageSizes: [10, 20, 30, 50], // 分页大小控制
      resourcesPageSize: 30, // 分页当前页大小
      resourcesPageIndex: 1, // 分页当前页索引
      resourcesTotal: 0, // 分页中数据总量
      specialID: this.$route.params.specialID,
      catalogID: this.$route.params.catalogID,
      catalogTree: [], // 栏目树数据
      treeOptions: { key: 'ID', label: 'name', children: 'children' }, // 树属性选项
      resourcesDataLoading: false, // 资源数据加载动画
      resourcesData: [], // 资源数据
      imgRadio: 0, // 绑定资源单选框
      keyword: '', // 搜索关键词
      tags: ''
    }
  },
  created() {
    this.loadingResourcesData()
    window.forDialogOnOk = this.forDialogOnOk
  },
  methods: {
    /* 加载资源数据 */
    async loadingResourcesData() {
      this.tmpResourceProps.branchInnerCode = this.tmpResourceProps.branchInnerCode ? this.tmpResourceProps.branchInnerCode : 'Y'
      let obj = {
        branchInnerCode: this.tmpResourceProps.branchInnerCode,
        siteID: this.resourcePickerProps.siteID || '',
        resourceType: this.resourcePickerProps.resourceType || '',
        keyword: encodeURIComponent(this.keyword),
        tags: encodeURIComponent(this.tags),
        suffix: this.resourcePickerProps.suffix,
        pageSize: this.resourcesPageSize,
        pageIndex: this.resourcesPageIndex - 1
      }
      let resourcesDataGrid = await axios.get(
        '/ui/resourcesselector/resourcesdatagrid',
        {
          params: obj
        }
      )
      this.resourcesData = resourcesDataGrid.data.data
      this.resourcesTotal = resourcesDataGrid.data.total
    // console.log(resourcesDataGrid.data)
    },

    /* 资源复制 */
    copy() {
      if (this.imgRadio === 0) {
        this.$alert('请选择需要复制的资源文件', '提示', {
          confirmButtom: '确定',
          type: 'info'
        })
        return
      }
      if (this.resourcePickerProps.selectorURL !== 'videoResources') {
        this.resourcesIDs = this.imgRadio
      }
      this.showCatalogSelector = true
    },
    /* 栏目树点击节点触发事件 */
    catalogTreeNodeClick(val) {
      this.resourcePickerProps.branchInnerCode = val
      this.loadingResourcesData()
    },
    /* 资源库表格行点击 */
    selecteRow(val) {
    // console.log(val)
      this.imgRadio = val.prefix + val.path
      this.path = val.path
    },

    /* 资源库图片点击事件 */
    imgClick(val, imgID, path) {
      this.imgRadio = val
      this.resourcesIDs = imgID
      this.path = path
    },
    /* 渲染树样式 */
    renderContent: function(createElement, { node, data, store }) {
      let params = {
        h: createElement,
        treeObj: { node, data, store }
      }
      return util.renderTreeContent(params)
    },

    /* 资源库页面大小改变事件  */
    resourcesSizeChangeHandler(val) {
      this.resourcesPageSize = val
      this.loadingResourcesData()
    },
    /* 资源库页面索引改变事件 */
    resourcesCurrentChangeHandler(val) {
      this.resourcesPageIndex = val
      this.loadingResourcesData()
    }
  }
}
</script>
<style scoped>

#resources-row {
  height: 450px;
}

#resources-col {
  background-color: #e6e6e6;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}

.catalog-tree {
  color: black;
}

#resources-search-div {
  padding: 5px;
  text-align: right;
  border: 1px solid #e6e6e6;
  background-color: #e6e6e6;
}

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

.resources-ul {
  margin: auto;
}

.resources-ul li {
  list-style-type: none;
  width: 126px;
  height: 150px;
  float: left;
  overflow: hidden;
  margin: 5px 10px;
}

.img-div:hover {
  background: #fff68f;
}

.resources-table {
  width: 100%;
  font-size: 12px;
  overflow: scroll;
}

.table-radio {
  font-size: 13px;
  font-weight: normal;
}
</style>
