<template>
  <div>
    <el-dialog
        title="报告模板"
        :visible.sync="visible"
        width="600px"
        append-to-body
        :close-on-click-modal="false"
        :modal="false"
        v-loading="loading"
        :before-close="close">
        <div style="height: calc(100vh - 350px)">
        <el-container>  
          <el-main class="height_100" :loading="loading">
            <el-table
              class="copyTable"
              :data="tableData"
              style="width: 100%"
              row-key="id"
            >
              <el-table-column prop="index" label="序号" width="100px">
                <template slot-scope="scope">
                  <div>
                    {{ (scope.$index + 1) + ((queryParams.current - 1) * queryParams.size) }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="名称">
                <template slot-scope="scope">
                  <div>
                    <el-link type="primary" @click="chooseReportTemplate(scope.row)">{{ scope.row.templateName }}</el-link>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-main>
          <el-footer class="pagination">
            <el-pagination
              background
              layout="total, sizes, prev, pager, next, jumper"
              :current-page.sync="queryParams.current"
              :page-size.sync="queryParams.size"
              @current-change="handleCurrentChange"
              @size-change="changeSize"
              :total="total"
            >
            </el-pagination>
          </el-footer>
        </el-container>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
  },
  data() {
    return {
        visible:false,
        tableData:[],
        loading:false,
        queryParams:{
            current:1,
            size:10
        },
        total:0,
        projectId:null,
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    open(projectId){
      this.projectId = projectId
      this.queryParams.current = 1
      this.getReportTemplate()
      this.visible = true
    },
    //获取模板
    getReportTemplate(){
      this.loading = true
      this.$api.queryNoveltyTemplate({}).then(response=>{
        if(response.code = 200){
          this.tableData = response.data.data
          this.total = response.data.total
          this.loading = false
        }
      }).catch(error=>{
        this.tableData = []
        this.total = 0
        this.loading = false
      })
    },
    close(){
        this.visible = false
    },
    handleCurrentChange(val){
      this.queryParams.current = val
      this.getReportTemplate()
    },
    changeSize(val){
      this.queryParams.current = 1
      this.queryParams.size = val
      this.getReportTemplate()
    },
    chooseReportTemplate(row){
      let router = this.$router.resolve({
          path: '/exportReport',
          query: {
            reportTemplateId: row.id,
            // path:row.configMessage,
            projectId: this.projectId,
          }
      })
      window.open(router.href, '_blank')
    },
  },
};
</script>
<style lang="scss" scoped>
</style>