<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="doQuery" :search="false">
                </right-toolbar>
            </template>

            <div style="margin-top:12px;" v-if="form.totalInv">
                <el-form ref="form" label-width="100px">
                    <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="总投资" name="first">
                            <el-form-item label="总投资" class="w400"
                                :class="form.totalInv.money * 1 < 0 ? 'txt-error' : ''">
                                <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>

                        </el-tab-pane>
                        <el-tab-pane label="合同金额" name="second">

                            <el-row style="margin-top:12px;">
                                <el-col :span="8">
                                    <el-form-item label="合同金额" class="w200"
                                        :class="form.contract1.money * 1 < 0 ? 'txt-error' : ''">
                                        <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"
                                        :class="form.contract2.money * 1 < 0 ? 'txt-error' : ''">
                                        <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-row>
                            <costContract ref="costContract"></costContract>

                        </el-tab-pane>
                        <el-tab-pane label="安措费" name="third">
                            <el-row style="margin-top:12px;">
                                <el-col :span="8">
                                    <el-form-item label="安措费金额" class="w200"
                                        :class="form.safety1.money * 1 < 0 ? 'txt-error' : ''">
                                        <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"
                                        :class="form.safety2.money * 1 < 0 ? 'txt-error' : ''">
                                        <el-input-number :precision="4" disabled 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"
                                        :class="form.safety3.money * 1 < 0 ? 'txt-error' : ''">
                                        <el-input-number :precision="4" disabled v-model="form.safety3.money"
                                            placeholder="请输入安措挂账金额">
                                        </el-input-number>
                                        <span class="sp-unit">万元</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <costContract ref="costSafety" @change="costSafetyChange"></costContract>
                        </el-tab-pane>
                        <el-tab-pane label="月度产值" name="fourth">
                            <div class="div-title fblue" style="color: #409eff;">月度产值</div>
                            <costMonth ref="costMonth" @success="doAddYearSuccess"></costMonth>

                        </el-tab-pane>
                    </el-tabs>

                </el-form>
                <div style="text-align: center;margin-top: 24px;">
                    <el-button type="success" :loading="loading" @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'
import costContract from './costContract.vue'
export default {
    components: {
        costYear, costMonth, costContract
    },
    data() {
        return {
            activeName: 'first',
            title: '',
            isOpen: false,
            prj: null,
            form: {
                totalInv: null,//总投资
                contract1: null,//合同金额
                contract2: null,//合同支付金额  
                contract3: null,//农民工支付金额                  
                safety1: null,//安措金额
                safety2: null,//安措支付金额
                safety3: null,//安措挂账金额

            },
            yearInv: [],//年度投资
            monthInv: [],//月度产值   
            oldData: [],
            contract: [],//合同金额明细
            safety: [],//安措支付明细
            loading: false,
            depts: [],
        };
    },

    methods: {
        doQuery() {
            this.$confirm('确定刷新数据?', '提示', { type: 'warning' }).then(() => {
                this.loadData();
            });
        },
        costSafetyChange(datas) {
            let m2sum = 0;
            let m3sum = 0;
            datas.forEach(d => {                
                let tmps=d.dataList12;
                tmps.forEach(it=>{
                    m2sum += it.money2;
                    m3sum += it.money3;
                });
            });
            this.form.safety2.money = m2sum;
            this.form.safety3.money = m3sum;
        },
        handleClick(tab, event) {
        },
        checkData() {
            if(this.activeName == 'third'){
                if (!this.$refs.costSafety.checkData()) {
                    this.activeName = "third";
                    return false;
                }
                if (!this.$refs.costContract.checkData()) {
                    this.activeName = "second";
                    return false;
                }
            }else{
                if (!this.$refs.costContract.checkData()) {
                    this.activeName = "second";
                    return false;
                }
                if (!this.$refs.costSafety.checkData()) {
                    this.activeName = "third";
                    return false;
                }
            }


            return true;
        },
        doSave() {
            if (!this.checkData()) {
                return;
            }
            let objs = this.oldData.filter(d => d.costType != 11 && d.costType != 12).map(it => {
                let obj = { ...it };
                obj.money = obj.money ? obj.money * 10000 : 0;
                return obj;
            });
            if (objs.filter(d => d.money * 1 < 0).length > 0) {
                this.$message.error("请检查，金额不能为负数!");
                return;
            }
            let contractObjs = this.$refs.costContract.getDataList().map(it => {
                let obj = { ...it };
                obj.money = obj.money ? obj.money * 10000 : 0;
                obj.money2 = obj.money2 ? obj.money2 * 10000 : 0;
                obj.money3 = obj.money3 ? obj.money3 * 10000 : 0;
                obj.date1 = this.$dt(obj.date1).format("YYYY-MM-DD");
                return obj;
            });
            let safetyObjs = this.$refs.costSafety.getDataList().map(it => {
                let obj = { ...it };
                obj.money = obj.money ? obj.money * 10000 : 0;
                obj.money2 = obj.money2 ? obj.money2 * 10000 : 0;
                obj.date1 = this.$dt(obj.date1).format("YYYY-MM-DD");
                return obj;
            });
            this.loading = true;
            batchUpdate([...objs, ...contractObjs, ...safetyObjs]).then(d => {
                this.loading = false;
                if (d.code != 200) {
                    this.loadData();
                } else {
                    this.$modal.msgSuccess("保存成功");
                    this.loadData();
                }
            });
        },
        doAddYearSuccess() {
            this.loadData();
        },      
        loadData(init) {
            listByProjectId(this.prj.id).then((d) => {   
                let tmps = (d.data || []).map(it => {
                    it.money = it.money ? it.money / 10000.0 : 0;
                    it.money2 = it.money2 ? it.money2 / 10000.0 : 0;
                    it.moneyTotal = it.money - it.money2;
                    it.money3 = it.money3 ? it.money3 / 10000.0 : 0;
                    it.isErr = false;
                    it.date1 = this.$dt(it.date1)
                    return it;
                });                
                this.oldData = tmps;
                this.form.totalInv = this.getValue(tmps, 1);
                this.yearInv = tmps.filter(it => it.costType == 2);
                this.contract = tmps.filter(it => it.costType == 11);
                this.safety = tmps.filter(it => it.costType == 12);

                this.form.contract1 = this.getValue(tmps, 3);
                this.form.contract2 = this.getValue(tmps, 10);

                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);
                    this.$refs.costContract.init(this.contract, this.prj, 11, this.depts);
                    this.$refs.costSafety.init(this.safety, this.prj, 12, this.depts);
                }, 400)
            });
        },
        getValue(tmps, type) {
            let objs = tmps.filter(d => d.costType == type);
            if (objs.length > 0) {
                return objs[0];
            }
            let obj = {
                money: 0,
                costType: type,
                projectId: this.prj.id
            };
            tmps.push(obj);
            return obj;
        },
        loadSub(cb) {
            this.$api.publics.queryUnitList({
                projectId: this.prj.id,
                unitTypes: "2".split(","),
            }).then((d) => {
                this.depts = (d.rows || []).map(it => {
                    it.dataList11 = [];
                    it.dataList12 = [];
                    return it;
                });
                cb && cb();
            });
        },
        show(prj) {
            this.prj = prj;
            this.title = prj.projectName;
            this.isOpen = true;
            this.loadSub(() => {
                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-item.txt-error {
            .el-input__inner {
                border: solid 1px red;
            }
        }

        .el-popover__reference-wrapper {
            position: absolute;
            right: 0px;
            z-index: 999;
        }

        .el-form {
            overflow: hidden;

            .el-form-item {

                &.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>
