<template>
    <div class="cost-year" style="border:solid 1px #409eff;margin: 12px 0px;padding: 12px 12px 0px;position: relative;">

        <el-popover placement="top" :visible="data.showPop2" width="300px">
            <p>选择年份</p>
            <div style="margin-bottom: 12px;">
                <el-date-picker v-model="data.selYear" type="year" placeholder="选择年份" style="width:100%"
                    :picker-options="{ disabledDate: doPick }">
                </el-date-picker>
            </div>
            <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="doCancel">取消</el-button>
                <el-button type="primary" size="mini" @click="doAddYear">确定</el-button>
            </div>
            <template #reference>
                <el-button class="btn-add-year" size="mini" @click="data.showPop2=true" type="success" style="margin-right: 12px;" round>增加年份</el-button>
            </template>

        </el-popover>


        <el-tabs type="card" v-model="data.activeName">
            <el-tab-pane v-for="(it, idx) in data.yearInv" :label="'' + it.year" :name="'' + it.year" :key="idx">
                <el-form-item label="年度投资" class="w400" :class="it.money * 1 < 0 ? 'txt-error' : ''">
                    <el-input-number :precision="2" v-model="it.money" placeholder="年度投资">
                    </el-input-number>
                    <span class="sp-unit">万元</span>
                </el-form-item>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import {addYearInvestment} from '@/api/manage/costOutput.js'
const { proxy } = getCurrentInstance();
const $emit=defineEmits(["success"])
const data = reactive({
    selYear: '',
    activeName: '',
    yearInv: [],
    showPop2: false,
    prj: null
})

function doCancel(){
    data.showPop2=false;
}
function doPick(a, b) {
    return data.yearInv.filter(d => d.year == a.getFullYear()).length > 0;
}
function doAddYear() {
    addYearInvestment({
        comId:data.prj.comId,
        year:proxy.$dt(data.selYear).$y,
        projectId:data.prj.id,
        costType:2
    }).then(d=>{
        $emit("success");
        data.showPop2=false;
    })
}
function init(d, prj) {
    data.prj = prj;
    data.yearInv = d;
    if (d.filter(it => it.year == new Date().getFullYear()).length > 0) {
        data.activeName = "" + new Date().getFullYear()
    } else {
        if (d.length > 0) {
            data.activeName = "" + d[0].year;
        }
    }
}
defineExpose({
    init
})
</script>
<style lang="scss">
 .cost-year{
    .btn-add-year{
        position: absolute;
        right: 0px;
        z-index: 9;
    }
 }
</style>