<template>
  <div class="uploader" v-loading="loading" elemeur-loading-text="服务器受理中...">
    <Panel title="资源管理" class="flex-1">
      <template slot="buttons">
        <el-button class="blue" @click="queryUserData" icon="el-icon-fa-search">查询</el-button>
        <el-button class="yellow" @click="resetquery" icon="el-icon-fa-reply-all">重置</el-button>
        <el-button class="blue" @click="saveUpload" icon="el-icon-fa-save" v-if="uuid && allowSave">批量保存</el-button>
      </template>
      <el-form :model="pageTable.param" ref="queryform">
        <el-row>
          <el-col :lg='4' :sm='12'>
            <el-form-item label="文件名称" prop="fileName">
              <el-input v-model="pageTable.param.fileName"/>
            </el-form-item>
          </el-col>
          <el-col :lg='4' :sm='12'>
            <el-form-item label="文件类别" prop="fileType">
              <el-select placeholder="请选择" v-sys-code="'fileType'" v-model="pageTable.param.fileType" clearable>
                <el-option v-for="item in sysCode.fileType" :key="item.key" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg='4' :sm='12'>
            <el-form-item label="开始时间(上传)" prop="starTime">
              <el-date-picker v-model="pageTable.param.starTime" type="datetime" placeholder="选择开始时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :lg='4' :sm='12'>
            <el-form-item label="结束时间(上传)" prop="endTime">
              <el-date-picker v-model="pageTable.param.endTime" type="datetime" placeholder="选择结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </Panel>
    <Panel title="资源列表" class="flex-1">
      <el-alert style='margin-bottom:10px;' title="文件名带有红色的(*),说明此时文件处于临时状态并没有关联主键，请点击“批量保存”按钮！" type="warning">
      </el-alert>


      <el-table border :data="pageTable.data" element-loading-spinner="el-icon-loading" v-loading="pageTable.isLoading"
                element-loading-text="数据加载中" height="300px" max-height="300px" ref="table">
        <el-table-column type="index" fixed='left' width="50"></el-table-column>
        <el-table-column prop="filename" label="文件名" show-overflow-tooltip sortable>
          <template slot-scope="scope">
            <span class="font-red" v-if="scope.row.state==='0'">*</span>
            <span>{{scope.row.filename}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="filesize" label="文件大小" width="100" sortable align="right"
                         :formatter="fileSizeFormat"></el-table-column>
        <el-table-column prop="crtime" label="上传时间" sortable :formatter="formatterDate" width='100'></el-table-column>
        <el-table-column prop="filetype" label="格式" width='80' sortable></el-table-column>
        <el-table-column prop="filemd5" label="MD5" show-overflow-tooltip sortable v-if="!readonly"></el-table-column>
        <el-table-column prop="filepath" label="服务器路径" show-overflow-tooltip sortable v-if="!readonly"></el-table-column>
        <el-table-column prop="fileurl" label="下载路径" show-overflow-tooltip sortable v-if="!readonly"></el-table-column>
        <el-table-column label="操作" fixed='right' width="200" align="center">
          <template slot-scope="scope">
            <el-button class="blue" icon="el-icon-fa-cloud-download" @click="proxyUrl(scope.row.fileurl)">下载</el-button>
            <el-button v-if="allowTrash && !readonly" icon="el-icon-fa-trash" class="red"
                       @click="deleteUpdata(scope.$index,scope.row)">作废
            </el-button>
            <el-button v-if="allowSave && scope.row.state==='0' && !readonly" icon="el-icon-fa-check" class="blue"
                       @click="sureFile(scope.$index,scope.row)">保存
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <export-ctrl class="pull-left" @export="pageTable.handleExport($event, $refs.table)"/>
      <el-pagination background :page-size.sync="pageTable.size" :current-page.sync="pageTable.curr" :total="pageTable.total"/>
    </Panel>


    <Panel title="待上传列表" class="flex-1" v-if="!readonly">
      <template slot="buttons">
        <div style="float: right;">
          <el-upload style='display: inline-block;margin-right: 3px;' :on-error="fileUploadError" :on-change="fileUploadChange"
                     :show-file-list="false" :accept="accept" multiple :data="data" ref="upload"
                     :action="uploadPath" :auto-upload="false" :on-success='uploadSuccess'>
            <el-button class="blue" icon="el-icon-tickets">选择文件</el-button>
          </el-upload>
          <el-button class="blue" icon="el-icon-fa-cloud-upload" @click="submitUpload">批量上传</el-button>
        </div>
      </template>
      <el-table hideTitle style="min-height:100px;" :data="fileList" border row-key="uid" stripe highlight-current-row
                v-if="!readonly">
        <el-table-column prop="name" label="文件名" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="size" label="文件大小" width="80" align="right" :formatter="fileSizeFormat"></el-table-column>
        <el-table-column label="进度">
          <template slot-scope="scope">
            <el-progress style="line-height:unset;" :text-inside="true" :stroke-width="14"
                         :percentage="parseInt(scope.row.percentage)"
                         :status="(scope.row && scope.row.status==='fail')? 'exception' : ''"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed='right' width="200" align="center">
          <template slot-scope="scope">
            <el-button class="blue" icon="el-icon-fa-cloud-upload" :disabled="scope.row.status==='fail'"
                       @click="hanleUpload(scope.$index,scope.row)">上传
            </el-button>
            <el-button class="red" icon="el-icon-fa-trash" @click="hanleRemove(scope.$index,scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </Panel>
  </div>
</template>
<script>
  import FilesAPI from "@/api/base/sysm/FilesAPI";
  import config from "@/config";
  import PageTable from "@/libs/PageTable";

  export default {
    props: {
      uuid: String,
      module: String,
      accept: String,
      allowTrash: {
        type: Boolean,
        default: true
      },
      allowSave: {
        type: Boolean,
        default: true
      },
      readonly: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        pageTable: new PageTable({
          autoLoad: false,
          doLoad: FilesAPI.list,
          param: {},
          log: false
        }),
        loading: false,
        uploadPath: config.ajaxUrl + "/sys/file/upload",
        successFiles: [],
        fileList: [],
        queryform: {
          starTime: null,
          endTime: null,
          fileType: null,
          fileName: null
        }
      };
    },
    computed: {
      data() {
        return {
          module: this.module,
          uuid: this.uuid
        };
      }
    },
    mounted() {
      this.queryUserData();
    },
    watch: {
      uuid() {
        if (!this.readonly) {
          this.$refs.upload.clearFiles();
        }
        this.queryUserData();
      }
    },
    methods: {
      queryUserData() {
        this.pageTable.handleLoad();
      },
      proxyUrl(url) {
        window.open(config.ajaxUrl + "/" + url);
      },
      fileSizeFormat(row, column, cellValue) {
        if (cellValue === 0) return "0 B";
        let k = 1000;
        let sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
        let i = Math.floor(Math.log(cellValue) / Math.log(k));
        return (cellValue / Math.pow(k, i)).toPrecision(3) + " " + sizes[i];
      },
      // 手动触发文件上传
      submitUpload() {
        this.$refs.upload.submit();
      },
      // 文件上传成功回调函数
      uploadSuccess(response, file, fileList) {
        if (response.respCode === "000000" && response.fileInfo) {
          let keys = Object.keys(response.fileInfo);
          let tem = {};
          keys.forEach((value, index) => {
            let t = value.toLowerCase();
            tem[t] = response.fileInfo[value];
          });
          this.successFiles.splice(0, 0, tem);
          this.$refs.upload.handleRemove(file);
          this.pageTable.handleLoad();
        } else {
          this.$message.error("上传失败!");
        }
      },
      hanleUpload(index, file) {
        this.$refs.upload.$refs["upload-inner"].upload(file.raw);
      },
      hanleRemove(index, file) {
        this.$refs.upload.handleRemove(file);
      },
      fileUploadError(e, file, fileList) {
        fileList.push(file);
        this.$message.error("有文件上传失败!");
      },
      // 添加文件
      fileUploadChange(file, fileList) {
        this.fileList = fileList;
      },
      // 删除上传的企业附件
      async deleteUpdata(index, data) {
        try {
          this.loading = true;
          await FilesAPI.delete(data.uuid);
          this.queryUserData();
        } finally {
          this.loading = false;
        }
      },
      saveUpload() {
        FilesAPI.useAll(this.uuid)
          .then(() => {
            this.$emit("save", this.successFiles);
            this.queryUserData();
          })
          .catch(() => {
            this.loading = false;
          });
      },
      sureFile(index, data) {
        this.loading = true;
        FilesAPI.use(data.uuid)
          .then(() => {
            this.loading = false;
            data.state = "1";
          })
          .catch(() => {
            this.loading = false;
          });
      },
      resetquery() {
        this.$refs.queryform.resetFields();
        this.queryform.starTime = null;
        this.queryform.endTime = null;
        this.picker = [];
      }
    }
  };
</script>
<style lang="scss">
  .filetitlt {
    height: 30px;
    line-height: 30px;
    border: 1px solid #ddd;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: #f6f7fb;
    position: relative;
    padding: 0px 10px;

    & h3 {
      margin: 0px;
      padding: 0px;
      height: 100%;
      line-height: 30px;
      font-weight: 400;
      color: #000;
      font-size: 12px;
      display: inline-block;
    }
  }
</style>
