<template>
    <!-- ageDistribute -->
    <div class="AgeDistribute">
        <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">种羊年龄分布</h2>
        <section class="section">
            <div class="left">
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="">
                        <h2>种公羊</h2>
                    </el-form-item>
                    <el-form-item label="公羊一年龄">
                        <el-input v-model="form.maleAgeOne"></el-input>
                    </el-form-item>
                    <el-form-item label="公羊二年龄">
                        <el-input v-model="form.maleAgeTwo"></el-input>
                    </el-form-item>
                    <el-form-item label="公羊三年龄">
                        <el-input v-model="form.maleAgeThree"></el-input>
                    </el-form-item>
                    <el-form-item label="公羊四年龄">
                        <el-input v-model="form.maleAgeFour"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="right">
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="">
                        <h2>种母羊</h2>
                    </el-form-item>
                    <el-form-item label="母羊一年龄">
                        <el-input v-model="form.femaleAgeOne"></el-input>
                    </el-form-item>
                    <el-form-item label="母羊二年龄">
                        <el-input v-model="form.femaleAgeTwo"></el-input>
                    </el-form-item>
                    <el-form-item label="母羊三年龄">
                        <el-input v-model="form.femaleAgeTwo"></el-input>
                    </el-form-item>
                    <el-form-item label="母羊四年龄">
                        <el-input v-model="form.femaleAgeFour"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </section>

        <el-button style="margin-left:40%" type="primary" @click="onSubmit">更新信息</el-button>
    </div>
</template>

<script>
import { reqAgeDistribute, reqSetAgeDistribute } from "@/api/breed.js";
export default {
    name: "AgeDistribute",
    data() {
        return {
            form: {
                self: "",
                father: "",
                mother: "",
                fm: "",
                ff: "",
                mf: "",
                mm: ""
            }
        };
    },
    created() {
        this.getAgeDistribute();
    },
    methods: {
        onSubmit() {
            this.$confirm("确定更新信息？").then(() => {
                reqSetAgeDistribute(this.form)
                    .then(res => {
                        if (res.errCode) {
                            this.$message.error(res.errMsg);
                        } else {
                            this.$message.success("更新成功！");
                            this.getAgeDistribute();
                        }
                    })
                    .catch(err => {
                        console.log(err);
                        this.$message.error("更新失败！");
                    });
            });
        },
        getAgeDistribute() {
            reqAgeDistribute()
                .then(res => {
                    this.form = res.conf;
                })
                .catch(err => {
                    console.error(err);
                });
        }
    }
};
</script>

<style lang="scss" scoped>
.AgeDistribute {
    .section {
        display: flex;
        .left {
            width: 400px;
            margin-left: 50px;
        }
        .right {
            width: 400px;
            margin-left: 80px;
        }
    }
}
</style>