<template>
    <!-- cost -->
    <div class="Cost">
        <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">成本比例</h2>
        <div class="left">
            <el-form ref="form" :model="form" label-width="140px">
                <el-form-item label="总和">
                    <h1>{{ result }}%</h1>
                </el-form-item>
                <el-form-item label="购买成本(%)">
                    <el-input v-model="form.purchaseCost"></el-input>
                </el-form-item>
                <el-form-item label="运输成本(%)">
                    <el-input v-model="form.transportationCost"></el-input>
                </el-form-item>
                <el-form-item label="人工成本(%)">
                    <el-input v-model="form.laborCost"></el-input>
                </el-form-item>
                <el-form-item label="消毒成本(%)">
                    <el-input v-model="form.disinfectionCost"></el-input>
                </el-form-item>
                <el-form-item label="折旧成本(%)">
                    <el-input v-model="form.depreciationCost"></el-input>
                </el-form-item>
                <el-form-item label="排酸损耗(%)">
                    <el-input v-model="form.acidLoss"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button style="margin-left:60%" type="primary" @click="onSubmit">更新信息</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { reqCost, reqSetCost } from "@/api/butcher.js";
export default {
    name: "Cost",
    data() {
        return {
            form: {
                id: "-1",
                purchaseCost: "",
                transportationCost: "",
                laborCost: "",
                disinfectionCost: "",
                depreciationCost: "",
                acidLoss: ""
            }
        };
    },
    created() {
        this.getCost();
    },
    computed: {
        result() {
            return (
                1*this.form.purchaseCost +
                1*this.form.transportationCost +
                1*this.form.laborCost +
                1*this.form.disinfectionCost +
                1*this.form.disinfectionCost +
                1*this.form.depreciationCost +
                1*this.form.acidLoss
            );
        }
    },
    methods: {
        onSubmit() {
            this.$confirm("确定更新信息？").then(() => {
                console.log(this.form);
                reqSetCost(this.form)
                    .then(res => {
                        if (res.errCode) {
                            this.$message.error(res.errMsg);
                        } else {
                            this.getCost();
                            this.$message.success("更新成功！");
                        }
                    })
                    .catch(err => {
                        console.log(err);
                        this.$message.error("更新失败！");
                    });
            });
        },
        getCost() {
            reqCost()
                .then(res => {
                    this.form = res.conf;
                    this.form.id = res.id;
                })
                .catch(err => {
                    console.error(err);
                });
        }
    }
};
</script>

<style lang="scss" scoped>
.Cost {
    .left {
        width: 400px;
        margin-left: 50px;
    }
}
</style>