<template>
  <el-dialog title="选择资源库图片" :visible.sync="isVisible" :append-to-body="true" @open="dialogOpen" class="image-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>
          <el-row class="resource-icon" v-loading="dataLoading">
            <el-checkbox-group v-model="selectedData" style="width: 100%;">
              <el-col :span="6" v-for="item in resourcesData" v-bind:key="item.ID" :offset="1">
                <el-card :body-style="{ padding: '0px' }">
                  <div class="image" @click.stop="updateCheckedData(item)"><img :imageid="item.ID" :title="item.name" :src="prefix+item.logoFile" onerror="this.src='assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png';"/></div>
                  <div class="resource-title">
                    <el-checkbox :label="item">{{item.oldName}}</el-checkbox>
                  </div>
                </el-card>
              </el-col>
            </el-checkbox-group>
          </el-row>
          <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 ResourceTagSearch from '../../workspace/ResourceTagSearch.vue'
export default {
  components: {
    'resource-select-menu': ResourceSelectMenu,
    'resource-tag-search': ResourceTagSearch
  },
  props: {
    content: {
      type: Object
    },
    visible: {
      type: Boolean
    }
  },
  data() {
    return {
      dataLoading: true,
      prefix: this.$root.prefix,
      pageSizes: [10, 20, 30, 50], // 分页大小控制
      pageSize: 30, // 分页当前页大小
      pageIndex: 1, // 分页当前页索引
      total: 0, // 分页中数据总量
      keyword: '', // 搜索关键词
      tags: '',
      treeOptions: { key: 'ID', label: 'name', children: 'children' }, // 树属性选项
      catalogTree: [], // 栏目树数据
      branchInnerCode: 'Y',
      resourcesData: [],
      selectedData: []
    }
  },
  computed: {
    isVisible: {
      get() {
        return !!this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    updateCheckedData(item) {
      if (this.selectedData.includes(item)) {
        this.selectedData = this.selectedData.filter(val => val.ID !== item.ID)
      } else {
        this.selectedData.push(item)
      }
    },
    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: 'image',
        keyword: encodeURIComponent(this.keyword),
        tags: encodeURIComponent(this.tags),
        suffix: 'jpg,jpeg,gif,png,bmp',
        pageSize: this.pageSize,
        pageIndex: this.pageIndex - 1
      }
      this.dataLoading = true
      let res = await axios.get('/ui/resourcesselector/resourcesdatagrid', {
        params: obj
      })
      this.resourcesData = res.data.data
      this.dataLoading = false
      this.total = res.data.total
    },
    dialogOpen() {
      this.tmpVideo = {
        title: '',
        info: '',
        sourceUrl: '',
        file: '',
        externalSource: 'http://',
        isExternalURL: 'R',
        convertFlag: 'N'
      }
      this.selectedData = []
      this.loadingResourcesData()
    },
    async confirm() {
      if (this.selectedData.length === 0) {
        this.$alert('请选择要添加的图片', '提示', {
          type: 'warning'
        })
        return
      }
      let res = await axios.post(`/ui/contentcore/contents/${this.content.ID}/images/libres`, {
        data: this.selectedData,
        catalogID: this.content.catalogID,
        groupID: this.content.ID
      })
      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% */
.image-select-dialog .el-dialog {
  width: 850px;
}
@media (max-width: 480px) {
  .image-select-dialog .el-dialog {
    width: 96%;
  }
}
.image-select-dialog .resource-icon {
  width: 100%;
  height: 370px;
  overflow: auto;
  background-color: #f9f9f9;
  margin: 0 auto;
}
.image-select-dialog .resource-icon .el-col-offset-1 {
  margin-left: 3.33333%;
}
.image-select-dialog .resource-icon .image {
  display: table-cell;
  height: 120px;
  vertical-align: middle;
}
.image-select-dialog .resource-icon .el-card {
  border: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0);
  box-shadow: 0 0 0 0;
  overflow: hidden;
  height: 150px;
  margin: 5px;
}
.image-select-dialog .resource-icon .el-card img {
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
}
.image-select-dialog .resource-icon .el-card img:hover {
  background: #fff68f;
}
.image-select-dialog .resource-icon .resource-title {
  margin-top: 5px;
}
.image-select-dialog .resource-icon .resource-title .el-radio {
  text-overflow: ellipsis;
  overflow: hidden;
}
.image-select-dialog .resource-icon .resource-title .el-checkbox .el-radio__label {
  font-weight: 100 !important;
  font-size: 13px;
  padding-left: 2px;
}
.image-select-dialog .resource-icon .el-col-6 {
  width: 21%;
}
</style>

<style scoped>

#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>
