<template>
    <div>
        <el-dialog :title="title" :visible="editVisable" v-if="editVisable" @close="cancel" width="600px" center
            :distroy-on-close="true">
            <el-form :model="editForm" :rules="rules" ref="editForm" label-width="130px" class="demo-editForm">
                <el-form-item label="机构名称" prop="identifyName">
                    <el-input v-model="editForm.identifyName"></el-input>
                </el-form-item>
                <el-form-item label="机构邮箱" prop="identifyEmail">
                    <el-input v-model="editForm.identifyEmail"></el-input>
                </el-form-item>
                <el-form-item label="机构信用代码" prop="creditCode">
                    <el-input v-model="editForm.creditCode"></el-input>
                </el-form-item>
                <el-form-item label="法人姓名" prop="legalPerName">
                    <el-input v-model="editForm.legalPerName"></el-input>
                </el-form-item>
                <el-form-item label="法人手机号" prop="legalPerPhone">
                    <el-input v-model="editForm.legalPerPhone"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel" class="endbutton"><span>取 消</span></el-button>
                <el-button type="primary" @click="submitForm" class="endbutton"><span>确认</span></el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {
    sealUpdate
} from "@/api/officialSeal/officialSeal.js";
export default {
    props: ["editVisable","editData","queryParams"],
    data() {
        return {
            title: "修改机构",
            editForm: {},
            rules: {
                identifyName: [
                    { required: true, message: '请输入机构名称', trigger: 'blur' },
                ],
                creditCode: [
                    { required: true, message: '请输入机构信用代码', trigger: 'blur' },
                ],
                legalPerName: [
                    { required: true, message: '请输入法人姓名', trigger: 'blur' },
                ],
                legalPerPhone: [
                    { required: true, message: '请输入法人手机号', trigger: 'blur' },
                    { pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/, message: '请输入正确的手机号码', trigger: 'blur', },
                ],
                // operUserName: [
                //     { required: true, message: '请输入经办人用户名', trigger: 'blur' },
                // ],
                identifyEmail: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
                ]
            }
        };
    },
    watch: {
        editVisable(val) {
            if (val) {
               this.editForm = this.editData;
            }
        }
    },
    created() {

    },
    methods: {
        // 编辑
        sealUpdateFn(data) {
            sealUpdate(data).then(res => {
                this.$modal.msgSuccess("修改成功！");
                this.$emit("cancelEdit");
                this.$emit('getList',this.queryParams);
            })
        },
        // 提交form表单
        submitForm() {
            this.$refs['editForm'].validate((valid) => {
                if (valid) {
                    this.sealUpdateFn({
                        identifyName:this.editForm.identifyName,
                        operName:this.editForm.operName,
                        operPhone:this.editForm.operPhone,
                        id:this.editForm.id,
                    })
                }
            });

        },
        cancel() {
            this.$emit("cancelEdit");
        },
    },
};
</script>
  
<style lang="scss" scoped>
.steps {
    display: flex;
    flex-wrap: wrap;
}

.radiobox {
    margin-top: 30px;
}
</style>