<template>
  <div>
    <el-row>
      <el-col :span="6" class="bg-fff borderR5" style="border-bottom-left-radius: 0">
        <Form onsubmit="return false" :label-width="80" style="display:inline-block; width: 95%;" inline class="search-form">
          <label class="label-sign2" style="margin-left: 10px"></label>
          <Form-item style="width: 100%" label="文件管理">
            <Input
              v-model="formObj.name"
              placeholder="请输入文件名称"
              clearable
              style="width: 100%"
              icon="ios-search-outline"
              @on-click="_formSearch"
              @on-enter="_formSearch"
            />
          </Form-item>
        </Form>
      </el-col>
      <el-col :span="18" class="ilist-style">
        <el-row>
          <el-col :span="12" style="">
            <icon-list
              style="width: 70%; margin-left: 30px;margin-top:20px "
              :msg="ilist"
              :residue="residue"
              :current-folder-id="currentFolderId"
              @on-result-change="_iClick"
            >
            </icon-list>
          </el-col>
          <el-col :span="12" style="height: 33px">
            <div style="display: table-cell; line-height: 33px; float: right;">
              <i class="iconfont icon-fuwuqi" style="vertical-align: middle; font-size: 20px; display: inline-block; color: #ff9900"></i>
              <span style="color: #000000; font-size: 12px; display: inline-block">您的共享文件空间： {{ space }} </span>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="bg-fff padding-10 borderRB5">
      <el-col :span="24">
        <div
          style="height: 30px; line-height: 32px; background-color: #F2F2F2 !important; color: black !important;"
        >
          <div style="float: left; margin-left: 10px;">
            <span class="place-style" @click="_breakParentItem">
              您当前所在位置： {{ university }}
            </span>
            <span
              v-for="(row,index) in folderList"
              :key="row.id"
              class="place-style"
              @click="_breakItem(row,index)"
            >
              > {{ row.name }}
            </span>
          </div><br />
        </div>
      </el-col>
      <el-col :span="24" style="">
        <div class="bg-fff padding-10" style="margin-top: -2px; padding-top: 12px; border: #F2F2F2 1px solid; border-top: none">
          <element-table
            ref="pageTable"
            :page-columns="pageColumns"
            :get-page="getPage"
            show-cnt-table
            show-check-box
            select-data
            :table-height="tableHeight"
            @on-result-change="_tableResultChange"
          >
            <el-table-column
              v-for="item in pageColumns"
              :key="item.key"
              show-overflow-tooltip
              sortable
              :prop="item.key"
              :label="item.title"
              :width="item.width"
              :min-width="200"
              :fixed="item.fixed?item.fixed:undefined"
            >
              <template slot-scope="scope">
                <div v-if="item.date">
                  {{ scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd HH:MM:ss'):'' }}
                </div>
                <div v-else-if="item.detail" style="position: relative">
                  <a style="display: inline-block;margin-left: 20px" @click.stop="_detailModal(scope.row)">
                    {{ scope.row[item.key] }}
                  </a>
                  <div v-if="scope.row.fileType === '.png'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/PNG.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.jpg'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/JPEG.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.log'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/LOG.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.word'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/WORD.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.txt'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/TXT.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.doc'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/PNG.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.docx'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/DOCX.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.gif'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/GIF.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.pdf'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/PDF.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.ppt'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/PPT.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.ppts'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/PPTS.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.pptx'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/PPTX.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.xls'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/XLS.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.xlsx'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/XLSX.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '文件夹'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/文件夹.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.zip'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/压缩格式.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.rar'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/压缩格式.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.ai'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/AI.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.app'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/APP.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.avi'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/AVI.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.bpm'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/BPM.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.cdr'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/CDR.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.conf'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/CONF.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.csv'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/CSV.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.exe'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/EXE.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.html'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/HTML.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.iso'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/ISO.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.java'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/JAVA.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.mov'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/MOV.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.mp3'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/MP3.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.mpeg'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/MPEG.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.mpg'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/MPG.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.psd'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/PSD.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.svn'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/SVN.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.swf'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/SWF.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else-if="scope.row.fileType === '.wav'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/WAV.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div><div v-else-if="scope.row.fileType === '.wav'">
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/WAV.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                  <div v-else>
                    <div style="position: absolute;top: 3px; left: 0">
                      <img src="../../static/images/fileIcon/未知格式.png" alt="" style="width: 16px; height: 16px">
                    </div>
                  </div>
                </div>
                <div v-else>
                  {{ scope.row[item.key] }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" :width="100">
              <template slot-scope="scope">
                <icon-list
                  :msg="iconMsg"
                  :row-data="scope.row"
                  @on-result-change="_iconClick"
                >
                </icon-list>
              </template>
            </el-table-column>
          </element-table>
        </div>
      </el-col>
    </el-row>
    <!--  添加文件夹  -->
    <fileEdit ref="fileModal" @on-result-change="_search"></fileEdit>
    <!--  重命名  -->
    <fileRenameEdit ref="fileRenameModal" @on-result-change="_search"></fileRenameEdit>
    <!--  上传  -->
    <upload ref="uploadModal" @on-result-change="_search"></upload>
  </div>
</template>

<script>
import { fileManage } from '../../api'
import { getDown } from '../../api/downfile'
import global from '../../api/config'
import fileEdit from './fileEdit'
import fileRenameEdit from './fileRenameEdit'
import upload from './upload'
export default {
  components: { fileEdit, fileRenameEdit, upload },
  data() {
    return {
      id: '',
      name: '',
      keyword: '',
      action: '',
      university: '',
      formObj: {
        name: '',
        folderId: undefined
      },
      space: '',
      residue: '',
      folderList: [],
      currentFolderId: '',
      imgName: '',
      imgUrl: '',
      visible: false,
      smallUrl: global.staticURL + '/img/smallfile/',
      bigUrl: global.staticURL + '/img/bigfile/',
      folderUrl: global.staticURL + '/img/bigfile/folder.png',
      getPage: {},
      pageColumns: [
        { title: '文件名称', key: 'name', detail: true },
        { title: '文件类型', key: 'fileType', width: 150 },
        { title: '创建人', key: 'uname', width: 150 },
        { title: '修改时间', key: 'ctime', width: 200, date: true }
      ],
      ilist: [
        {
          type: 'pt-a-edit',
          id: '',
          color: '#ff9900',
          name: '添加文件夹'
        },
        {
          type: 'pt-a-edit',
          id: '',
          color: '#26D310',
          name: '上传文件'
        },
        {
          type: 'pt-a-edit',
          id: '',
          color: '#d81e06',
          name: '删除'
        }
      ],
      allList: [], // 文件和文件夹总数据
      fileList: [],
      pageList: {},
      iconMsg1: [
        { type: 'pt-a-edit', id: '', name: '重命名', disabled: true },
        { type: 'pt-a-edit', id: '', name: '下载' }
      ],
      iconMsg: [
        { type: 'pt-a-edit', id: '', name: '重命名' },
        { type: 'pt-a-edit', id: '', name: '下载' }
      ],
      selectIds: [],
      selectData: []
    }
  },
  computed: {
    List() {
      return {
        records: this.allList,
        total: this.getPage.total,
        current: this.getPage.current
      }
    },
    tableHeight: function() {
      if (this.searchOpen) {
        return this.$tableHeight('search')
      } else {
        return this.$tableHeight('', 265)
      }
    }
  },
  mounted() {
    this.keyword = ''
    // 获取文件夹
    // 获取文件
    this._page()
  },
  methods: {
    _search() {
      this._page()
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    _detailModal(row) {
      if (row.fileType === '文件夹') {
        this._getPageByClick(row)
      }
    },
    async _getPageByClick(row) {
      this.currentFolderId = row.id
      this.formObj.folderId = row.id
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await fileManage.pageSchoolFileVO(
        this.$serializeForm(this.formObj)
      )
      if (result) {
        this.getPage = result
        let ok = true
        for (let j = 0; j < this.folderList.length; j++) {
          const ob = this.folderList[j]
          if (ob.id === row.id) {
            ok = false
          }
        }
        if (ok) {
          this.folderList.push(row)
        }
        this.$refs.pageTable._hideLoading()
      }
    },
    async _getFileStorage() {
      const result = await fileManage.getFileStorage()
      if (result) {
        this.space = result.used + 'M/' + result.capacity + 'M'
        this.residue = result.capacity - result.used
      }
    },
    async _page() {
      this.university = global.getUserInfo().companyName

      Object.assign(this.formObj, this.$refs.pageTable._searchParams())

      const result = await fileManage.pageSchoolFileVO(
        this.$serializeForm(this.formObj)
      )
      if (result) {
        this.getPage = result
        this.$refs.pageTable._hideLoading()
      }
      this._getFileStorage()
    },
    _breakItem(row, index) {
      console.log('_breakItem(row)', row, index)
      const arrayButton = []
      if (index === 0) {
        arrayButton.push(this.folderList[0])
      } else {
        for (let i = 0; i <= index; i++) {
          arrayButton.push(this.folderList[i])
        }
      }
      this.folderList = arrayButton
      this.currentFolderId = row.id
      this.formObj.currentFolderId = row.id
      // this.$set(this.formObj, 'currentFolderId', row.id)
      this.formObj.folderId = row.id
      this._page()
    },

    _breakParentItem() {
      this.folderList = []
      this.currentFolderId = undefined
      this.formObj.folderId = undefined
      this._page()
    },
    // 搜索文件
    _searchFile() {
      if (this.keyword) {
        this.pageList.name = this.keyword
      } else {
        this.pageList.name = ''
      }
      this._page()
    },
    _selectRowChange(data) {
      const idList = []
      for (let i = 0; i < data.length; i++) {
        idList.push(data[i].id)
      }
      this.selectIds = idList
    },
    _selectAll: function(data) {
      this._selectRowChange(data)
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this._page()
          break
        case 'selectData':
          this.selectIds = data.map(({ id }) => id)
          this.selectData = data
          break
        case 'iconClick':
          this._iconClick(data.name, data.rowData)
          break
        default:
          this._page()
      }
    },
    _iconClick(msg, data) {
      switch (msg) {
        case '重命名':
          this.$refs.fileRenameModal._open(data.id)
          break
        case '下载':
          this._download(data)
          break
      }
    },
    _iClick(msg) {
      switch (msg) {
        case '添加文件夹':
          this.$refs.fileModal._open(this.currentFolderId)
          break
        case 'upload':
          this.currentFolderId = this.formObj.currentFolderId
          this._page()
          break
        case '上传文件':
          this._upload()
          break
        case '删除':
          this._deleteFiles()
          break
      }
    },
    _upload() {
      this.$refs.uploadModal._open(this.currentFolderId, this.residue)
    },
    _deleteFiles() {
      const ids = this.selectIds
      if (ids.length === 0) {
        this.$message.warning('请至少选择一条数据！')
      } else {
        this.$Modal.confirm({
          title: '提示',
          content: `确定删除?`,
          onOk: () => {
            this._deleteFilesByIds(ids)
          }
        })
      }
    },

    async _deleteFilesByIds(ids) {
      const result = await fileManage.deleteFolderByIds(ids)
      if (result) {
        this.$message.success('删除成功!')
        this._page()
      }
    },
    _download(data) {
      if (data.fileType === '文件夹') {
        getDown(
          '/v1/file/download_batch?folderId=' + data.id,
          data.name + '.zip',
          'get'
        )
      } else {
        getDown('/v1/file/down_load/' + data.id, data.name, 'get')
      }
    }
  }
}
</script>

<style scoped>
.Home {
  background-color: #f2f2f2;
}
.search-form {
  margin-bottom: -10px !important;
  margin-left: 2px;
  padding-left: 0;
  background-color: #ffffff;
}
.search-form >>> .ivu-form-item-label {
  line-height: 17px;
  font-size: 16px;
}
.search-form .ivu-form-item {
  margin-top: 10px;
  margin-left: 17px;
  margin-bottom: 10px;
}
.search-form >>> .ivu-input-wrapper {
  background-color: #f2f2f2;
  border-radius: 5px;
}
.search-form >>> .ivu-input {
  height: 26px;
  line-height: 1;
  border: none;
  background-color: #f2f2f2;
}
.place-style {
  font-size: 11px;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  color: black;
  border: none;
}
.ilist-style {
  padding-top: 11px;
  padding-right: 10px;
  padding-bottom: 3px;
  border-top-right-radius: 5px;
  background-color: #ffffff;
}
</style>
