<template>
  <div>
    <el-toolbar>
      <el-button @click="cutClickHandle" :disabled="path===''"><i class="fa fa-cut"></i>裁剪</el-button>
      <el-button :class="{'btn-manage-active':manageStatus}" @click="manageStatus = !manageStatus"><i class="fa fa-window-maximize"></i>管理</el-button>
    </el-toolbar>
    <div style="height:315px;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">
              <el-button @click.stop="delResource(item.ID)" class="btn-manage-delete" v-show="manageStatus"><i class="fa fa-times"></i></el-button>
              <img :imageid="item.ID" :title="item.oldName" :src="item.prefix+item.logoFile" onerror="this.src='assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png';">
            </div>
            <div class="radio-wrap">
              <el-radio :label="item.ID">{{item.oldName}}</el-radio>
            </div>
          </li>
        </ul>
      </el-radio-group>
    </div>
    <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, sizes, ->, prev, pager, next, jumper">
      </el-pagination>
    </div>
    <imagecutting-dialog :show.sync="imageCuttingModal" :siteID="siteID" :imagePath="path" @callback="imageCuttingCallback"></imagecutting-dialog>
  </div>
</template>
<script>
import commonImageCuttingDialog from '@src/pages/contentcore/commonImageCuttingDialog.vue'

export default {
  components: {
    'imagecutting-dialog': commonImageCuttingDialog
  },
  data() {
    return {
      specialID: window.initdata.ID,
      imageCuttingModal: false,
      siteID: window.initdata.siteID,
      imgRadio: 0, // 绑定资源单选框
      path: '', // 资源路径
      resourcesIDs: '', // 资源id
      manageStatus: false, // 控制管理按钮开关
      resourcesData: [], // 资源数据
      pageSizes: [10, 20, 30, 50], // 分页大小控制
      pageSize: 10, // 分页当前页大小
      pageIndex: 1, // 分页当前页索引
      total: 0, // 分页中数据总量
      resourceType: 'image'
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    // 加载资源数据
    async loadData() {
      let obj = {
        specialID: this.specialID,
        resourceType: this.resourceType,
        pageSize: this.pageSize,
        pageIndex: this.pageIndex - 1
      }
      let resourcesDataGrid = await axios.get(
        '/ui/pageweaver/resource', {
          params: obj
        }
      )
      this.resourcesData = resourcesDataGrid.data.data
      this.total = resourcesDataGrid.data.total
    },
    async delResource(resourceID) {
      let delresult = await axios.delete(`/ui/pageweaver/resource/${resourceID}`, {
        params: {
          SpecialID: this.specialID
        }
      }
      )
      if (delresult.data.status === 1) {
        this.loadData()
      }
    },
    /* 资源库图片点击事件 */
    imgClick(val, imgID, path) {
      this.imgRadio = imgID
      this.resourcesIDs = imgID
      this.path = path
    },
    cutClickHandle() {
      this.imageCuttingModal = true
    },
    async imageCuttingCallback(sPath, path) {
      // this.sPath = sPath
      this.path = path
      let updateResource = await axios.put(`/ui/pageweaver/resource/${this.resourcesIDs}`, {
        path: path
      })
      if (updateResource.data.status === 1) {
        this.loadData()
      }
    },
    confirm() {
      if (this.resourcesIDs !== '') {
        this.$emit('resourceSelected', this.resourcesIDs)
      } else {
        this.$message({
          message: '请选择图片',
          type: 'warning'
        })
        window.eventHub.$emit('confirmInvalid')
      }
    },
    sizeChangeHandler(val) {
      this.pageSize = val
      this.loadData()
    },
    // 资源库页面索引改变事件
    currentChangeHandler(val) {
      this.pageIndex = val
      this.loadData()
    }
  }
}

</script>
<style>
.btn-manage-active{
  background:#28b06e!important;
  color:#fff!important;
  padding-left: 10px!important
}
</style>
<style scoped>
  .resources-ul {
    padding: 10px 0;
  }

  .resources-ul li {
    float: left;
    width: 115px;
    padding: 0;
    height: 135px;
    margin: 5px;
    overflow: hidden;
    position:relative;
  }

  .img-div {
    height: 110px;
    width: 115px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    cursor: pointer;
  }

  .img-div img {
    max-width: 115px;
    max-height: 110px;
  }

  .radio-wrap {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 7px;
  }

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

  .resources-page-bar {
    background-color: #e6e6e6;
    width: 100%;
    position: relative;
    bottom: 0px;
  }
  .btn-manage-delete{
    padding:0;
    border:none;
    position:absolute;
    width:36px;
    height:36px;
    border-radius:36px;
    animation:all 0.5s ease;
    top:50%;
    left:50%;
    margin-left:-18px;
    margin-top:-18px;
    background:rgba(255,255,255,0.75)
  }
  .btn-manage-delete i{
    color:red;
    padding-right:0;
  }
  .btn-manage-delete:hover {
    background:#fff;
  }
</style>
