<template>
  <div class="attachment-container">
    <!-- 顶部的警示说明 -->
    <el-row v-if="!isTempShowVisible">
      <div class="course-container">
        <el-col :span="9">
          <p>所有无用文件会由程序自动清理, 手动删除后可能会造成未知错误!</p>
        </el-col>
        <el-col>
          <div class="clean-file">
            <i class="el-icon-delete-solid" />
            清理失效文件
          </div>
        </el-col>
      </div>
    </el-row>

    <!-- 筛选查找表单 -->
    <el-row v-if="isSearchVisible" class="form-container">
      <el-form ref="form" :model="form" label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="附件ID：" prop="attachmentId">
              <el-input v-model="form.attachmentId" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="来源类型：" prop="sourceType">
              <el-select v-model="form.sourceType" disabled placeholder="请选择">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="高度：" prop="height">
              <el-input v-model="form.height" type="number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="宽度：" prop="width">
              <el-input v-model="form.width" type="number"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="文件类型：" prop="documentType">
              <el-select v-model="form.documentType" placeholder="请选择">
                <el-option
                  v-for="item in fileType"
                  :key="item.val"
                  :label="item.name"
                  :value="item.val"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="存储引擎：" prop="storageEngine">
              <el-select v-model="form.storageEngine" placeholder="请选择">
                <el-option
                  v-for="item in provider"
                  :key="item.val"
                  :label="item.name"
                  :value="item.val"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="会员昵称：" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click="submitForm">查询</el-button>
              <el-button @click="resetForm('form')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>

    <!-- 上传删除筛选查找等按钮 -->
    <div class="action-select-container">

      <div class="left-container">
        <el-button
          type="primary"
          icon="el-icon-refresh-right"
          size="mini"
          class="button-margin-right"
          @click="initFileList(true)"
        ></el-button>

        <el-upload
          ref="upload"
          action=""
          class="inline-block"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="handleChange"
        >
          <el-button type="primary" size="mini" class="button-margin-right">
              <i class="el-icon-upload2" />上传
          </el-button>
        </el-upload>

        <el-button type="danger" size="mini" @click="deleteFile">
          <i class="el-icon-delete"></i>
          删除
        </el-button>

        <el-button size="mini" @click="addFolder">
          <i class="el-icon-folder" />
          新建文件夹
        </el-button>
        <el-button v-if="!isTempShowVisible" size="mini" @click="showStatistic">
          <i class="el-icon-finished" />
          附件统计
        </el-button>
        <el-button v-if="!isTempShowVisible" size="mini" class="button-margin-right">
          <i class="el-icon-upload" />
          本地存储上传至七牛云OSS
        </el-button>
        <i v-if="!isTempShowVisible" class="el-icon-s-home" />
        <span v-if="!isTempShowVisible">本地存储</span>
        <span v-if="!isTempShowVisible" class="storage-number">
          总容量：<span style="color:#FFA3A3">100GB</span>，已使用：<span
          style="color:#FFA3A3"
        >10GB</span
        >
        </span>
        <i v-if="!isTempShowVisible" class="el-icon-upload" />
        <span v-if="!isTempShowVisible">七牛云OSS</span>
        <span v-if="!isTempShowVisible" class="storage-number">
          已使用：<span style="color:#FFA3A3">10GB</span>
        </span>
      </div>

      <div class="right-container">
