<template lang="pug">
    el-dialog(title="参赛参训费用模板",  :fullscreen="false" :visible.sync='visible' :modal-append-to-body='false' :append-to-body='true' @close="visible=false")
        el-card(shadow="never")
            div(slot="header")
                el-input(v-model='title' clearable='', style='width:80%;' placeholder="请输入模板名称")
                el-button(@click="getDataList" style='float:right;' icon='el-icon-search') 查询
            div
            el-table(:data="tableData" style="width: 100%" v-loading='dataListLoading' border highlight-current-row  @current-change="handleCurrentChange")
                el-table-column(prop='title',header-align='center',align='center',label='名称')
                el-table-column(prop='remark',header-align='center',align='center',label='模板介绍')
            el-pagination(@size-change='sizeChangeHandle', @current-change='currentChangeHandle', :current-page='pageIndex', :page-sizes='[10, 20, 50, 100]', :page-size='pageSize', :total='totalPage', layout='total, sizes, prev, pager, next, jumper')
        span.dialog-footer(slot="footer")
            el-button(type="primary" @click="useTemplate()" v-prevent-re-click) 确 定
            el-button(@click="visible=false") 取 消
</template>
<script>
    export default {
        data() {
            return {
                clickFlag: false,
                flagType: null,
                title: '',
                loading: null,
                visible: false,
                dataListLoading: false,
                selChangeData: [],
                tableData: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                template: {}
            }
        },
        methods: {
            init(flagType) {
                this.visible = true
                this.clickFlag = false
                this.flagType = flagType
                this.title = ''
                //修改回选
                if (this.flagType) {
                    this.getDataList()
                }
            },
            getDataList() {
                this.$http({
                    url: this.$http.adornUrl(`/pbFeeTemplate/getPageList/`),
                    method: 'get',
                    params: this.$http.adornParams({
                        page: this.pageIndex,
                        rows: this.pageSize,
                        typeTemp: this.flagType,
                        title: this.title
                    })
                }).then((data) => {
                    console.log('分页模板数据：', data)
                    if (data && data.code === 0) {
                        this.tableData = data.page.rows
                        this.totalPage = data.page.total
                    } else {
                        this.tableData = []
                        this.totalPage = 0
                    }
                })
            },
            openFullScreen() {
                this.loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
            },
            handleCurrentChange(val) {
                this.template = val
            },
             // 每页数
            sizeChangeHandle (val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle (val) {
                this.pageIndex = val
                this.getDataList()
            },
            //新增方法
            useTemplate() {
                if (this.template) {
                    this.clickFlag = true
                    this.visible = false
                    this.$http({
                        url: this.$http.adornUrl(`/pbFeeTemplate/getByByx1/` + this.template.byx1),
                        method: 'get'
                    }).then((data) => {
                        if (data && data.code === 0) {
                            console.log('data222:', data.list)
                            this.$emit('chooseTemplate', data.list, this.flagType)
                        }
                    })
                } else {
                    this.$message.error('请选择模板！')
                }
            }
        }
    }
</script>
<style>
    .inputWidth{
        width: 210px;
    }

    .font_later{
        padding-left:20px;
        font-weight: bold;
        color: #909399;
    }
    .font_color{
        font-weight: bold;
        color: #909399;
    }
    .font_style{
        font-weight: bold;
        color: red;
    }
    .dialog-footer{
        padding-bottom:150px;
    }

    /* 提示框 */
.el-tooltip__popper.is-light{
  border: 1px solid #C0C4CC;
}

.el-tooltip__popper[x-placement^=bottom] .popper__arrow{
  border-bottom-color: grey  !important ;
}

.toolTip>p{
  margin: 0;
  padding-top: 10px;
  height:14px;
  line-height:14px;
  font-size:14px;
  color: #606266;
}

 /* 弹出遮罩层 兼容ie*/
.el-dialog__wrapper {
  width: 100% !important;
  height: 100% !important;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
}

</style>