<template>
  <div>
    <el-dialog width="1000px" title="选择模板" :visible.sync="reportTemplate" :before-close="close" >
        <div  v-loading="loadingTemplate" element-loading-text="报告导出中..." element-loading-spinner="el-icon-loading">
            <div class="height_100">
                <el-container>
                    <el-main>
                        <el-table
                            :data="tableData"
                            border
                            v-loading="loading"
                            style="width: 100%">
                            <el-table-column
                                label="选择"
                                width="180"
                                align="center">
                                <template slot-scope="scope">
                                    <div>
                                        <el-radio v-model="templateId" :label="scope.row.id">{{""}}</el-radio>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="templateName"
                                label="模板名称"
                                align="center">
                            </el-table-column>
                            <el-table-column
                                prop="reportType"
                                label="所属报告类型"
                                align="center">
                                <template slot-scope="scope">
                                    <div>
                                        {{dictMessage[scope.row.reportType]}}
                                    </div>
                                </template>
                            </el-table-column>
                            <!-- <el-table-column
                                prop="personName"
                                label="创建人"
                                align="center">
                            </el-table-column>
                            <el-table-column
                                prop="createTime"
                                label="创建日期"
                                align="center">
                            </el-table-column> -->
                        </el-table>
                    </el-main>
                    <!-- <el-footer 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>
                    </el-footer> -->
                </el-container>
            </div>
            <div slot="footer" class="dialog-footer" style="display: flex;justify-content: flex-end;">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="submitExport" :loading="loadingTemplate">确 定</el-button>
            </div>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { downLoad2 } from "@/utils";
export default {
  components: {},
  props: {},
  data() {
    return {
        reportTemplate:false,
        loadingTemplate:false,
        tableData:[],
        templateId:'',
        btnLoading:false,
        queryParams:{
            current:1,
            size:10,
            reportType:''
        },
        total:0,
        loading:false,
        projectId:''
    };
  },
  watch: {},
  computed: {
    dictMessage() {
        var a = this.$store.state.dictMessage.dictMessage.REPORT_TYPE
        var b = []
        a.forEach(item => {
            b[item.value] = item.label
        });
        return b
    },
  },
  created() {},
  mounted() {},
  methods: {
    open(row){
        this.projectId = row.id
        this.queryParams = {
            current:1,
            size:10,
            reportType:row.reportType
        }
        this.getList()
        this.reportTemplate = true
    },
    close(){
        this.reportTemplate = false
    },
    handleCurrentChange(val){
        this.queryParams.current = val
        this.getList()
    },
    getList(){
        this.loading = true
        this.$api.queryTempleByType(this.queryParams).then(response=>{
            if(response.code == 200){
                this.tableData = response.data
                // this.total = response.data.total
                this.loading = false
            }
        }).catch(error=>{
            this.tableData = []
            // this.total = 0
            this.loading = false
        })
    },
    submitExport(){
        this.loadingTemplate = true
        var params = {
            templeId:this.templateId,
            projectId:this.projectId
        }
        this.$api.exportReport(params).then(response=>{
            if(response.code == 200){
                this.loadingTemplate = false
                downLoad2(response.data.data)
                this.$message.success('导出成功')
                this.close()
            }
        }).catch(error=>{
            this.loadingTemplate = false
            this.$message.error('导出失败')
        })
    },
  },
};
</script>
<style lang="scss" scoped>
</style>