<!--          <el-input-->
<!--            class="input-serch"-->
<!--            style="padding-right: 10px;"-->
<!--            placeholder="搜索"-->
<!--            v-model="form.fileName"-->
<!--            autofocus-->
<!--          ></el-input>-->
          <el-button type="primary" size="mini" @click="showCustom">
            <i class="el-icon-menu"></i>
            <i class="el-icon-caret-bottom"></i>
          </el-button>
          <el-button type="primary" size="mini" @click="isSearchVisible = !isSearchVisible">
            <i class="el-icon-search"></i>
          </el-button>
      </div>
    </div>

    <!-- 面包屑导航栏 -->
    <div class="breadcrumb pointer">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-if="dirs && dirs.length > 0"
          class="high"
          @click.native="handleBack"
        >
          返回上一级
        </el-breadcrumb-item>

        <el-breadcrumb-item class="high" @click.native="handleRoot">
          全部文件
        </el-breadcrumb-item>

        <el-breadcrumb-item
          v-for="(dir, index) in dirs"
          :key="index"
          class="high"
          @click.native="handleTo(index)"
        >
          {{ dir.showName }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- Main content -->
    <!-- 文件table -->
    <div class="assets-table">
      <el-table
        ref="assetsTable"
        :data="fileList"
        stripe
        row-class-name="assets-row"
        style="width: 100%"
        @select="handleSelectionChange"
        @row-click="handleSelectionClick"
      >
        <el-table-column type="selection" align="center" width="55"></el-table-column>
        <el-table-column min-width="150" label="名称" align="start">
          <template slot-scope="{ row }">
            <el-image
              v-if="row.fileType == '1'"
              class="image"
              :src="row.imageUrl"
              :preview-src-list="[row.imageUrl]"
            >
            </el-image>
            <img
              v-if="row.fileType == '0'"
              src="/pic/setting-center/setting-folder@2x.png"
              class="image"
            />
            <span v-if="row.fileFid !== edit" class="name pointer">{{ row.showName }}</span>
            <el-input v-if="row.fileFid === edit" v-model="editTemp" style="width: 150px; margin-right: 10px"></el-input>
            <el-button v-if="row.fileFid === edit" type="primary" plain size="mini" icon="el-icon-check" @click.stop="createFileDir(row)"></el-button>
            <el-button v-if="row.fileFid === edit" type="danger" plain size="mini" icon="el-icon-close" @click.stop="cancel(row.fileFid)"></el-button>
          </template>
        </el-table-column>
        <el-table-column
          v-if="showField.fid"
          prop="fileFid"
          label="附件ID"
          align="center"
        ></el-table-column>
        <el-table-column
          v-if="showField.providerName"
          label="存储引擎"
          align="center"
          width="110"
        >
          <template slot-scope="{ row }">
            <div class="provider">
              <i class="el-icon-upload" />
              <span>{{ row.providerName }}</span>
            </div>
          </template>
        </el-table-column>
<!--        <el-table-column-->
<!--          v-if="showField.userNickname"-->
<!--          prop="userNickname"-->
<!--          label="会员昵称"-->
<!--          align="center"-->
<!--        ></el-table-column>-->
        <el-table-column
          v-if="showField.width"
          prop="width"
          sortable
          label="宽度"
          align="center"
        ></el-table-column>
        <el-table-column
          v-if="showField.height"
          prop="height"
          sortable
          label="高度"
          align="center"
        ></el-table-column>
        <el-table-column label="时间" width="160" align="center" prop="date">
        </el-table-column>
        <el-table-column
          v-if="showField.fileSize"
          prop="fileSize"
          sortable
          width="100"
          label="文件大小"
        ></el-table-column>
      </el-table>
      <div class="footer-pagination-box">
      <pagination :total="paginate.totalCount"
                  :page.sync="paginate.p"
                  :limit.sync="paginate.limit"
                  @pagination="handleCurrentChange" /></div>
    </div>

    <!-- 弹窗 -->
    <div class="dialog-container">
      <!-- 自定义列表弹窗 -->
      <el-dialog
        title="自定义列表"
        :visible.sync="customVisible"
        :modal="false"
        :close-on-click-modal="false"
      >
        <el-row class="custom-down">
          <el-col :span="1" :offset="2">
            <el-checkbox
              v-model="checkAll"
              :indeterminate="isIndeterminate"
            ></el-checkbox>
          </el-col>
          <el-col :span="3">
            <b>列表展示内容</b>
          </el-col>
        </el-row>
        <el-row class="custom-down">
          <el-col :span="8" :offset="2">
            <el-checkbox v-model="showField.fid">附件id</el-checkbox>
          </el-col>
          <el-col :span="8">
            <el-checkbox v-model="showField.width">宽度</el-checkbox>
          </el-col>
          <el-col :span="6">
            <el-checkbox disabled>来源类型</el-checkbox>
          </el-col>
        </el-row>
        <el-row class="custom-down">
          <el-col :span="8" :offset="2">
            <el-checkbox disabled>文件预览</el-checkbox>
          </el-col>
          <el-col :span="8">
            <el-checkbox v-model="showField.providerName">存储引擎</el-checkbox>
          </el-col>
          <el-col :span="6">
            <el-checkbox v-model="showField.height">高度</el-checkbox>
          </el-col>
        </el-row>
        <el-row class="custom-down">
          <el-col :span="8" :offset="2">
            <el-checkbox v-model="showField.fileSize">文件大小</el-checkbox>
          </el-col>
          <el-col :span="8">
            <el-checkbox disabled>操作</el-checkbox>
          </el-col>
          <el-col :span="6">
            <el-checkbox v-model="showField.userNickname">会员昵称</el-checkbox>
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="customVisible = false"
            >关闭</el-button
          >
<!--          <el-button @click="customVisible = false">重置</el-button>-->
        </div>
      </el-dialog>
      <!-- 附件统计弹窗 -->
      <AttachmentCount ref="statistic" />
    </div>
  </div>
</template>

<script>
import AttachmentCount from './components/AttachmentCount'
import Pagination from '@/components/Pagination/index'
import { fetchFileManageList, delFile, createDir } from '@/api/system-manage/annex-manage/annex-manage'

const log = console.log.bind(console)

/**
 * @author: 邱林胜
 * @createData: 2020年09月08日 15:13:49
 * @version：v1.0
 *
 * @desc: 系统管理下的附件管理页面
 */
export default {
  name: '',

  components: {
    AttachmentCount,
    Pagination
  },

  data() {
    return {
      isSearchVisible: false,
      isTempShowVisible: true,
      form: {
        name: '',
        attachmentId: '',
        sourceType: '',
        height: '',
        width: '',
        documentType: '',
        storageEngine: '',
        fileName: ''
      },
      paginate: {
        limit: 20,
        p: 1,
        totalCount: 0
      },
      provider: [],
      fileType: [],
      value: '',
      multipleSelection: [],
      customVisible: false,
      customList: [
        '附件id',
        '宽度',
        '来源类型',
        '文件预览',
        '存储引擎',
        '高度',
        '文件大小',
        '操作',
        '会员昵称'
      ],
      checkAll: false,
      isIndeterminate: true,
      edit: '-1',
      editTemp: '新建文件夹',
      // 文件夹路径堆栈
      dirs: [],
      fileList: [],
      // 控制table显示字段
      showField: {
        fid: true,
        fileSize: true,
        height: true,
        imageUrl: true,
        providerName: true,
        userNickname: true,
        width: true,
        sourceType: true
      }
    }
  },

  mounted() {
    this.initFileList()
  },

  methods: {
    handleSizeChange(val) {
      this.limit = val
      this.initFileList()
    },
    handleCurrentChange() {
      this.initFileList()
    },
    // 提交表单
    submitForm() {
      this.initFileList()
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 删除文件
    deleteFile() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择需要删除的文件')
        return
      }
      // const haveDir = this.multipleSelection.filter(item => item.fileType === '0').length > 0
      this.$confirm('是否删除文件，删除后不可恢复', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确认删除
        this.conformDeleteFile()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    showCustom() {
      this.customVisible = true
    },
    showStatistic() {
      this.$refs.statistic.show()
    },
    rename(row) {
      this.edit = row.fid
      this.editTemp = row.name
    },
    cancel(id) {
      const data = this.fileList
      if (this.editTemp === '新建文件夹') {
        log(this.editTemp, '执行了')
        for (let i = 0; i < data.length; i++) {
          const e = data[i]
          if (e.fileFid === id) {
            data.splice(i, 1)
            this.edit = '-1'
          }
        }
      }
    },
    max(list) {
      const l = list
      let temp = -1
      for (const e of l) {
        if (e > temp) {
          temp = e
        }
      }
      return temp
    },
    addFolder() {
      if (this.edit !== '-1') {
        return
      }
      const t = this.fileList
      const idList = t.map(element => element.fileFid)
      // const dateNow = new Date().toLocaleString()
      const result = {}
      result.fileFid = this.max(idList) + 1
      result.showName = ''
      result.fileType = '0'
      // result.date = dateNow.split(' ')[0].replaceAll('/', '-')
      t.unshift(result)
      // 使新建的文件夹的修改名字的input出现
      this.edit = result.fileFid
      this.editTemp = '新建文件夹'
      log(this.edit, 'id')
    },
    // 点击打开文件夹
    handleSelectionClick(row, event, column) {
      console.log('点击打开文件夹')
      this.paginate.p = 1
      if (this.edit !== '-1') {
        return
      }
      if (row.fileType === '0') {
        this.dirs.push(row)
        // 打开文件夹
        this.initFileList()
      }
    },
    // 返回上一级
    handleBack() {
      if (this.dirs.length > 0) {
        this.dirs.pop()
      }
      // 打开文件夹
      this.initFileList()
    },
    // 返回顶层
    handleRoot() {
      this.dirs = []
      // 打开文件夹
      this.initFileList()
    },
    // 跳转下标
    handleTo(index) {
      console.log(index)
      while (index < this.dirs.length - 1) {
        this.dirs.pop()
      }
      this.initFileList()
    },
    // 创建文件夹
    createFileDir(row) {
      var fid = '0'
      if (this.dirs.length > 0) {
        fid = this.dirs[this.dirs.length - 1].fileFid
      }
      const fileName = this.editTemp
      createDir(fid, fileName).then(resp => {
        if (parseInt(resp.code) === 0) {
          this.$message.success('操作成功～')
          this.edit = '-1'
          this.editTemp = '新建文件夹'
          this.initFileList()
        } else {
          this.$message.error(resp.msg)
          this.edit = '-1'
          this.editTemp = '新建文件夹'
          this.initFileList()
        }
      })
    },
    // 上传文件
    handleChange(file, fileList) {
      console.log(file)
      var fid = ''
      if (this.dirs.length > 0) {
        fid = this.dirs[this.dirs.length - 1].fileFid
      }
      this.$store
        .dispatch('system-manage/attachment-manage/uploadFile', {
          fid: fid,
          file: file
        })
        .then(() => {
          this.initFileList()
        })
        .catch(error => {
          this.$message.error(error)
        })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 删除文件方法
    conformDeleteFile() {
      this.multipleSelection.forEach(async item => {
        await delFile(item.fileFid)
        this.initFileList()
      })
      this.$message.success('操作成功~')
    },
    // 初始化数据
    initFileList(needToast = false) {
      this.edit = '-1'
      this.editTemp = '新建文件夹'
      let fid = ''
      if (this.dirs.length > 0) {
        fid = this.dirs[this.dirs.length - 1].fileFid
      }
      // this.$store
      //   .dispatch('system-manage/attachment-manage/loadFiles', { fid: fid })
      //   .then(data => {
      //     this.fileList = data.fileList
      //     this.provider = data.provider
      //     this.fileType = data.fileType
      //   })
      //   .catch(error => {
      //     this.$message.error(error)
      //   })
      const prams = {
        fid: fid,
        id: this.form.attachmentId,
        provider: this.form.storageEngine,
        height: this.form.height,
        width: this.form.width,
        ext: this.form.documentType,
        nickname: this.form.name,
        fileName: this.form.fileName,
        p: this.paginate.p,
        limit: this.paginate.limit
      }
      fetchFileManageList(prams).then(resp => {
        if (parseInt(resp.code) === 0) {
          if (needToast) {
            this.$message.success('刷新成功～')
          }
          this.fileList = resp.data.fileList
          this.provider = resp.data.provider
          this.fileType = resp.data.fileType
          this.paginate.totalCount = parseInt(resp.data.count)
        } else {
          this.$message.error(resp.msg)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.attachment-container {
  &::v-deep .el-input--medium .el-input__inner {
    height: 32px;
  }
  padding: 0 20px 0 20px;
  .course-container {
    width: 100%;
    height: 40px;
    background-color: #fff1f1;
    padding-left: 20px;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: #ff2424;
    margin-top: 20px;
    .clean-file {
      width: 116px;
      height: 32px;
      background-color: #e7faf0;
      color: #13ce66;
      text-align: center;
      line-height: 32px;
      cursor: pointer;
    }
  }
  .form-container {
    .el-form {
      padding-top: 20px;
      .el-form-item {
        .el-input {
          width: 54%;
        }
        .el-select {
          width: 54%;
        }
      }
    }
  }
  .button-container {
    .left {
      .storage {
        padding: 5px 0 0 5px;
        p {
          padding-left: 5px;
          font-size: 0.875rem;
          display: inline;
          margin: 0;
          font-family: PingFangSC-Medium;
        }
        .storage-number {
          font-size: 0.75rem;
        }
      }
    }
    .right {
      display: flex;
      justify-content: flex-end;
    }
  }
  .breadcrumb-container {
    margin: 20px 0 20px 0;
  }
  .table-container {
    .el-table {
      border-top: 1px solid #e6e6e6;
      border-bottom: 1px solid #e6e6e6;
      .el-table-column {
        height: 62px;
      }
    }
    .file-operation {
      float: right;
      i {
        margin-right: 10px;
      }
    }
    .edit-input {
      .el-input {
        width: 160px;
        margin-right: 10px;
      }
      .el-button {
        width: 30px;
        height: 30px;
        padding: 0;
      }
    }
  }

  .dialog-container {
    &::v-deep .el-dialog {
      box-shadow: #4d4d4d 0 0 20px 0;
      border-radius: 15px;
    }
    &::v-deep .el-dialog__header {
      font-family: PingFangSC-Regular, sans-serif;
      height: 60px;
      background-color: #f8f8f8;
      border-radius: 15px 15px 0 0;
    }
    &::v-deep .el-dialog__title {
      font-size: 14px;
    }
    .dialog-footer {
      text-align: center;
    }
    .custom-down {
      margin-bottom: 30px;
    }
  }
}

.inline-block {
  display: inline-block;
}

.assets-table {
  margin: 0 10px;
  .image {
    width: 30px;
    height: auto;
    margin-right: 16px;
    vertical-align: middle;
  }
  .sel-btn {
    width: 30px;
    height: 30px;
    background: #ffe7e7;
    border-radius: 2px;
    border: 0;
    color: #ff4949;
  }
  .provider {
    color: #13ce66;
    span {
      padding-left: 5px;
    }
  }
}
.breadcrumb {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  margin: 20px 22px 10px 22px;
  ::v-deep .high .el-breadcrumb__inner {
    color: #1890ff;
  }
  ::v-deep .el-breadcrumb__separator {
    color: #1890ff;
    margin: 0 6px;
  }
}

.action-select-container {
  width: 100%;
  /*background: red;*/
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  .left-container {
    display: flex;
    justify-content: center;
    align-items: center;
    .button-margin-right {
      margin-right: 12px;
    }
  }
  .right-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.create-folder-container {
  display: flex;
  .el-input {
    width: 160px;
    margin-right: 10px;
  }
}
  .footer-pagination-box {
    margin-top: 16px;
    margin-bottom: 26px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

</style>
