<template>
    <div>
      <div>
        <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.fileName" 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>
                <template slot-scope="scope" v-if="scope.row.reportFiles">
                  <div>
                    <span>{{scope.row.reportFiles[0].name}}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="suffix" label="类型" align="center" show-overflow-tooltip>
                <template slot-scope="scope" v-if="scope.row.reportFiles">
                  <div>
                    <span>{{scope.row.reportFiles[0].suffix}}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="reportName" label="所属报告" align="center" show-overflow-tooltip></el-table-column>
              <el-table-column prop="personName" label="创建人" align="center" show-overflow-tooltip></el-table-column>
              <el-table-column prop="creationTime" label="创建时间" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.creationTime }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip></el-table-column>
              <el-table-column label="操作" align="center" width="150">
                <template slot-scope="scope">
                  <el-dropdown  split-button type="primary" size="small" >
                    <!-- <P @click="handleEdit(scope.row)" v-if="type == 0 ? $permission('/workspace/project/other_accessories/add')&&$r(projectId,[1,2]) :$permission('/workspace/project/report_manage/modify')&&$r(projectId,[1,2])">编辑</P> -->
                    <!-- <P v-else :disabled="true">编辑</P> -->
                    <P @click="handleEdit(scope.row)">编辑</P>
  
                    <el-dropdown-menu slot="dropdown" class="text-align_center">
                      <el-dropdown-item @click.native="handleDownload(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>
            <div class="pagination">
              <el-pagination :current-page.sync="queryParams.current" :page-size="queryParams.size" :total="total" @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" background></el-pagination>
            </div>
          </el-main>
        </el-container>
      </div>
  
      <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-item label="备注" prop="remark">
            <el-input v-model="ruleForm.remark" placeholder="请输入备注" type="textarea"></el-input>
          </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>
import { downLoad2 } from "@/utils";
export default {
   props:['reportId2'],
    data() {
      return {
        type:this.reportId2?this.reportId2: 0,
        reportId:this.reportId2?this.reportId2: 0,
        drawer: false,
        loading: false,
        btnLoading: false,
        total: 0,
        tableData: [],
        queryParams: {
          fileName: '',
          type: this.reportId2?this.reportId2: 0,
          size: 10,
          current: 1,
          reportID: this.reportId2?this.reportId2: 0,
          order: 'desc'
        },
        title: '',
        dialogVisible: false,
        ruleForm: {},
        rules: {
          name: [{ required: true, message: '请输入文件名称', trigger: 'blur' },],
        },
        file:null
      }
    },
    watch:{
 
    },
    computed: {
  
    },
    mounted() {
        this.getList()
    },
    methods: {
      close() {
        this.drawer = false
        this.$emit('close')
      },
      open(id, type) {
        this.type = type
        this.reportId = id
        this.queryParams.reportID = 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)
        this.file = file.raw
      },
      getList() {
        this.loading = true
        this.$api.CheckReportFileList(this.queryParams).then(response => {
          this.tableData = response.data.records
          this.total = response.data.total
          this.loading = false
        }).catch(error => {
          this.loading = false
        })
      },
      handleCurrentChange(val) {
        this.queryParams.current = val;
        this.getList();
      },
      cancel() {
        this.$set(this.ruleForm, 'fileName', '')
        this.file = null
        // this.$set(this.ruleForm, 'file', null)
        this.$set(this.ruleForm, 'remark', '')
        this.$set(this.ruleForm, 'type', this.type)
        this.$set(this.ruleForm, 'id', null)
        this.dialogVisible = false
      },
      handleAdd() {
        this.title = '新增'
        this.$set(this.ruleForm, 'type', this.type)
        this.dialogVisible = true
      },
      handleEdit(row) {
        this.title = '编辑'
        if(row.reportFiles){
          row.name = row.reportFiles[0].name
        }else{
          row.name = ''
        }
        this.dialogVisible = true
        this.ruleForm = { ...row }
      },
      handleDownload(row) {
        downLoad2(row.reportFiles[0].url)
      },
      submit() {
        if (!this.ruleForm.id && !this.file) {
          this.$message.error('请选择文件')
          return false
        }
        console.log(this.ruleForm)
        let formData = new FormData()
  
        // formData.append('reportId', this.reportId)
        // formData.append('name', this.ruleForm.name)
        if (this.file) {
          formData.append('files', this.file)
        }
        this.ruleForm.reportID = this.reportId
        formData.append('jsons', JSON.stringify(this.ruleForm))
        // 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.EditReportFileList(formData).then(response => {
            this.$message.success('编辑成功')
            this.btnLoading = false
            this.getList()
            this.cancel()
          }).catch(error => {
            this.btnLoading = false
          })
        } else {
          this.$api.AddReportFileList(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.DeleteReportFileList({ 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>
  