<template>
    <div>
        <div class="coentent">
            <div class="contents-area">
                <div class="areas">
                    <div class="headers">
                        <div class="headers-left">
                            <div class="headers-name">专精特新中小企业申报材料列表</div>
                        </div>
                        <div class="headers-right">
                            <el-button size="small" class="secondary-btn" @click="handleNewApplication">新建申报</el-button>
                            <el-button type="primary" size="small" class="primary-btn" @click="handleNewApplication">新建申报</el-button>
                        </div>
                    </div>

                    <div class="content-table">
                        <el-table
                            :data="pagedData"
                            border
                            :header-cell-style="{ background: '#EDEFFE', color: '#363636', textAlign: 'center' }"
                            :cell-style="cellStyle"
                            :row-class-name="rowClassName"
                            style="width: 100%">
                            <el-table-column type="index" label="序号" width="70" align="center" :index="formatIndex"></el-table-column>
                            <el-table-column prop="year" label="年度"  align="center"></el-table-column>
                            <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
                            <el-table-column prop="lastEditTime" label="最后编辑时间" align="center"></el-table-column>
                            <el-table-column prop="status" label="状态" width="100" align="center">
                                <template #default="scope">
                                    <span :class="scope.row.status === '可编辑' ? 'status-editable' : 'status-archived'">
                                        {{ scope.row.status }}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="downloadCount" label="佐证材料下载次数"  align="center"></el-table-column>
                            <el-table-column prop="estimatedScore" label="预估评分"  align="center"></el-table-column>
                            <el-table-column label="操作" width="150" align="center">
                                <template #default="scope">
                                    <el-button type="text" class="link-btn" @click="handleHomepage(scope.row)">主页</el-button>
                                    <el-button 
                                        v-if="scope.row.status === '可编辑'" 
                                        type="text" 
                                        class="danger-btn" 
                                        @click="handleDelete(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                        <div class="footer">
                            <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="pagination.currentPage"
                                :page-sizes="[10, 20, 30, 50]"
                                :page-size="pagination.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="tableData.length">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                {
                    id: 1,
                    year: '2025',
                    createTime: '2025-04-10',
                    lastEditTime: '2025-04-10',
                    status: '可编辑',
                    downloadCount: 1,
                    estimatedScore: 91
                },
                {
                    id: 2,
                    year: '2022',
                    createTime: '2024-03-09',
                    lastEditTime: '2024-03-09',
                    status: '已封存',
                    downloadCount: 1,
                    estimatedScore: 89
                },
                {
                    id: 3,
                    year: '2019',
                    createTime: '2023-05-12',
                    lastEditTime: '2023-05-12',
                    status: '已封存',
                    downloadCount: 1,
                    estimatedScore: 81
                },
                {
                    id: 4,
                    year: '2016',
                    createTime: '2022-03-11',
                    lastEditTime: '2022-03-11',
                    status: '已封存',
                    downloadCount: 1,
                    estimatedScore: 86
                },
                {
                    id: 5,
                    year: '2013',
                    createTime: '2021-04-16',
                    lastEditTime: '2021-04-16',
                    status: '已封存',
                    downloadCount: 1,
                    estimatedScore: 84
                }
            ],
            pagination: {
                currentPage: 1,
                pageSize: 10
            }
        }
    },
    computed: {
        pagedData() {
            const start = (this.pagination.currentPage - 1) * this.pagination.pageSize
            return this.tableData.slice(start, start + this.pagination.pageSize)
        }
    },
    methods: {
        handleNewApplication() {
            this.$message.info('新建申报功能')
        },
        handleHomepage(row) {
           this.$router.push('./specializedDetail')
        },
        handleDelete(row) {
            this.$confirm('确定要删除该申报材料吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const index = this.tableData.findIndex(item => item.id === row.id)
                if (index !== -1) {
                    this.tableData.splice(index, 1)
                    this.$message.success('删除成功')
                }
            }).catch(() => {})
        },
        handleSizeChange(val) {
            this.pagination.pageSize = val
            this.pagination.currentPage = 1
        },
        handleCurrentChange(val) {
            this.pagination.currentPage = val
        },
        formatIndex(index) {
            return (this.pagination.currentPage - 1) * this.pagination.pageSize + index + 1
        },
        rowClassName() {
            return 'project-row'
        },
        cellStyle({ column }) {
            return {
                textAlign: 'center',
                color: '#363636'
            }
        }
    }
}
</script>

<style scoped>
.coentent {
    width: 100%;
    height: 100%;
    background: white;
}

.contents-area {
    width: 100%;
    margin-top: 20px;
}

.areas {
    width: 97%;
    margin: 0 auto;
}

.headers {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 18px;
}

.headers-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.headers-name {
    font-size: 15px;
    color: #17192C;
}

.headers-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.secondary-btn {
    background: #F5F6FE;
    border-color: #E0E3F5;
    color: #363636;
}

.primary-btn {
    background: #5165F7;
    border-color: #5165F7;
}

.content-table {
    background: #fff;
    border-radius: 8px;
}

.footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.link-btn {
    color: #5165F7;
    padding: 0;
}

.danger-btn {
    color: #F56C6C;
    padding: 0;
}

.status-editable {
    color: #5165F7;
}

.status-archived {
    color: #6A6E8C;
}

::v-deep .project-row td {
    color: #363636;
}

::v-deep .el-table__body tr:hover > td {
    background-color: #F7F8FF !important;
}
</style>
