<template>
  <div>
    <el-card shadow="never" style="height: 100%" :body-style="{height: '100%'}">
      <el-container>
        <el-header>
          <el-form :inline="true">
            <el-form-item label="报告名称">
              <el-input v-model="queryParams.name" size="small" placeholder="请输入报告名称"></el-input>
            </el-form-item>
            <el-form-item label="创建人">
              <el-input v-model="queryParams.createBy" size="small" placeholder="请输入创建人"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="" size="small" @click="getList">查询</el-button>
            </el-form-item>
          </el-form>
        </el-header>
        <el-main style="padding: 15px 0;">
          <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 label="模板名称" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.template">{{ scope.row.template.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="专利数量" align="center">
              <template slot-scope="scope">
                <el-tag type="success">{{ scope.row.patentNum }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="下载报告" align="center" width="100">
              <template slot-scope="scope">
                <img class="download-report-btn" src="@/assets/WORD.png" alt="点击下载报告" width="30" height="30" @click="handleDownLoad(scope.row)">
              </template>
            </el-table-column>
            <el-table-column label="创建人" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.user">{{ scope.row.user.name }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" align="center" width="100">
              <template slot-scope="scope">
                <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination :current-page.sync="queryParams.page" :page-size="queryParams.size" :total="total" @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" background></el-pagination>
          </div>
        </el-main>
      </el-container>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { downLoad, downLoad2 } from "@/utils";
import moment from "moment";
export default {
  name: 'reportList',
  components: {
  },
  data() {
    return {
      queryParams: {
        name: '',
        createBy: '',
        page: 1,
        size: 10,
        projectId: ''
      },
      loading: true,
      total: 0,
      tableData: [],
    }
  },
  computed: {
    ...mapGetters(['userinfo', 'projectId'])
  },
  activated() {
    this.queryParams.projectId = this.projectId
    this.getList()
  },
  methods: {
    handleCurrentChange(val) {
      this.queryParams.page = val;
      this.getList();
    },
    getList() {
      this.loading = true
      this.$api.getNewReportList(this.queryParams).then(response => {
        this.tableData = response.data
        this.total = response.total
        this.loading = false
      }).catch(error => {
        this.loading = false
      })
    },
    handleEdit(row) {
      this.$router.push({
        path: '/report/new/project/manage',
        query: {
          id: row.id
        }
      })
    },
    handleDownLoad(row) {
      if (row.reportUrl) {
        downLoad2(row.reportUrl)
      } else {
        this.$message.error('暂未生成报告文件')
      }
    },
    handleDelete(row) {
      this.$confirm('确认删除本条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        this.$api.deleteNewReport({id: row.id}).then(response => {
          this.$message.success('删除成功')
          this.loading = false
          this.getList()
        }).catch(error => {
          this.loading = false
        })
      })
    }
  }
}
</script>

<style lang="less">
.download-report-btn {
  cursor: pointer;
}
</style>
