<template>
  <div class="resource-manage">
    <div v-loading="resourceLoading">
      <div class="resource-item" v-for="res in res_list" :key="res.id">
        <div class="res_icon">{{ res.type }}</div>
        <div class="resource-item-name ellipsis">
          {{ res.name }}
        </div>
        <div
          class="resource-item-action"
          @click="$emit('addToSection', res)"
          v-if="!res.isSelected && nowCheckSection.onlyKey"
        >
          选中
        </div>
        <div
          class="resource-item-action"
          @click="$emit('delForSection', res)"
          v-if="res.isSelected && nowCheckSection.onlyKey"
        >
          取消
        </div>
      </div>
    </div>
    <div class="section-right-floor">
      <el-pagination
        small
        layout="prev, pager, next"
        :total="resourcePageInfo.total"
        :page-size="resourcePageInfo.size"
        :current-page.sync="resourcePageInfo.current"
        @current-change="findAllResource"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { findAllResourceApi } from '@/api/system/resource'

export default {
  props: {
    nowCheckSection: {
      default: () => {}
    }
  },
  data () {
    return {
      resourcePageInfo: { current: 1, size: 15, total: 0 },
      path: '/',
      resourceLoading: true,
      res_list: []
    }
  },
  created () {
    this.findAllResource()
  },
  watch: {
    nowCheckSection () {
      this.getSelected()
    }
  },
  methods: {
    async findAllResource () {
      this.resourceLoading = true
      const {
        data: { list, total }
      } = await findAllResourceApi({
        path: this.path,
        ...this.resourcePageInfo,
        likeName: '',
        sortBySize: '',
        sortByCreateTime: ''
        // ...this.pageInfo
      })
      this.resourcePageInfo.total = total
      list.forEach((item) => {
        item.isSelected = false
      })
      this.res_list = list
      this.resourceLoading = false
    },
    getSelected (wareList = this.nowCheckSection.courseware) {
      try {
        this.res_list.forEach((item) => {
          item.isSelected = false
        })
        wareList?.forEach((ware) => {
          const index = this.res_list.findIndex((res) => {
            if (ware.fileId === res.id && !ware.delFlag) {
              return true
            }
            return false
          })
          if (index !== -1) {
            this.res_list[index].isSelected = true
          }
        })
      } catch (error) {}
    }
  }
}
</script>

<style lang="scss" scoped>
.resource-manage {
  display: flex;
  height: 100%;
  flex-direction: column;
  > div {
    flex: 1;
  }
  height: 100%;
  ::v-deep .el-table__header-wrapper {
    display: none;
  }

  .resource-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 35px;
  }
  .res_icon {
    height: 30px;
    width: 33px;
    line-height: 30px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    background-color: #f2a05c;
    transform: scale(0.8);
  }
  .resource-item-name {
    flex: 1;
  }
  .ellipsis {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-box-orient: vertical;
    display: unset;
    word-wrap: break-word;
    white-space: nowrap;
  }
  .resource-item-action {
    width: 35px;
    color: $--color-primary;
    cursor: pointer;
  }
  .section-right-floor {
    width: 100%;
    display: flex;
    justify-content: center;

    flex: 0;
  }
}
</style>
