<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">
                            <div class="filter-item">
                                <span class="filter-label">申报加扣年度</span>
                                <el-select v-model="filters.applyYear" style="border: 1px solid #ededed;" placeholder="全部" size="small" class="filter-select">
                                    <el-option v-for="item in yearOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </div>
                            <div class="filter-item">
                                <span class="filter-label">申报项目</span>
                                <el-select v-model="filters.projectType" style="border: 1px solid #ededed;" placeholder="全部" size="small" class="filter-select">
                                    <el-option v-for="item in projectOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </div>
                            <el-input
                            style="border: 1px solid #ededed;"
                                class="search-input"
                                placeholder="输入项目名称"
                                size="small"
                                clearable
                                v-model="filters.keyword">
                                <el-button slot="append" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                            </el-input>
                            <el-button type="primary" size="small" class="primary-btn" @click="openCreateDialog">新增申请</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="projectCode" label="项目代号" min-width="140"></el-table-column>
                            <el-table-column prop="applyYear" label="申报加扣年度" width="140" align="center"></el-table-column>
                            <el-table-column prop="projectName" label="项目名称" min-width="260"></el-table-column>
                            <el-table-column prop="rdPeriod" label="研发起止时间" width="220" align="center"></el-table-column>
                            <el-table-column prop="totalAmount" label="研发费用加扣金额（元）" width="220" align="right"></el-table-column>
                            <el-table-column label="操作" width="120" align="center">
                                <template #default>
                                    <el-button type="text" class="link-btn" @click="btnZhu">主页</el-button>
                                    
                                    <el-button type="text" class="danger-btn">删除</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="filteredList.length">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog
            :visible.sync="createDialogVisible"
            width="720px"
            class="create-dialog"
            :close-on-click-modal="false"
            :destroy-on-close="true">
            <template #title>
                <div class="create-title">选择研发项目</div>
            </template>
            <div class="create-body">
                <div class="create-table">
                    <div class="create-row">
                        <div class="create-label">选择研发项目</div>
                        <div class="create-field">
                            <el-select v-model="createForm.projectCode" style="width: 100%;" placeholder="请选择" size="small" @change="handleProjectChange">
                                <el-option
                                    v-for="project in projectCatalog"
                                    :key="project.code"
                                    :label="project.name"
                                    :value="project.code">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="create-row">
                        <div class="create-label">选择申报扣除年度</div>
                        <div class="create-field">
                            <el-select v-model="createForm.applyYear" style="width: 100%;" placeholder="请选择年度" size="small">
                                <el-option
                                    v-for="option in yearOptionsForDialog"
                                    :key="option.value + (option.disabled ? '-disabled' : '')"
                                    :label="option.label"
                                    :value="option.value"
                                    :disabled="option.disabled">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </div>

                <div class="create-note">
                    <p>申报说明：</p>
                    <p>1、请先选择项目，系统自动匹配该项目起止日期内未创建申报过的年度；</p>
                    <p>2、项目起止内已经创建申报过的年度无法选择。</p>
                </div>
            </div>
            <template #footer>
                <div class="create-footer">
                    <el-button type="primary" class="submit-btn" @click="handleCreateGoHome">创建并前往主页</el-button>
                    <el-button @click="handleCreateSave">创建保存</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            filters: {
                applyYear: '2024',
                projectType: 'all',
                keyword: ''
            },
            yearOptions: [
                { value: '2024', label: '2024' },
                { value: '2023', label: '2023' },
                { value: '2022', label: '2022' }
            ],
            projectOptions: [
                { value: 'all', label: '全部' },
                { value: '产业发展', label: '产业发展' },
                { value: '基础研究', label: '基础研究' }
            ],
            tableData: [
                {
                    id: 1,
                    projectCode: 'WU2412001',
                    applyYear: '2024',
                    projectName: '高速公路收费景观智能集成系统研发项目',
                    rdPeriod: '2022-09-10 - 未结束',
                    totalAmount: '200000.00',
                    projectType: '产业发展'
                },
                {
                    id: 2,
                    projectCode: 'WU2313007',
                    applyYear: '2024',
                    projectName: '反光连点标志安全管控算法模型调试研究',
                    rdPeriod: '2022-12-10 - 未结束',
                    totalAmount: '200000.00',
                    projectType: '基础研究'
                },
                {
                    id: 3,
                    projectCode: 'WU2313000',
                    applyYear: '2024',
                    projectName: '基于高分卫星技术的数据资源投标研究与应用',
                    rdPeriod: '2022-12-10 - 未结束',
                    totalAmount: '200000.00',
                    projectType: '基础研究'
                },
                {
                    id: 4,
                    projectCode: 'WU2313009',
                    applyYear: '2024',
                    projectName: '隧道无人值守一体化系统研发项目',
                    rdPeriod: '2022-12-10 至 2024-12-10',
                    totalAmount: '200000.00',
                    projectType: '产业发展'
                },
                {
                    id: 5,
                    projectCode: 'WU2313010',
                    applyYear: '2024',
                    projectName: '常温光伏智慧检测可视化系统研发项目',
                    rdPeriod: '2022-12-10 至 2024-12-10',
                    totalAmount: '200000.00',
                    projectType: '产业发展'
                },
                {
                    id: 6,
                    projectCode: 'WU2313002',
                    applyYear: '2024',
                    projectName: '联网收费软件智慧链运维系统研发',
                    rdPeriod: '2022-12-10 至 2024-12-10',
                    totalAmount: '200000.00',
                    projectType: '产业发展'
                }
            ],
            pagination: {
                currentPage: 1,
                pageSize: 10
            },
            createDialogVisible: false,
            createForm: {
                projectCode: 'WU2412001',
                applyYear: ''
            },
            projectCatalog: [
                {
                    code: 'WU2412001',
                    name: '高速公路收费景观智能集成系统研发项目',
                    availableYears: ['2025', '2024'],
                    createdYears: ['2023', '2022']
                },
                {
                    code: 'WU2313007',
                    name: '反光连点标志安全管控算法模型调试研究',
                    availableYears: ['2025'],
                    createdYears: ['2024', '2023']
                },
                {
                    code: 'WU2313000',
                    name: '基于高分卫星技术的数据资源投标研究与应用',
                    availableYears: ['2025', '2024'],
                    createdYears: ['2023']
                }
            ]
        }
    },
    computed: {
        filteredList() {
            const { applyYear, projectType, keyword } = this.filters
            return this.tableData.filter((item) => {
                const yearMatch = item.applyYear === applyYear
                const typeMatch = projectType === 'all' || item.projectType === projectType
                const keywordMatch = keyword.trim()
                    ? item.projectName.includes(keyword.trim()) || item.projectCode.includes(keyword.trim())
                    : true
                return yearMatch && typeMatch && keywordMatch
            })
        },
        pagedData() {
            const start = (this.pagination.currentPage - 1) * this.pagination.pageSize
            return this.filteredList.slice(start, start + this.pagination.pageSize)
        },
        yearOptionsForDialog() {
            const project = this.projectCatalog.find((item) => item.code === this.createForm.projectCode)
            if (!project) {
                return []
            }
            const available = project.availableYears || []
            const created = project.createdYears || []
            const options = []
            available.forEach((year) => {
                options.push({ value: year, label: year, disabled: false })
            })
            created.forEach((year) => {
                options.push({ value: year, label: `${year}-已创建`, disabled: true })
            })
            return options
        }
    },
    methods: {
        //跳转到主页
        btnZhu(){
            this.$router.push('/declarationstatusDetail')
        },
        handleSearch() {
            this.pagination.currentPage = 1
        },
        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 }) {
            const leftAlignedProps = ['projectName']
            return {
                textAlign: leftAlignedProps.includes(column.property) ? 'left' : 'center',
                color: '#363636'
            }
        },
        openCreateDialog() {
            this.createDialogVisible = true
            this.handleProjectChange()
        },
        handleCreateGoHome() {
            if (!this.validateCreateForm()) return
            this.$message.success('创建成功，已前往主页（示例）')
            this.createDialogVisible = false
        },
        handleCreateSave() {
            if (!this.validateCreateForm()) return
            this.$message.success('创建成功，已保存')
            this.createDialogVisible = false
        },
        validateCreateForm() {
            if (!this.createForm.projectCode) {
                this.$message.warning('请选择研发项目')
                return false
            }
            if (!this.createForm.applyYear) {
                this.$message.warning('请选择申报扣除年度')
                return false
            }
            return true
        },
        handleProjectChange() {
            const options = this.yearOptionsForDialog.filter((item) => !item.disabled)
            this.createForm.applyYear = options.length ? options[0].value : ''
        }
    }
}
</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;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6A6E8C;
}

