<template>
    <div class="firmInfo">
        <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.decription"></el-input>
                </el-form-item>
                <el-form-item label="国家地区">
                    <el-input v-model="form.province"></el-input>
                </el-form-item>
                <el-form-item label="所在省市">
                    <el-row type="flex" justify="space-between">
                        <el-col :span="11">
                            <el-input v-model="form.country"></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 label="联系电话">
                    <el-row type="flex" :gutter="19">
                        <el-input v-model="form.tel"></el-input>
                    </el-row>
                </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 { reqFirminfo, reqUpdateFirm } from "@/api/fileInfo.js";
export default {
    name: "firmInfo",
    data() {
        return {
            // 保留接口结构
            reqInfo: {},
            form: {
                name: "长兴湖羊",
                email: "antdesign@alipay.com",
                decription: "一个养殖平台",
                province: "中国",
                country: "浙江省",
                city: "杭州市",
                address: "西溪海创园",
                tel: "0752-88888888"
            }
        };
    },
    created() {
        this.getFirminfo();
    },
    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)
            });
            reqUpdateFirm(this.reqInfo)
                .then(res => {
                    // this.$message.success("更新企业信息成功！");
                    if (res.errCode) {
                        this.$message.error(res.errMsg);
                    } else {
                        this.$message.success("成功");
                    }
                })
                .catch(err => {
                    console.log(err);
                    this.$message.error("更新企业信息失败！");
                });
        },
        // 获取企业信息
        getFirminfo() {
            reqFirminfo()
                .then(res => {
                    // 保留接口结构
                    this.reqInfo = res;
                    console.log(res);
                    if (res.conf.data) {
                        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>
.firmInfo {
    .left {
        width: 400px;
        margin-left: 50px;
    }
}
</style>