<template>
    <div class="main-content12 recharge-wrap">
        <div class="flex-common">
            <el-form class="mt24">
                <div class="flex-between">
                    <div class="flex filter-area">
                        <label for="">模板列表</label>
                        <GuipSelect width="150px" clearable label="学历" :options="['麻辣烫','提拉米苏']" v-model="degree" />
                        <GuipInput ref="GuipInput" label="学校" placeholder="输入学校名称" v-model="school" />
                    </div>
                    <GuipButton>添加模板</GuipButton>
                </div>
                <GuipTable :tableData="tableList" :key="tableKey" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1">
                    <template>
                        <el-table-column fixed="left" prop="school_name" label="学校" min-width="200"></el-table-column>
                        <el-table-column prop="degree_name" label="学历" min-width="200"></el-table-column>
                        <el-table-column prop="college_name" label="学院" min-width="200"></el-table-column>
                        <el-table-column prop="status_desc" label="更新时间" min-width="200"></el-table-column>
                        <el-table-column prop="status_desc" label="状态" min-width="200"></el-table-column>
                        <el-table-column fixed="right" prop="tid" label="操作" min-width="100">
                            <template slot-scope="scope">
                                <GuipButton type="text" @click="jumpEdit(scope.row.id)">编辑</GuipButton>
                            </template>
                        </el-table-column>
                    </template>
                </GuipTable>
                <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
                               :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
                               :total="parseInt(total)">
                </el-pagination>
            </el-form>
        </div>
    </div>
</template>
<script>


import GuipButton from "@/components/GuipButton.vue";
import GuipTable from "@/components/GuipTable.vue";
import GuipSelect from "@/components/GuipSelect.vue";
import GuipInput from "@/components/GuipInput.vue";

export default {
    components: {
        GuipInput,
        GuipSelect,
        GuipTable,
        GuipButton,

    },
    options: { styleIsolation: "shared" },
    data() {
        return {
            tableLoading:false,
            tableKey: '',

            school:'',
            degree:'',
            status:'',

            tableList:[],
            currentPage: 1,    //当前页
            pageSize: 20,   //每页的容量
            total: 0,   //列表总数
        }
    },
    mounted() {
        this.$nextTick(()=>{
            this.init()
        })
    },
    methods: {
        init(){
            this.tableList = []
            this.total = 0
            this.total_money = 0
            this.currentPage = 1
            this.pageSize = 20
            this.getList()
        },
        getList() {
            try {
                this.$http('POST', '/supernew/ajax_get_paiban_template_list', {
                    school: this.school,
                    degree: this.degree,
                    status: this.status,
                    page: this.currentPage,
                }).then(response => {
                    this.$nextTick(() => {
                        this.tableList = response.data.list
                        this.total = response.data.count
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })
            } catch (error) {
                console.error('数据加载失败:', error)
            }
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.getList()
        },
        jumpEdit(id){
            console.log(id)
        }
    }
}

</script>
<style lang="scss" scoped>
::v-deep .el-form-item{
  margin: 0;
}

.filter-area{
  margin-bottom: 20px;
  gap: 32px;
  label{
    letter-spacing: 0.08em;
    font-size: 14px;
    font-weight: bold;
    line-height: normal;
    color: #1E2226;
  }
}
</style>