<template>
    <div class="pastureInfo">
        <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">牧场信息</h2>
        <div class="left">
            <el-form ref="form" :model="form">
                <el-form-item label="牧场名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label="牧场简介">
                    <el-input type="textarea" v-model="form.description"></el-input>
                </el-form-item>
                <el-form-item label="主要负责人及电话">
                    <el-row type="flex" :gutter="19">
                        <el-col :span="8">
                            <el-input v-model="form.manager"></el-input>
                        </el-col>
                        <el-col :span="15">
                            <el-input v-model="form.managerPhone"></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="所在省市">
                    <el-row type="flex" justify="space-between">
                        <el-col :span="11">
                            <el-input v-model="form.province"></el-input>
                        </el-col>
                        <el-col :span="11">
                            <el-input v-model="form.city"></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="详细地址">
                    <el-input v-model="form.address"></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 { reqPastureInfo, reqUpdatePasture } from "@/api/fileInfo.js";
export default {
    data() {
        return {
            // 保留接口结构
            reqInfo: {},
            form: {
                name: "西溪海创园",
                email: "antdesign@alipay.com",
                description: "一个养殖平台",
                manager: "沈厂长",
                managerPhone: "18202780511",
                province: "浙江省",
                city: "杭州市",
                address: "西湖区工专路 77 号"
            }
        };
    },
    created() {
        // 获取牧场信息
        this.getPastureInfo();
    },
    methods: {
        onSubmit() {
            let tempArr = [];
            for (const key in this.form) {
                tempArr.push({ key, val: this.form[key] });
            }
            this.reqInfo.conf = JSON.stringify({
                data: JSON.stringify(tempArr)
            });
            reqUpdatePasture(this.reqInfo)
                .then(res => {
                    // this.$message.success("更新企业信息成功！");
                    if (res.errCode) {
                        this.$message.error(res.errMsg);
                    } else {
                        this.$message.success("成功");
                    }
                })
                .catch(err => {
                    console.error(err);
                    this.$message.error("更新企业信息失败！");
                });
        },
        // 获取牧场信息
        getPastureInfo() {
            reqPastureInfo()
                .then(res => {
                    // 保留接口结构
                    this.reqInfo = res;
                    let obj = {};
                    JSON.parse(res.conf.data).forEach(item => {
                        obj[item.key] = item.val;
                    });
                    this.form = obj;
                })
                .catch(err => {
                    console.error(err);
                });
        }
    }
};
</script>

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