<template>
    <div class="project-cost-outpu-drawer" v-if="isOpen">
        <el-drawer v-if="isOpen" :visible.sync="isOpen" direction="rtl" size="50%" style="padding-left: 20px">
            <template slot="title">
                <div>{{ (title) + " 【项目成本产值管理】" }}</div>
                <right-toolbar @queryTable="loadData" :search="false">                  
                </right-toolbar>
            </template>
            <div style="margin-top:12px;">
            <el-form ref="form"   label-width="160px">
                <el-form-item label="总投资"  class="w400">
                    <el-input-number :precision="4" v-model="form.totalInv" placeholder="请输入总投资">                    
                    </el-input-number>
                    <span class="sp-unit">万元</span>
                </el-form-item>
                <div class="div-title fblue" style="color: #409eff;">年度投资</div>
                <costYear ref="costYear">

                </costYear>

                <div class="div-title fblue" style="color: #409eff;border-bottom: solid 1px #409eff;line-height: 40px;">合同金额</div>
                <el-row style="margin-top:12px;">
                    <el-col :span="8">
                        <el-form-item label="合同金额"  class="w200">
                            <el-input-number :precision="4" v-model="form.contract1" placeholder="请输入合同金额">                    
                            </el-input-number>
                            <span class="sp-unit">万元</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="合同支付金额"  class="w200">
                            <el-input-number :precision="4" v-model="form.contract2" placeholder="请输入合同支付金额">                    
                            </el-input-number>
                            <span class="sp-unit">万元</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="合同挂账金额"  class="w200">
                            <el-input-number :precision="4" v-model="form.contract3" placeholder="请输入合同挂账金额">                    
                            </el-input-number>
                            <span class="sp-unit">万元</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <div class="div-title fblue" style="color: #409eff;border-bottom: solid 1px #409eff;line-height: 40px;">安措金额</div>
                <el-row style="margin-top:12px;">
                    <el-col :span="8">
                        <el-form-item label="安措金额"  class="w200">
                            <el-input-number :precision="4" v-model="form.safety1" placeholder="请输入安措金额">                    
                            </el-input-number>
                            <span class="sp-unit">万元</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="安措支付金额"  class="w200">
                            <el-input-number :precision="4" v-model="form.safety2" placeholder="请输入安措支付金额">                    
                            </el-input-number>
                            <span class="sp-unit">万元</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="安措挂账金额"  class="w200">
                            <el-input-number :precision="4" v-model="form.safety3" placeholder="请输入安措挂账金额">                    
                            </el-input-number>
                            <span class="sp-unit">万元</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <div class="div-title fblue" style="color: #409eff;">月度投资</div>
                <costMonth ref="costMonth"></costMonth>
            </el-form>
            <div style="text-align: center;margin-top: 24px;">
                <el-button type="success">保存</el-button>
            </div>
            </div>

        </el-drawer>
        
    </div>
</template>
  
<script>
import { listByProjectId,addYearInvestment,addMonthInvestment } from "@/api/project/costOutput.js";
import costYear from './costYear.vue'
import costMonth from './costMonth.vue'
export default {
    components: {
        costYear,costMonth
    },
    data() {
        return {
            title:'',
            isOpen: false,
            prj: null,
            form:{
                totalInv:null,//总投资
                contract1:null,//合同金额
                contract2:null,//合同支付金额
                contract3:null,//合同挂账金额
                safety1:null,//安措金额
                safety2:null,//安措支付金额
                safety3:null,//安措挂账金额

            },
            yearInv:[],//年度投资
            monthInv:[],//月度产值       
        };
    },

    mounted() { },

    methods: {
        
        loadData(init) {
            listByProjectId(this.prj.id).then((d) => {
                let tmps=d.data||[];
                this.form.totalInv=this.getValue(tmps,1).money||0;
                this.yearInv=tmps.filter(it=>it.costType==2);
                this.form.contract1=this.getValue(tmps,3).money||0;
                this.form.contract2=this.getValue(tmps,4).money||0;
                this.form.contract3=this.getValue(tmps,5).money||0;
                this.form.safety1=this.getValue(tmps,6).money||0;
                this.form.safety2=this.getValue(tmps,7).money||0;
                this.form.safety3=this.getValue(tmps,8).money||0;
                let objs=tmps.filter(it=>it.costType==9);
                let obj={};
                objs.forEach(it=>{
                    if(!obj[it.year]){
                        obj[it.year]=[];
                    }
                    obj[it.year].push(it);
                });
                for(let k in obj){
                    this.monthInv.push({
                        year:k,
                        value:obj[k]
                    })
                }
                this.$refs.costYear.init(this.yearInv);
                this.$refs.costMonth.init(this.monthInv);
            });
        },
        getValue(tmps,type){
            let objs=tmps.filter(d=>d.costType==type);
            return objs.length>0?objs[0]:{};
        },
        show(prj) {
            this.prj = prj;
            this.title = prj.projectName;
            this.isOpen = true;
            this.loadData(true);
        },
    },
};
</script>
  
<style lang="scss" scoped>
.project-cost-outpu-drawer {
    ::v-deep .el-drawer {
        min-width: 1400px;
    }

    ::v-deep .el-drawer__header {
        margin-bottom: 0px;
    }

    ::v-deep .el-drawer__body {
        padding: 0px 24px;

        .el-form {
            overflow: hidden;

            .el-form-item {
                margin-bottom: 8px !important;
                &.w400{
                    .el-input-number{
                        width:400px;
                    }    
                }
                .el-input-number{
                    .el-input-number__decrease{
                        display: none;
                    }
                    .el-input-number__increase{
                        display: none;
                    }
                    .el-input__inner{
                        padding: 0px 12px;
                        text-align: right;
                    }
                }
                .sp-unit{
                    margin-left:12px;
                }
            }
            .div-title{
                
            }
        }

        .lvl-3 {
            .lbl-title {
                font-size: 12px;
            }
        }
    }
}
</style>
