<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" label-width="100px" class="bind-phone">
                <el-form-item v-if="!exData.id" label="项目选择：" >
                    <el-select v-model="form.role_project_id">
                        <el-option v-for="(item, index) in projectArr" :key="index" :label="item.project_name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="form.role_project_id" label="部门选择：" >
                    <el-select v-model="form.role_department_id">
                        <el-option v-for="(item, index) in departmentArr" :key="index" :label="item.department_name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色名称：" >
                    <el-input v-model="form.role_name" placeholder="请输入角色名称"> </el-input>
                </el-form-item>
                <el-form-item label="角色描述：" >
                    <el-input v-model="form.role_desc" 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>
import {mapGetters} from 'vuex'
export default {
    props: {
        value: {
            type: Boolean,
            default: true
        },
        exData: {
            type: Object,
            default: function (){
              return {}
            }
        }
    },
    computed: {
        ...mapGetters([
            'projectArr'
        ])
    },
    data() {
        return {
            dialog: !!this.value,
            departmentArr: [],
            form: {
                role_project_id: undefined,
                role_department_id: undefined,
                role_name: '',
                role_desc: ''
            }
        }
    },
    methods: {
        async handleSubmit() {
            let url = this.exData.id ? '/role/set_role_info' : '/role/add'
            const data = await this.$fetch(url, {...this.form})
            if (data.code === 200) {
                this.$message.success('提交成功')
                this.$emit('success')
                this.dialog = false
            }
        },
        async getDepartmentArr(project_id) {
            const data = await this.$fetch('/department/get_department_list', {project_id}, 'get')
            if (data.code == 200) {
                this.departmentArr = data.data
            }
        }
    },
    mounted () {
        if (this.projectArr.length == 0) {
            this.$store.dispatch('common/setProjectArr')
        }
        if (this.exData.id) {
            this.form.id = this.exData.id
            this.form.role_name = this.exData.role_name
            this.form.role_desc = this.exData.role_desc
        }
    },
    watch: {
        dialog(val) {
            if (!val) this.$emit('input', val)
        },
        'form.role_project_id'(newValue, oldValue) {
            this.getDepartmentArr(newValue)
        }
    }
}
</script>

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