<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;" v-if="form.totalInv">
            <el-form ref="form"   label-width="160px">
                <el-form-item label="总投资"  class="w400">
                    <el-input-number :precision="4" v-model="form.totalInv.money" placeholder="请输入总投资">                    
                    </el-input-number>
                    <span class="sp-unit">万元</span>
                </el-form-item>
                <div class="div-title fblue" style="color: #409eff;">年度投资</div>
                <costYear ref="costYear" @success="doAddYearSuccess">

                </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.money" 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.money" 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.money" 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.money" 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.money" 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.money" 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" @success="doAddYearSuccess"></costMonth>
            </el-form>
            <div style="text-align: center;margin-top: 24px;">
                <el-button type="success" @click="doSave">保存</el-button>
            </div>
            </div>

        </el-drawer>
        
    </div>
</template>
  
<script>
import { listByProjectId,batchUpdate } 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:[],//月度产值   
            oldData:[]
        };
    },

    mounted() { },

    methods: {
        doSave(){
            let objs=this.oldData.map(it=>{
                let obj={...it};
                obj.money=obj.money?obj.money*10000:0;
                return obj;
            });
            batchUpdate(objs).then(d=>{                
                if(d.code!=200){
                    this.loadData();                    
                }else{
                    this.$modal.msgSuccess("保存成功");
                }
            });
        },
        doAddYearSuccess(){
            this.loadData();
        },
        resetData(tmps){
            if(this.oldData.length==0){
                return;
            }
            tmps.forEach(it=>{
                let objs=this.oldData.filter(d=>d.id==it.id);
                if(objs.length>0){
                    it.money=objs[0].money;
                }
            });
            
        },
        loadData(init) {
            listByProjectId(this.prj.id).then((d) => {                
                let tmps=(d.data||[]).map(it=>{                    
                    it.money=it.money?it.money/10000.0:0;
                    return it;
                });
                this.resetData(tmps);
                this.oldData=tmps;
                this.form.totalInv=this.getValue(tmps,1);
                this.yearInv=tmps.filter(it=>it.costType==2);
                this.form.contract1=this.getValue(tmps,3);
                this.form.contract2=this.getValue(tmps,4);
                this.form.contract3=this.getValue(tmps,5);
                this.form.safety1=this.getValue(tmps,6);
                this.form.safety2=this.getValue(tmps,7);
                this.form.safety3=this.getValue(tmps,8);
                let objs=tmps.filter(it=>it.costType==9);
                let obj={};
                this.monthInv=[];
                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]
                    })
                }
                setTimeout(()=>{
                    this.$refs.costYear.init(this.yearInv,this.prj);
                    this.$refs.costMonth.init(this.monthInv,this.prj);
                },400)
            });
        },
        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-popover__reference-wrapper{
            position: absolute;
            right: 0px;
            z-index: 999;
        }
        .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>
