<template>
    <div>
        <el-dialog
            width="50%"
            title="公司注册"
            :visible.sync="dialogVisible"
            :before-close="handleClose"
        >
            <el-form
                label-width="120px"
                :model="addOrEditForm"
                ref="addOrEditFormRef"
            >
                <h3>公司信息</h3>
                <el-form-item label="公司名称：" prop="deptName">
                    <el-input v-model="addOrEditForm.deptName" />
                </el-form-item>
                <el-form-item label="公司简称：" prop="deptAbbreviation">
                    <el-input v-model="addOrEditForm.deptAbbreviation" />
                </el-form-item>
                <el-form-item label="公司概述：" prop="remark">
                    <el-input v-model="addOrEditForm.remark" type="textarea" />
                </el-form-item>
                <h3>基础设置</h3>
                <el-form-item label="默认密码：" prop="password">
                    <el-input
                        type="textarea"
                        v-model="addOrEditForm.password"
                    />
                </el-form-item>
                <el-form-item label="LOGO设置：" prop="logo">
                    <el-input type="textarea" v-model="addOrEditForm.logo" />
                </el-form-item>
                <h3>默认管理员</h3>
                <el-form-item label="姓名：" prop="nickName">
                    <el-input v-model="addOrEditForm.nickName" />
                </el-form-item>
                <el-form-item label="手机号码：" prop="phonenumber">
                    <el-input v-model="addOrEditForm.phonenumber" />
                </el-form-item>
                <el-form-item label="角色：">
                    <el-input type="textarea" />
                </el-form-item>
                <el-form-item class="handle">
                    <el-button
                        @click="
                            () => {
                                $emit('update:formDialogVisible', false)
                            }
                        "
                    >
                        取消
                    </el-button>
                    <el-button type="primary" @click="onSubmitForm">
                        保存
                    </el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { addCompanyAPI } from '@/api/company-manage/index.js'
export default {
    props: {
        formDialogVisible: {
            type: Boolean,
            default: () => false,
        },
    },
    data() {
        return {
            // 新增或修改接口
            addOrEditForm: {
                deptName: '',
                deptAbbreviation: '',
                remark: '',
                password: '',
                logo: '',
                nickName: '',
                phonenumber: '',
                userName: '',
                orderNum: 200,
            },
        }
    },

    computed: {
        dialogVisible: {
            get() {
                return this.formDialogVisible
            },
        },
    },
    methods: {
        handleClose() {
            this.$emit('update:formDialogVisible', false)
        },
        async onSubmitForm() {
            const res = await addCompanyAPI(this.addOrEditForm)
            if (res.code === 200) {
                this.$modal.msgSuccess('新增成功')
            }
            this.$emit('update:formDialogVisible', false)
        },
    },
    watch: {
        formDialogVisible: {
            handler(newValue) {
                if (!newValue) {
                    this.$refs.addOrEditFormRef.resetFields()
                }
            },
            deep: true,
        },
    },
}
</script>

<style lang="scss" scoped>
::v-deep .handle .el-form-item__content {
    text-align: right;
}
</style>
