<template>
  <div>
    <el-drawer class="custom-drawer-form" title="其它附件管理" size="1000px" :visible.sync="drawer" direction="rtl" :before-close="close" destroy-on-close>
      <el-container class="project-file">
        <el-header>
          <el-form :inline="true" class="project-file-header-form">
            <el-form-item label="名称">
              <el-input v-model="queryParams.name" size="small" placeholder="请输入文件名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="" size="small" @click="getList">查询</el-button>
              <el-button type="primary" size="small" @click="handleAdd()">新增</el-button>
            </el-form-item>
          </el-form>
        </el-header>
        <el-main class="project-file-main">
          <el-table v-loading="loading" :data="tableData" border header-row-class-name="custom-table-header">
            <el-table-column type="index" label="#" width="55" align="center"></el-table-column>
            <el-table-column prop="name" label="名称" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="suffix" label="类型" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="projectName" label="所属专题库" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="createName" label="创建人" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ $d(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="150">
              <template slot-scope="scope">
                <el-dropdown  split-button type="primary" size="small" >
                  <span @click="handleEdit(scope.row)">编辑</span>
                  <el-dropdown-menu slot="dropdown" class="text-align_center">
                    <el-dropdown-item @click.native="handleDownload(scope.row)">下载</el-dropdown-item>
                    <el-dropdown-item @click.native="preview(scope.row)">预览</el-dropdown-item>
                    <el-dropdown-item divided class="color-red" @click.native="handleDelete(scope.row)">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <!-- <el-button  size="small" type="primary" @click="handleDownload(scope.row)">下载</el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </el-main>
        <el-footer class="footer-common">
          <el-button @click="close">关 闭</el-button>
        </el-footer>
      </el-container>
    </el-drawer>

    <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" append-to-body destroy-on-close :before-close="cancel">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" label-position="left">
        <el-form-item label="文件名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入文件名称"></el-input>
        </el-form-item>
        <el-form-item label="文件选择" class="margin-bottom_0" required>
          <el-upload class="upload-file" drag action="#" :auto-upload="false" :show-file-list="false" :on-change="onChange">
            <i :class="!ruleForm.file ? 'el-icon-upload' : 'el-icon-refresh'"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip"></div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  data() {
    return {
      type: 0,
      projectId: 0,
      drawer: false,
      loading: false,
      btnLoading: false,
      total: 0,
      tableData: [],
      queryParams: {
        name: '',
        type: '',
        size: 10,
        current: 1,
        projectId: 0,
        order: 'desc'
      },
      title: '',
      dialogVisible: false,
      ruleForm: {},
      rules: {
        name: [{ required: true, message: '请输入文件名称', trigger: 'blur' },],
      },
    }
  },
  computed: {

  },
  mounted() {
  },
  methods: {
    close() {
      this.drawer = false
      this.$emit('close')
    },
    open(id, type) {
      this.type = type
      this.projectId = id
      this.queryParams.projectId = id
      this.queryParams.type = type
      this.drawer = true
      this.getList()
    },
    onChange(file, fileList) {
      this.$set(this.ruleForm, 'name', file.name.substring(0, file.name.lastIndexOf(".")))
      this.$set(this.ruleForm, 'file', file.raw)
    },
    getList() {
      this.loading = true
      this.$api.getProjectFileList(this.queryParams).then(response => {
        this.tableData = response.data.records
        this.total = response.data.total
        this.loading = false
      }).catch(error => {
        this.loading = false
      })
    },

    cancel() {
      this.$set(this.ruleForm, 'name', '')
      this.$set(this.ruleForm, 'file', undefined)
      this.$set(this.ruleForm, 'remark', '')
      this.$set(this.ruleForm, 'type', this.type)
      this.$set(this.ruleForm, 'id', undefined)
      this.dialogVisible = false
    },
    handleAdd() {
      this.title = '新增'
      this.$set(this.ruleForm, 'type', this.type)
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.title = '编辑'
      this.dialogVisible = true
      this.ruleForm = { ...row }
    },
    handleDownload(row) {
      downLoad2(row.url)
    },
    submit() {
      if (!this.ruleForm.id && !this.ruleForm.file) {
        this.$message.error('请选择文件')
        return false
      }
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let formData = new FormData()
          formData.append('projectId', this.projectId)
          formData.append('name', this.ruleForm.name)
          if (this.ruleForm.file) {
            formData.append('file', this.ruleForm.file)
          }
          formData.append('remark', this.ruleForm.remark || '')
          formData.append('type', this.ruleForm.type)
          this.btnLoading = true
          if (this.ruleForm.id) {
            formData.append('id', this.ruleForm.id)
            formData.append('url', this.ruleForm.url)
            this.$api.editProjectFile(formData).then(response => {
              this.$message.success('编辑成功')
              this.btnLoading = false
              this.getList()
              this.cancel()
            }).catch(error => {
              this.btnLoading = false
            })
          } else {
            this.$api.addProjectFile(formData).then(response => {
              this.$message.success('新增成功')
              this.btnLoading = false
              this.getList()
              this.cancel()
            }).catch(error => {
              this.btnLoading = false
            })
          }
        }
      })
    },
    handleDelete(row) {
      this.$confirm('确认删除本条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        this.$api.deleteProjectFile({ id: row.id }).then(response => {
          this.$message.success('删除成功')
          this.loading = false
          this.getList()
        }).catch(error => {
          this.loading = false
        })
      })
    }
  }
}
</script>

<style lang="scss">
.project-file {
  height: 100%;
  .margin-bottom_0 {
    margin-bottom: 0 !important;
  }
  .pagination {
    text-align: center;
    margin: 20px 0;
  }
  .project-file-header-form {
    margin-left: 20px;
  }
  .project-file-main {
    background: #fff;
    padding: 5px 20px;
    margin-top: 20px;
  }
}
</style>
