<template>
  <div class="container">
    <el-table
      :data="fileList"
      class="table"
      highlight-current-row
      @row-contextmenu="contextMenu"
      @row-dblclick="dblclick"
      style="width: 100%">
        <el-table-column
          label="名称"
          width="260">
          <template slot-scope="scope">
            <div class="is-folder">
              <i :class="currentIsFiLe?'el-icon-document': 'el-icon-folder'+' file-icon'"></i>
              <span style="margin-left: 10px">{{ scope.row.file_name || scope.row.folder_name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="fileList[0] && !currentIsFiLe"
          label="类型"
          width="170">
          <template slot-scope="scope">
            {{ folderTypeOptions[scope.row.file_type || scope.row.folder_type] }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="mode != 'favor' && !currentIsFiLe"
          prop="file_count"
          label="我上传的数量"
          width="170">
        </el-table-column>
        <el-table-column
          v-if="manageMode"
          label="公开/不公开"
          width="180">
          <template slot-scope="scope">
            {{ scope.row.is_public == 1 ? '不公开': (scope.row.is_public == 2 ? '对所有教师公开': '对部分教师公开')}}
          </template>
        </el-table-column>
        <el-table-column
          v-if="manageMode"
          prop="file_count"
          label="文档数量"
          width="150">
        </el-table-column>
        <el-table-column
          prop="create_by"
          label="创建人"
          width="160">
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="创建时间"
          min-width="220">
        </el-table-column>
    </el-table>
    <div class="pagination" v-if="currentIsFiLe">
      <pagination
        :amount="paginationQuery.amount"
        :page-size="paginationQuery.pageSize"
        :page-index="paginationQuery.pageIndex"
        @getCurrentPage="handleCurrentChange"
        @getSizeChange="handleSizeChange"
      />
    </div>
  </div>
</template>

<script>
export default {
    name: 'SmallFolder',
    components: {
        Pagination: () => import('@/common/Pagination')
    },
    props: {
        fileList: {
            type: Array,
            default: () => {
                return []
            }
        },
        currentIsFiLe: {
            type: Boolean,
            default: false
        },
        mode: { // 模式：upload: 我上传的， favor: 分享收藏
            type: String,
            default: 'upload'
        },
        manageMode: { // 是否为我管理的页面使用
            type: Boolean,
            default: false
        },
        paginationQuery: {
            type: Object,
            default: () => {
                return { amount: 0, pageSize: 50, pageIndex: 1 }
            }
        }
    },
    computed: {
        folderTypeOptions () {
            /* 根据foderType来判断显示哪种options */
            const uploadType = { 1: '学校文件夹', 2: '个人文件夹' }
            const school = { 1: '常规文件夹', 2: '任务文件夹' }
            const favorType = { 1: '我收藏的', 2: '我分享的', 3: '分享给我的' }
            let folderTypeOptions = {}
            switch (this.mode) {
            case 'upload':
                folderTypeOptions = uploadType
                break
            case 'favor':
                folderTypeOptions = favorType
                break
            case 'school':
                folderTypeOptions = school
                break
            }
            return folderTypeOptions
        }
    },
    data () {
        return {
        }
    },
    methods: {
        contextMenu (row, column, event) {
            event.stopPropagation()
            event.preventDefault()
            this.$emit('showMenu', event, this.currentIsFiLe, row)
        },
        dblclick (row, column, event) {
            this.$emit('tableIntoFile', row)
        },
        handleSizeChange (val) {
            this.$emit('getSizeChange', val)
        },
        handleCurrentChange (val) {
            this.$emit('getCurrentPage', val)
        }
    }
}
</script>

<style lang="less" scoped>
.container {
  /deep/ .table{
      font-size: 16px;
      width: 100%;

      tr {
        th.is-leaf {
          border: none;

          .cell {
            line-height: 30px;
            border-left: 1px solid rgb(202, 202, 202);
            padding-left: 20px;
          }
        }

        th.is-leaf:first-child {
          padding-left: 30px;
        }
      }

      .el-table__row td{
        border: none;
        padding-left: 12px;

        .is-folder{
          cursor: pointer;
          &:hover{
            color: #409eff;
          }

          .file-icon {
            font-size: 24px;
            vertical-align: sub;
          }
        }
      }

      .el-table__row td:first-child {
        padding-left: 20px;
      }
  }

  .pagination {
    text-align: center;
    margin-top: 50px;
  }
}
</style>
