<template>
    <div>
        <div class="content">
            <div class="tabs-area">
                <div 
                    class="tab-item" 
                    :class="{ 'active': activeTab === 'knowledge' }"
                    @click="activeTab = 'knowledge'"
                >
                    知识产权
                </div>
                <div 
                    class="tab-item" 
                    :class="{ 'active': activeTab === 'paper' }"
                    @click="activeTab = 'paper'"
                >
                    论文
                </div>
                <div 
                    class="tab-item" 
                    :class="{ 'active': activeTab === 'standard' }"
                    @click="activeTab = 'standard'"
                >
                    标准制定
                </div>
            </div>
            
            <!-- 知识产权筛选 -->
          
            <div class="filter-area" v-if="activeTab === 'knowledge'">
                <div class="filter-row">
                    <span class="filter-label">产权类型:</span>
                    <div class="filter-buttons">
                        <div 
                            class="filter-btn" 
                            :class="{ 'active': selectedType === 'all' }"
                            @click="selectedType = 'all'"
                        >
                            全部
                        </div>
                        <div 
                            class="filter-btn" 
                            :class="{ 'active': selectedType === 'invention' }"
                            @click="selectedType = 'invention'"
                        >
                            发明专利
                        </div>
                        <div 
                            class="filter-btn" 
                            :class="{ 'active': selectedType === 'plant' }"
                            @click="selectedType = 'plant'"
                        >
                            植物新品种
                        </div>
                        <div 
                            class="filter-btn" 
                            :class="{ 'active': selectedType === 'drug' }"
                            @click="selectedType = 'drug'"
                        >
                            国家新药
                        </div>
                        <div 
                            class="filter-btn" 
                            :class="{ 'active': selectedType === 'circuit' }"
                            @click="selectedType = 'circuit'"
                        >
                            集成电路布图设计专有权
                        </div>
                        <div 
                            class="filter-btn" 
                            :class="{ 'active': selectedType === 'utility' }"
                            @click="selectedType = 'utility'"
                        >
                            实用新型
                        </div>
                        <div 
                            class="filter-btn" 
                            :class="{ 'active': selectedType === 'software' }"
                            @click="selectedType = 'software'"
                        >
                            软件著作权
                        </div>
                        <div 
                            class="filter-btn" 
                            :class="{ 'active': selectedType === 'design' }"
                            @click="selectedType = 'design'"
                        >
                            外观设计
                        </div>
                        <div 
                            class="filter-btn" 
                            :class="{ 'active': selectedType === 'trademark' }"
                            @click="selectedType = 'trademark'"
                        >
                            商标信息
                        </div>
                    </div>
                </div>
                
                <div class="filter-row">
                    <span class="filter-label">更多筛选:</span>
                    <el-select v-model="filterForm.acquisitionMethod" placeholder="获得方式" size="small" class="filter-select">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="自主研发" value="self"></el-option>
                        <el-option label="受让" value="transfer"></el-option>
                    </el-select>
                    <el-select v-model="filterForm.acquisitionYear" placeholder="获得年度" size="small" class="filter-select">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="2024" value="2024"></el-option>
                        <el-option label="2023" value="2023"></el-option>
                    </el-select>
                    <el-select v-model="filterForm.category" placeholder="种类" size="small" class="filter-select">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="类型1" value="type1"></el-option>
                        <el-option label="类型2" value="type2"></el-option>
                    </el-select>
                </div>
                
                <div class="filter-row">
                    <el-button type="primary" size="small" @click="handleSearch" class="search-btn">搜索</el-button>
                    <el-button size="small" @click="handleReset" class="reset-btn">重置</el-button>
                </div>
            </div>
            
            <!-- 知识产权搜索结果表格 -->
            <div class="heng" v-if="activeTab === 'knowledge'"></div>
            <div class="result-area" v-if="activeTab === 'knowledge'">
                <div class="result-title">搜索到 | {{ knowledgeTableData.length }}</div>
                <el-table 
                    :data="knowledgeTableData" 
                    :header-cell-style="{ background: '#EDEFFE', color: '#363636' }" 
                    border 
                    style="width: 100%"
                >
                    <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
                    <el-table-column prop="name" label="名称" min-width="200" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="type" label="类型" width="150" align="center"></el-table-column>
                    <el-table-column prop="category" label="种类" width="100" align="center"></el-table-column>
                    <el-table-column prop="acquisitionDate" label="获得日期" width="120" align="center"></el-table-column>
                    <el-table-column prop="acquisitionMethod" label="获得方式" width="120" align="center"></el-table-column>
                    <el-table-column label="操作" width="100" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" style="color: #5165f7;" @click="handleKnowledgeDetail(scope.row)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
          
            <!-- 论文筛选 -->
            <div class="filter-area" v-if="activeTab === 'paper'">
                <div class="filter-row">
                    <span class="filter-label">期刊类型:</span>
                    <div class="filter-buttons">
                        <div 
                            class="filter-btn" 
                            :class="{ 'active': paperSelectedType === 'all' }"
                            @click="paperSelectedType = 'all'"
                        >
                            全部
                        </div>
                        <div 
                            class="filter-btn" 
                            :class="{ 'active': paperSelectedType === 'general' }"
                            @click="paperSelectedType = 'general'"
                        >
                            普通期刊
                        </div>
                        <div 
                            class="filter-btn" 
                            :class="{ 'active': paperSelectedType === 'core' }"
                            @click="paperSelectedType = 'core'"
                        >
                            一般核心
                        </div>
                        <div 
                            class="filter-btn" 
                            :class="{ 'active': paperSelectedType === 'important' }"
                            @click="paperSelectedType = 'important'"
                        >
                            重要核心
                        </div>
                        <div 
                            class="filter-btn" 
                            :class="{ 'active': paperSelectedType === 'authoritative' }"
                            @click="paperSelectedType = 'authoritative'"
                        >
                            权威核心
                        </div>
                    </div>
                </div>
                
                <div class="filter-row">
                    <span class="filter-label">更多筛选:</span>
                    <el-select v-model="paperFilterForm.publicationYear" placeholder="发表年度" size="small" class="filter-select">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="2024" value="2024"></el-option>
                        <el-option label="2023" value="2023"></el-option>
                        <el-option label="2022" value="2022"></el-option>
                    </el-select>
                    <el-select v-model="paperFilterForm.firstAuthor" placeholder="第一作者" size="small" class="filter-select">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="作者1" value="author1"></el-option>
                        <el-option label="作者2" value="author2"></el-option>
                    </el-select>
                    <el-select v-model="paperFilterForm.correspondingAuthor" placeholder="通信作者" size="small" class="filter-select">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="作者1" value="author1"></el-option>
                        <el-option label="作者2" value="author2"></el-option>
                    </el-select>
                </div>
                
                <div class="filter-row">
                    <el-button type="primary" size="small" @click="handlePaperSearch" class="search-btn">搜索</el-button>
                    <el-button size="small" @click="handlePaperReset" class="reset-btn">重置</el-button>
                </div>
            </div>
            
            <!-- 论文搜索结果表格 -->
            <div class="heng" v-if="activeTab === 'paper'"></div>
            <div class="result-area" v-if="activeTab === 'paper'">
                <div class="result-title">搜索到 | {{ paperTableData.length }}</div>
                <el-table 
                    :data="paperTableData" 
                    :header-cell-style="{ background: '#EDEFFE', color: '#363636' }" 
                    border 
                    style="width: 100%"
                >
                    <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
                    <el-table-column prop="name" label="名称" min-width="200" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="journalType" label="期刊类型" width="120" align="center"></el-table-column>
                    <el-table-column prop="publicationYear" label="发表年度" width="120" align="center"></el-table-column>
                    <el-table-column prop="firstAuthor" label="第一作者" width="120" align="center"></el-table-column>
                    <el-table-column prop="correspondingAuthor" label="通信作者" width="120" align="center"></el-table-column>
                    <el-table-column label="操作" width="100" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" style="color: #5165f7;" @click="handlePaperDetail(scope.row)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            
            <!-- 标准制定筛选 -->
            <div class="filter-area" v-if="activeTab === 'standard'">
                <div class="filter-row">
                    <span class="filter-label">标准类型:</span>
                    <div class="filter-buttons">
                        <div 
                            class="filter-btn" 
                            :class="{ 'active': standardSelectedType === 'all' }"
                            @click="standardSelectedType = 'all'"
                        >
                            全部
                        </div>
                        <div 
                            class="filter-btn" 
                            :class="{ 'active': standardSelectedType === 'international' }"
                            @click="standardSelectedType = 'international'"
                        >
                            国际
                        </div>
                        <div 
                            class="filter-btn" 
                            :class="{ 'active': standardSelectedType === 'national' }"
                            @click="standardSelectedType = 'national'"
                        >
                            国家
                        </div>
                        <div 
                            class="filter-btn" 
                            :class="{ 'active': standardSelectedType === 'industry' }"
                            @click="standardSelectedType = 'industry'"
                        >
                            行业
                        </div>
                        <div 
                            class="filter-btn" 
                            :class="{ 'active': standardSelectedType === 'local' }"
                            @click="standardSelectedType = 'local'"
                        >
                            地方
                        </div>
                        <div 
                            class="filter-btn" 
                            :class="{ 'active': standardSelectedType === 'group' }"
                            @click="standardSelectedType = 'group'"
                        >
                            团体
                        </div>
                    </div>
                </div>
                
                <div class="filter-row">
                    <span class="filter-label">更多筛选:</span>
                    <el-select v-model="standardFilterForm.participationMethod" placeholder="参与方式" size="small" class="filter-select">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="主导" value="leading"></el-option>
                        <el-option label="参与" value="participating"></el-option>
                    </el-select>
                    <el-select v-model="standardFilterForm.publicationYear" placeholder="发布年度" size="small" class="filter-select">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="2024" value="2024"></el-option>
                        <el-option label="2023" value="2023"></el-option>
                        <el-option label="2022" value="2022"></el-option>
                    </el-select>
                    <el-select v-model="standardFilterForm.standardStatus" placeholder="标准状态" size="small" class="filter-select">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="已发布" value="published"></el-option>
                        <el-option label="制定中" value="drafting"></el-option>
                        <el-option label="已废止" value="abolished"></el-option>
                    </el-select>
                </div>
                
                <div class="filter-row">
                    <el-button type="primary" size="small" @click="handleStandardSearch" class="search-btn">搜索</el-button>
                    <el-button size="small" @click="handleStandardReset" class="reset-btn">重置</el-button>
                </div>
            </div>
            
            <!-- 标准制定搜索结果表格 -->
            <div class="heng"></div>
            <div class="result-area" v-if="activeTab === 'standard'">
                <div class="result-title">搜索到 | {{ standardTableData.length }}</div>
                <el-table 
                    :data="standardTableData" 
                    :header-cell-style="{ background: '#EDEFFE', color: '#363636' }" 
                    border 
                    style="width: 100%"
                >
                    <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
                    <el-table-column prop="standardName" label="标准名称" min-width="200" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="standardNumber" label="标准号" width="150" align="center"></el-table-column>
                    <el-table-column prop="standardType" label="标准类型" width="120" align="center"></el-table-column>
                    <el-table-column prop="releaseDate" label="发布日期" width="120" align="center"></el-table-column>
                    <el-table-column prop="standardStatus" label="标准状态" width="120" align="center"></el-table-column>
                    <el-table-column prop="participationMethod" label="参与方式" width="120" align="center"></el-table-column>
                    <el-table-column label="操作" width="100" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" style="color: #5165f7;" @click="handleStandardDetail(scope.row)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            activeTab: 'knowledge',
            selectedType: 'all',
            filterForm: {
                acquisitionMethod: '',
                acquisitionYear: '',
                category: ''
            },
            paperSelectedType: 'all',
            paperFilterForm: {
                publicationYear: '',
                firstAuthor: '',
                correspondingAuthor: ''
            },
            standardSelectedType: 'all',
            standardFilterForm: {
                participationMethod: '',
                publicationYear: '',
                standardStatus: ''
            },
            // 知识产权表格数据
            knowledgeTableData: [
                {
                    name: '一种多源特征数据融合的隧道智能调光方法及系统',
                    type: '发明专利',
                    category: 'I类',
                    acquisitionDate: '2024-12-10',
                    acquisitionMethod: '自主研发'
                },
                {
                    name: '管理元数据的方法',
                    type: '集成电路布图',
                    category: 'I类',
                    acquisitionDate: '2024-12-10',
                    acquisitionMethod: '自主研发'
                },
                {
                    name: '管理元数据的方法',
                    type: '软件著作权',
                    category: 'II类',
                    acquisitionDate: '2024-12-10',
                    acquisitionMethod: '自主研发'
                },
                {
                    name: '管理元数据的方法',
                    type: '商标信息',
                    category: '-',
                    acquisitionDate: '2024-12-10',
                    acquisitionMethod: '-'
                },
                {
                    name: '管理元数据的方法',
                    type: '商标信息',
                    category: '-',
                    acquisitionDate: '2024-12-10',
                    acquisitionMethod: '-'
                },
                {
                    name: '管理元数据的方法',
                    type: '商标信息',
                    category: '-',
                    acquisitionDate: '2024-12-10',
                    acquisitionMethod: '-'
                },
                {
                    name: '管理元数据的方法',
                    type: '商标信息',
                    category: '-',
                    acquisitionDate: '2024-12-10',
                    acquisitionMethod: '-'
                }
            ],
            // 论文表格数据
            paperTableData: [
                {
                    name: '基于深度学习的图像识别方法研究',
                    journalType: '权威核心',
                    publicationYear: '2024',
                    firstAuthor: '张三',
                    correspondingAuthor: '李四'
                },
                {
                    name: '人工智能在医疗诊断中的应用',
                    journalType: '重要核心',
                    publicationYear: '2024',
                    firstAuthor: '王五',
                    correspondingAuthor: '赵六'
                },
                {
                    name: '大数据分析技术研究',
                    journalType: '一般核心',
                    publicationYear: '2023',
                    firstAuthor: '孙七',
                    correspondingAuthor: '周八'
                },
                {
                    name: '云计算架构优化方案',
                    journalType: '普通期刊',
                    publicationYear: '2023',
                    firstAuthor: '吴九',
                    correspondingAuthor: '郑十'
                }
            ],
            // 标准制定表格数据
            standardTableData: [
                {
                    standardName: '工业互联网电力装备标识数据安全保护规范',
                    standardNumber: 'T/GSIA 002—2023',
                    standardType: '团体标准',
                    releaseDate: '2024-12-10',
                    standardStatus: '现行',
                    participationMethod: '主持'
                },
                {
                    standardName: '高速公路机电设备数字化管理关键技术研究',
                    standardNumber: 'T/GSIA 002—2023',
                    standardType: '团体标准',
                    releaseDate: '2024-12-10',
                    standardStatus: '废止',
                    participationMethod: '主持'
                }
            ]
        }
    },
    methods: {
        handleSearch() {
            console.log('搜索', this.filterForm, this.selectedType)
        },
        handleReset() {
            this.selectedType = 'all'
            this.filterForm = {
                acquisitionMethod: '',
                acquisitionYear: '',
                category: ''
            }
        },
        handlePaperSearch() {
            console.log('论文搜索', this.paperFilterForm, this.paperSelectedType)
        },
        handlePaperReset() {
            this.paperSelectedType = 'all'
            this.paperFilterForm = {
                publicationYear: '',
                firstAuthor: '',
                correspondingAuthor: ''
            }
        },
        handleStandardSearch() {
            console.log('标准制定搜索', this.standardFilterForm, this.standardSelectedType)
        },
        handleStandardReset() {
            this.standardSelectedType = 'all'
            this.standardFilterForm = {
                participationMethod: '',
                publicationYear: '',
                standardStatus: ''
            }
        },
        handleKnowledgeDetail(row) {
            console.log('查看知识产权详情', row)
            // TODO: 跳转到详情页面
        },
        handlePaperDetail(row) {
            console.log('查看论文详情', row)
            // TODO: 跳转到详情页面
        },
        handleStandardDetail(row) {
            console.log('查看标准制定详情', row)
            // TODO: 跳转到详情页面
        }
    }
}
</script>