.filter-label {
    min-width: 90px;
}

.filter-select {
    width: 150px;
}

.search-input {
    width: 220px;
}

.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;
}

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

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

.create-dialog ::v-deep .el-dialog {
    border-radius: 12px;
}

.create-dialog ::v-deep .el-dialog__header {
    padding: 20px 28px 12px;
    border-bottom: none;
}

.create-dialog ::v-deep .el-dialog__body {
    padding: 0 28px 24px;
}

.create-dialog ::v-deep .el-dialog__footer {
    padding: 18px 28px 28px;
    border-top: none;
}

.create-title {
    font-size: 18px;
    font-weight: 600;
    color: #17192C;
    text-align: center;
}

.create-body {
    margin-top: 16px;
}

.create-table {
    border: 1px solid #E0E3F5;
    border-radius: 8px;
    overflow: hidden;
}

.create-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    border-bottom: 1px solid #E0E3F5;
}

.create-row:last-child {
    border-bottom: none;
}

.create-label {
    background: #F5F6FE;
    padding: 16px;
    font-size: 14px;
    color: #363636;
    display: flex;
    align-items: center;
}

.create-field {
    padding: 12px 16px;
    display: flex;
    align-items: center;
}

.create-note {
    font-size: 13px;
    color: #6A6E8C;
    line-height: 1.7;
    margin-top: 20px;
}

.create-footer {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.submit-btn {
    background: #5165F7;
    border-color: #5165F7;
}
</style>