<template>
    <div>
        <div class="coentent">
            <div class="content-header" style="margin-top:20px;">
                <div class="header-title">上一年数据（万元）</div>
                <div class="header-area">
                    <div class="headers">
                       <div class="header-names">
                            <div>
                                <div class="number-name">{{objDate.net_assets.current}}</div>
                                <div class="number-name2">所有者权益合计/净资产</div>
                            </div>
                            <div> 
                                <span class="numbers">{{ objDate.net_assets.huanbi }}</span>
                                <img src="@/assets/resource/shang.png" alt="">
                            </div>
                       </div>
                    </div>
                    <div class="headers">
                        <div class="header-names">
                            <div>
                                <div class="number-name">{{objDate.product_income.current}}</div>
                                <div class="number-name2">营业收入/净资产</div>
                            </div>
                            <div> 
                                <span class="numbers" style="color: #F04B4B;">{{ objDate.product_income.huanbi}}</span>
                                <img src="@/assets/resource/xiajiang.png" alt="">
                            </div>
                       </div>
                    </div>
                    <div class="headers">
                       <div class="header-names">
                            <div>
                                <div class="number-name">{{objDate.rd_cost.current}}</div>
                                <div class="number-name2">研发（投入）费用</div>
                            </div>
                            <div> 
                                <span class="numbers">{{ objDate.rd_cost.huanbi }}</span>
                                <img src="@/assets/resource/shang.png" alt="">
                            </div>
                       </div>
                    </div>
                    <div class="headers">
                       <div class="header-names">
                            <div>
                                <div class="number-name">{{objDate.product_income.current}}</div>
                                <div class="number-name2">产品（服务）收入</div>
                            </div>
                            <div> 
                                <span class="numbers">{{ objDate.product_ratio.huanbi  }}</span>
                                <img src="@/assets/resource/shang.png" alt="">
                            </div>
                       </div>
                    </div>
                    <div class="headers">
                       <div class="header-names">
                            <div>
                                <div class="number-name">{{ objDate.product_ratio.value  }}</div>
                                <div class="number-name2">产品（服务）收入占比</div>
                            </div>
                            <!-- <div> 
                                <span class="numbers">+89.5%</span>
                                <img src="@/assets/resource/shang.png" alt="">
                            </div> -->
                       </div>
                    </div>
                </div>
            </div>
            <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)"
                        >
                            {{ item.name }}
                            <div class="heng"  v-show="active==index"></div>
                        </div>
                       
                    </div>
                </div>
                <div class="areas">
                    <div v-show="active==0">
                        <qiye @getDetail="getDetail" @getadd="getadd"></qiye>
                    </div>
                    <div v-show="active==1">
                        <zichang @getzichang="getzichang" @getadd2="getadd2"></zichang>
                    </div>
                    <div v-show="active==2">
                        <changping></changping>
                    </div>
                    <div v-show="active==3">
                        <yanfa></yanfa>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {statistic} from '@/api/finance/operate/jinying'
import qiye from './component/qiye.vue'
import yanfa from './component/yanfa.vue'
import zichang from './component/zichang.vue'
import changping from './component/changping.vue'
export default {
    data(){
        return{
            active:0,
            objDate:{},
            tableDate:[
                {
                    name:'企业利润'
                },
                {
                    name:'资产负债'
                },
                {
                    name:'产品 (服务) 收入'
                },
                {
                    name:'研发费用'
                },
            ]
        }
    },
    created(){
        // 从路由参数或 localStorage 恢复 tab 状态（在 created 中设置，确保在渲染前完成）
        this.initActiveTab()
    },
    mounted(){
        this.getstatistic()
        // 确保 active 值已正确设置
        this.$nextTick(() => {
            this.initActiveTab()
        })
    },
    watch: {
        // 监听路由变化，当路由参数变化时更新 active
        '$route'(to, from) {
            // 路由变化时重新初始化 active tab
            this.initActiveTab()
        }
    },
    methods:{
        // 初始化 active tab
        initActiveTab() {
            // 优先使用路由参数，其次使用 localStorage
            let activeTab = this.$route.query.activeTab
            if (activeTab === null || activeTab === undefined || activeTab === '') {
                activeTab = localStorage.getItem('financeOperateActiveTab')
            }
            if (activeTab !== null && activeTab !== undefined && activeTab !== '') {
                const tabIndex = parseInt(activeTab)
                if (!isNaN(tabIndex) && tabIndex >= 0 && tabIndex < this.tableDate.length) {
                    this.active = tabIndex
                    // 更新 localStorage
                    localStorage.setItem('financeOperateActiveTab', tabIndex.toString())
                } else {
                    // 如果解析失败，使用默认值 0
                    this.active = 0
                }
            } else {
                // 如果没有参数，使用默认值 0
                this.active = 0
            }
        },
        getstatistic(){
            statistic().then((res)=>{
                    this.objDate=res.data.data
            })
        },
        //资产负责添加
        getadd2(){
            // 保存当前 tab 状态
            localStorage.setItem('financeOperateActiveTab', this.active.toString())
            this.$router.push({
                path: '/zichangEdit',
                query: { activeTab: this.active }
            })
        },
        //企业利润新增
        getadd(){
            // 保存当前 tab 状态
            localStorage.setItem('financeOperateActiveTab', this.active.toString())
            this.$router.push({
                path: '/qiyeEdit',
                query: { activeTab: this.active }
            })
        },
        //企业利润
        getDetail(row){
            // 保存当前 tab 状态
            localStorage.setItem('financeOperateActiveTab', this.active.toString())
            // 传递 id 和 activeTab 作为路由参数
            if (row && row.id) {
                this.$router.push({
                    path: '/qiyeDetail',
                    query: { id: row.id, activeTab: this.active }
                })
            } else {
                this.$router.push({
                    path: '/qiyeDetail',
                    query: { activeTab: this.active }
                })
            }
        },
        //资产负债
        getzichang(row){
            // 保存当前 tab 状态
            localStorage.setItem('financeOperateActiveTab', this.active.toString())
            // 传递 id 和 activeTab 到详情页面
            if (row && row.id) {
                this.$router.push({
                    path: '/zichangDetail',
                    query: { id: row.id, activeTab: this.active }
                })
            } else {
                this.$router.push({
                    path: '/zichangDetail',
                    query: { activeTab: this.active }
                })
            }
        },
        btnHeder(e){
            this.active=e
            // 更新 localStorage
            localStorage.setItem('financeOperateActiveTab', e.toString())
        }
    },
    components:{
        qiye,
        zichang,
        changping,
        yanfa
    }
    
}
</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;
    margin: 0 auto;
    margin-top: 6px;
}
.header-table{
 cursor: pointer;
}
.contentss-header{
    width: 100%;
    display: flex;
    justify-content: space-between;
    width: 372px;
}
.contentss{
    width: 97%;
    margin: 0 auto;
    padding-top: 12px;
}
.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: 18.5%;
    height: 102px;
    background: #F7F7FA;
    margin-top: 38px;
    border-radius: 8px;
    display: inline-block;
    margin-left: 1.2%;
    
}
.header-area{
    margin: 0 auto;
}
.content-header{
    width: 100%;
   
    background:white;
    padding-bottom: 22px;
   
}
    .coentent{
        background: #f8f8f8;
        height: 80vh;
        width: 100%;
    }
</style>