<template>
    <div>
        <el-dialog :title="exData.id ? '编辑': '新增'" :visible.sync="dialog" width="450px" :close-on-click-modal="false" top="50px">
            <el-form ref="form" :model="form" :rules="formRules" label-width="100px" class="bind-phone">
                <el-form-item label="项目名称：" >
                    {{exData.rule_project_name}}
                </el-form-item>
                <el-form-item label="权限类型：" >
                    <el-select v-model="form.rule_type" placeholder="">
                      <el-option label="菜单类型" :value="0"></el-option>
                      <el-option label="权限类型" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="权限标识：" prop="rule_code" :rules="formRules.required">
                    <el-input v-model="form.rule_code" placeholder="请输入权限标识"> </el-input>
                </el-form-item>
                <el-form-item label="权限名称：" prop="rule_title" :rules="formRules.required">
                    <el-input v-model="form.rule_title" placeholder="请输入权限名称"> </el-input>
                </el-form-item>
                <el-form-item label="权限路径：" prop="rule_url" :rules="formRules.required">
                    <el-input v-model="form.rule_url" placeholder="请输入权限路径，没有填入#"> </el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer text-center">
                <el-button @click="dialog = false">取 消</el-button>
                <el-button type="danger" @click="handleSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
        value: {
            type: Boolean,
            default: true
        },
        exData: {
            type: Object,
            default: function (){
              return {}
            }
        }
    },
    components: {
        // upload,
    },
    data() {
        return {
            dialog: !!this.value,
            form: {
                // id: undefined,
                rule_project_id: '',
                rule_type: 0,
                rule_code: '',
                rule_title: '',
                rule_url: '#',
                rule_pid: 0
            }
        }
    },
    methods: {
        async handleSubmit() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    let url = this.exData.id ? '/rule/edit' : '/rule/add'
                    const data = await this.$fetch(url, {...this.form})
                    if (data.code === 200) {
                        this.$message.success('提交成功')
                        this.$emit('success')
                        this.dialog = false
                    }
                }
            })
        }
    },
    mounted () {
        if (this.exData.id) {
            this.form.id = this.exData.id
            for (const key in this.form) {
                this.form[key] = this.exData[key]
            }
        } else {
            this.form.rule_project_id = this.exData.rule_project_id
            this.form.rule_pid = this.exData.rule_pid
        }
    },
    watch: {
        dialog(val) {
            if (!val) this.$emit('input', val)
        }
    }
}
</script>

<style lang="scss" scoped>
.top-tip {
    margin-top: -20px;
    margin-bottom: 20px;
}
</style>
