<template>
    <div class="cost-month" style="border:solid 1px #409eff;margin: 12px 0px;padding: 6px 12px 0px;position: relative;">
        <el-popover placement="top" v-model="showPop2" ref="pop">
                    <p>选择年份</p>
                    <div style="margin-bottom: 12px;">
                        <el-date-picker v-model="selYear" type="year" placeholder="选择年" :picker-options="{disabledDate:doPick}" >
                        </el-date-picker>
                    </div>
                    <div style="text-align: right; margin: 0">
                        <el-button size="mini" type="text" @click="showPop2 = false">取消</el-button>
                        <el-button type="primary" size="mini" @click="doAddYear">确定</el-button>
                    </div>
                        <el-button  slot="reference" size="mini" type="success" style="margin-right: 12px;" round>增加年份</el-button>
                    </el-popover>                    
        <el-tabs type="card" v-model="activeName" >
            <el-tab-pane v-for="(it,idx) in monthInv" :label="''+it.year" :name="''+it.year" :key="idx">
                <el-col v-for="(item,idxx) in it.value" :key="idxx" :span="12">
                    <el-form-item :label="names[item.month]"  class="w200" :class="item.money*1<0?'txt-error':''">
                        <el-input-number :precision="4" v-model="item.money" placeholder="年度投资">                    
                        </el-input-number>
                        <span class="sp-unit">万元</span>
                    </el-form-item>
                </el-col>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import {addMonthInvestment} from "@/api/project/costOutput.js";
export default {
    name: 'RuoyiUiCostMonth',

    data() {
        return {    
            prj:null,        
            selYear:'',
            names:['','一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
            activeName:'',
            monthInv:[],
            showPop2:false,
        };
    },

    mounted() {
        
    },

    methods: {
        doPick(a,b){            
            return this.monthInv.filter(d=>d.year==a.getFullYear()).length>0;
        },
        doAddYear(){            
            addMonthInvestment({year:this.$dt(this.selYear).$y,projectId:this.prj.id,costType:9}).then(d=>{
                this.$refs.pop.showPopper=false
                this.$emit('success');
            });
        },
        init(d,prj){
            this.monthInv=d;
            this.prj=prj;            
            if(d.filter(it=>it.year==new Date().getFullYear()).length>0){
                this.activeName=""+new Date().getFullYear()
            }else{
                if(d.length>0){
                    this.activeName=""+d[0].year;
                }
            }
        }
    },
};
</script>

<style lang="scss" scoped>

</style>