<template>


    <div>
        <div class="coentent">
         
            <div class="contents-area">
                <div class="contentss">
                    <div class="contentss-header">
                        <div class="header-table"  v-for="(item,index) in tableDate" 
                        :key="index"
                        :class="{'active':active==index}"
                        @click="btnHeder(index)"
                        >
                            <span class="header-text">{{ item.name }}</span>
                            <div class="heng"  v-show="active==index"></div>
                        </div>
                        
                        <div style="position: relative;left: 23%;">
                            <el-button type="primary" @click="showAddDialog" size="small" class="add-btn">添加知识产权</el-button>
                        </div>
                    </div>
                </div>
                <div class="areas">
                    <knowledgeList 
                        v-if="tableDate[active]"
                        :type="tableDate[active].type" 
                        @btnAdds="btnAdds" 
                        @getaudit="getaudit">
                    </knowledgeList>
                </div>
                
                <!-- 新增知识产权弹窗 -->
                <el-dialog :visible.sync="dialogVisible" width="50%">
                    <div class="dialog-header">新增知识产权</div>
                    <div class="contents">
                        <div class="container">
                            <table class="department-table">               
                                <tr>
                                    <td class="th1">知识产权类型</td>
                                    <td>
                                        <el-select v-model="selectedType" style="width: 100%;" placeholder="请选择">
                                            <el-option
                                                v-for="item in typeOptions"
                                                :key="item.type"
                                                :label="item.name"
                                                :value="item.type">
                                            </el-option>
                                        </el-select>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
                        <el-button type="primary" style="background-color: #5165f7;" @click="handleAddConfirm" size="small" :disabled="!selectedType">前往添加</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</template>
<script>
import knowledgeList from './conponent/faming.vue'
export default {
    data(){
        return{
            active:0,
            tableDate:[
                {
                    name:'发明专利',
                    type: 1
                },
                {
                    name:'实用新型',
                    type: 5
                },
                {
                    name:'软件著作权',
                    type: 6
                },
                {
                    name:'集成电路布图',
                    type: 4
                },
                {
                    name:'外观设计',
                    type: 7
                },
                {
                    name:'国家新药',
                    type: 3
                },
                {
                    name:'植物新品种',
                    type: 2
                },
                {
                    name:'商标信息',
                    type: 8
                },
            ],
            dialogVisible: false,
            selectedType: null,
            typeOptions: [
            {
                    name:'发明专利',
                    type: 1
                },
                {
                    name:'实用新型',
                    type: 5
                },
                {
                    name:'软件著作权',
                    type: 6
                },
                {
                    name:'集成电路布图',
                    type: 4
                },
                {
                    name:'外观设计',
                    type: 7
                },
                {
                    name:'国家新药',
                    type: 3
                },
                {
                    name:'植物新品种',
                    type: 2
                },
                {
                    name:'商标信息',
                    type: 8
                },
            ]
        }
    },
    watch: {
        // 监听 active 变化，如果弹窗打开，同步更新下拉框的选中值
        active(newVal) {
            if (this.dialogVisible && this.tableDate[newVal]) {
                this.selectedType = this.tableDate[newVal].type
            }
        }
    },
    methods:{
        //发明专利
        btnAdds(){
            this.$router.push('/knowledgeEdit')
        },
        //发明专利详情
        getaudit(row){
            if (row && row.id) {
                this.$router.push({
                    path: '/knowledgeDetial',
                    query: { id: row.id }
                })
            }
        },
        btnHeder(e){
            this.active=e
            this.selectedType=e
        },
        getPiliang(){
            this.$router.push('/employeepidetial')
        },
        // 显示添加知识产权弹窗
        showAddDialog(){
            // 根据当前激活的标签页，设置默认选中的类型
            if (this.tableDate[this.active]) {
                this.selectedType = this.tableDate[this.active].type
            } else {
                this.selectedType = null
            }
            this.dialogVisible = true
        },
        // 确认添加
        handleAddConfirm(){
            if (this.selectedType) {
                this.$router.push({
                    path: '/knowledgeEdit',
                    query: { type: this.selectedType }
                })
                this.dialogVisible = false
            }
        },
     
    },
    components:{
        knowledgeList
    }
    
}
</script>
<style scoped>
.areas{
 
 padding-bottom: 15px;
 width: 97%;
 margin: 0 auto;
 padding-top: 20px;
}
.active{
 color: #5165f7 !important;

}
.heng{
    width: 20px;
    height: 6px;
    background: #5165f7;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    flex-shrink: 0;
    margin: 0;
}
.header-table{
    cursor: pointer;
    position: relative;
    height: 40px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    line-height: 1;
    vertical-align: top;
    border: none;
    outline: none;
}

.header-text {
    display: inline-block;
    line-height: 1.5;
}
.contentss-header{
 width: 100%;
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 flex-wrap: nowrap;
}

.add-btn {
    background-color: #5165f7;
    border-color: #5165f7;
    margin-left: 20px;
}
.contentss{
width:77%;
    /* margin: 0 auto; */
    padding-top: 12px;
    margin-left: 40px
}
.contents-area{
 width: 100%;
 
 background: white;
 margin-top: 20px;

}
.header-title{
 position: relative;
 top: 20px;
 left: 25px;
}
.numbers{
 position: relative;
 top: -7px;
 color: #2AB95F;
}
.number-name2{
 margin-top: 8px;
 font-size: 14px;
 color: #979BBC;
}
.number-name{
 font-weight: bold;
 font-size:25px;
 color: #17192C;
}
.header-names{
display: flex;
width: 82%;
 justify-content: space-between;
 margin: 0 auto;
 padding-top: 20px;
}
.headers{
 width: 304px;
 height: 102px;
 background: #F7F7FA;
 margin-top: 38px;
 border-radius: 8px;
 
}
.header-area{
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 width: 97%;
 margin: 0 auto;
}
.content-header{
 width: 100%;

 background:white;
 padding-bottom: 22px;

}
.coentent {
    width: 100%;
}

/* 弹窗样式 */
.dialog-header {
    width: 100%;
    height: 54px;
    background: #F7F7FA;
    text-align: center;
    line-height: 54px;
    position: relative;
    top: -26px;
    margin-right: -20px;
    color: #363636;
    font-weight: bold;
    font-size: 18px;
}

.contents {
    width: 90%;
    margin: 0 auto;
}

.container {
    width: 72%;
    margin: 0 auto;
}

.department-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.department-table tr {
    border: 1px solid #DCE0FD;
    cursor: pointer;
}

.department-table td {
    background-color: white;
    padding: 5px 20px;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
}

.department-table tr:last-child td {
    border-bottom: none;
}

.department-table tr:hover td {
    background-color: #f9f9f9;
    transition: background-color 0.2s;
}

.th1 {
    width: 120px;
    font-size: 13px;
    text-align: right;
    padding-right: 8px;
    border-right: 1px solid #DCE0FD;
    background: #EDEFFE !important;
    border-bottom: 1px solid #DCE0FD !important;
}

.dialog-footer {
    text-align: center;
    margin: 0 auto;
    margin-top: 12px;
}

:deep .el-dialog__body {
    padding: 0 !important;
}
</style>