<template>
    <div>
        <div class="headers">
            <div class="headers-name">企业利润明细 (元)</div>
            <div>
                <el-form :inline="true" :model="form" class="demo-form-inline">
                    <el-form-item label="年度选择" size="small">
                        <el-date-picker
                         style="width: 140px;"
                        v-model="form.year"
                        type="year"
                        placeholder="选择年度"
                        format="yyyy"
                        value-format="yyyy">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item class="formitem">
                        <el-cascader
                         style="width: 140px;"
                        v-model="value"
                        :options="options"
                        size="small"
                        class="cascader-select"
                        @change="handleChange"></el-cascader>
                    </el-form-item>
                    <el-form-item label="是否有效" size="small" class="formitem" style="top:-3px;">
                        <el-select v-model="form.value3" placeholder="请选择" class="selects">
                            <el-option v-for="item in options3" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary"  size="small" @click="btnAdd"
                           class="tianjia">添加</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="content-table">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column fixed prop="year" label="年度" align="center" width="100">
                </el-table-column>
                <el-table-column prop="business_cost" label="营业成本" align="center">
                </el-table-column>
                <el-table-column prop="sales_expenses" label="销售费用" align="center">
                </el-table-column>
                <el-table-column prop="operating_revenue" label="营业收入" align="center">
                </el-table-column>
                <el-table-column prop="operating_profit" label="营业利润" align="center">
                </el-table-column>
                <el-table-column prop="total_profit" label="利润总额" align="center">
                </el-table-column>
                <el-table-column prop="net_profit" label="净利润" align="center">
                </el-table-column>
                <el-table-column prop="total_comprehensive_income" label="综合收益总额" align="center">
                </el-table-column>
                <el-table-column prop="status" label="是否有效" align="center">
                   
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
                       
                    </template>
                </el-table-column>
            </el-table>
            <div class="footer">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import {list} from '@/api/finance/operate/qiye'
export default {
    data() {
        return {
            currentPage: 1,
            pageSize: 100,
            total: 0,
            tableData: [],
            options3: [
                {
                    value: 1,
                    label: "有效"
                },
                {
                    value: 2,
                    label: "无效"
                }
            ],
            options2: [
                {
                    value: 1,
                    label: "本年 (期)"
                },
                {
                    value: 2,
                    label: "2025"
                }
            ],
            options: [
                {
                    value: 1,
                    label: "全年",
                    
                },
                {
                    value: 2,
                    label: "半年",
                    children: [
                        {
                            value: '1',
                            label: '上半年'
                        },
                        {
                            value: '2',
                            label: '下半年'
                        }
                    ]
                },
                {
                    value: 3,
                    label: "季度",
                    children: [
                        {
                            value: '1',
                            label: '第一季度'
                        },
                        {
                            value: '2',
                            label: '第二季度'
                        },
                        {
                            value: '3',
                            label: '第三季度'
                        },
                        {
                            value: '4',
                            label: '第四季度'
                        }
                    ]
                },
                {
                    value: 4,
                    label: "月度",
                    children: [
                        {
                            value: '1',
                            label: '1月'
                        },
                        {
                            value: '2',
                            label: '2月'
                        },
                        {
                            value: '3',
                            label: '3月'
                        },
                        {
                            value: '4',
                            label: '4月'
                        },
                        {
                            value: '5',
                            label: '5月'
                        },
                        {
                            value: '6',
                            label: '6月'
                        },
                        {
                            value: '7',
                            label: '7月'
                        },
                        {
                            value: '8',
                            label: '8月'
                        },
                        {
                            value: '9',
                            label: '9月'
                        },
                        {
                            value: '10',
                            label: '10月'
                        },
                        {
                            value: '11',
                            label: '11月'
                        },
                        {
                            value: '12',
                            label: '12月'
                        }
                    ]
                }
            ],
            form: {
                
                year:"",
            },
            value1: null,
            value: []
        }
    },
    mounted(){
        this.getlist()
    },
    methods:{
        //新增
        btnAdd(){
            this.$emit('getadd')
        },
        //列表
        getlist(){
            let parm = {
                year: this.form.year || '',
                period: this.getPeriodValue(),
                isValid: this.form.value3 || '',
                page: this.currentPage,
                limit: this.pageSize
            }
            list(parm).then((res)=>{
                if(res && res.code === 1) {
                    this.tableData = res.data.data
                    this.total = res.data.total
                    for(let itme of this.tableData){
                        if(itme.status == 0){
                            itme.status='无效'
                        }else{
                            itme.status='有效'
                        }
                    }
                } 
            })
        },
        // 获取级联选择器的值
        getPeriodValue() {
            if (!this.value || this.value.length === 0) return ''
            // 如果选择的是全年，返回1
            if (this.value.length === 1 && this.value[0] === 1) return '1'
            // 如果是其他选项，返回对应的值
            return this.value.join(',')
        },
        handleSizeChange(val){
            this.pageSize = val
            this.currentPage = 1
            this.getlist()
        },
        handleCurrentChange(val){
            this.currentPage = val
            this.getlist()
        },
        handleClick(row){
            // 传递行数据（包含 id）给父组件
            this.$emit('getDetail', row)
        },
        handleChange(value) {
            console.log('级联选择器值变化:', value)
            // 级联选择器值变化时重新加载列表
            this.currentPage = 1
            this.getlist()
        }
    }
}
</script>
<style scoped>
.footer{
    display: flex;
    justify-content: end;
    margin-top: 20px;
}
.tianjia{
    position: relative;
    top: -9px;
    background-color: #5065F6;
}
::v-deep .el-table thead {
  background-color: #DCE0FD !important;
  color: #363636 !important;
}
::v-deep .el-table__header th {
  background-color: #DCE0FD !important;
  color: #363636 !important;
}

.formitem {
    position: relative;
    top: -5px;
}

::deep .el-form-item__label {
    font-size: 15px !important;
}

.headers-name {
    font-size: 15px;
    position: relative;
    top: 14px;
}
.selects{
    width: 100px;
   
}
.cascader-select {
    width: 120px;
}
::v-deep .el-date-editor.el-input .el-input__inner {
    border: 1px solid #DCDFE6 !important;
}
::v-deep .el-date-picker .el-input__inner {
    border: 1px solid #DCDFE6 !important;
}
::v-deep .el-select .el-input__inner {
    border: 1px solid #DCDFE6 !important;
}
::v-deep .el-cascader .el-input__inner {
    border: 1px solid #DCDFE6 !important;
}
.headers {
    display: flex;
    justify-content: space-between
}
</style>