<style scoped>
.content{
    background: white;
    width: 100%;
    margin-top: 12px;
    padding: 20px;
}

.tabs-area {
    display: flex;
    border-bottom: 1px solid #E4E7ED;
    margin-bottom: 20px;
}

.tab-item {
    padding: 12px 24px;
    cursor: pointer;
    color: #606266;
    font-size: 14px;
    position: relative;
    margin-right: 20px;
}

.tab-item.active {
    color: #5165f7;
    font-weight: 500;
}

.tab-item.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #5165f7;
}

.filter-area {
    padding: 20px 0;
}

.filter-row {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.filter-label {
    font-size: 14px;
    color: #606266;
    margin-right: 12px;
    min-width: 80px;
}
.heng{
    width: 100vw;
    height: 20px;
    background: #f8f8f8;
    margin-left: -40px;
}
.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}

.filter-btn {
    padding: 6px 16px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: #606266;
    background: white;
    transition: all 0.3s;
}

.filter-btn:hover {
    border-color: #5165f7;
    color: #5165f7;
}

.filter-btn.active {
    background-color: #5165f7;
    color: white;
    border-color: #5165f7;
}

.filter-select {
    width: 150px;
    margin-right: 12px;
}

.search-btn {
    background-color: #5165f7;
    border-color: #5165f7;
    margin-right: 12px;
}

.reset-btn {
    background: white;
    border: 1px solid #DCDFE6;
    color: #606266;
}

::v-deep .filter-select .el-input__inner {
    border: 1px solid #DCDFE6 !important;
}
::v-deep .filter-select .el-input {
    border: 1px solid #DCDFE6;
}
::v-deep .el-select .el-input__inner {
    border: 1px solid #DCDFE6 !important;
}

.result-area {
    margin-top: 20px;
}

.result-title {
    font-size: 14px;
    color: #606266;
    margin-bottom: 16px;
    font-weight: 500;
}

::v-deep .el-table {
    border: 1px solid #EBEEF5;
}

::v-deep .el-table th {
    background-color: #EDEFFE !important;
    color: #363636 !important;
    font-weight: 500;
}

::v-deep .el-table td {
    padding: 12px 0;
}

::v-deep .el-table .el-button--text {
    padding: 0;
}
</style>
