<template>
    <el-dialog title="角色信息" :visible.sync="dialogRoleVisible" width="500px" class="dialog-info">
        <div class="info-wrp">
            <el-form ref="roleData" :model="roleData" label-width="80px" class="from">
                <!--<el-form-item label="角色名称">-->
                    <!--<el-input v-model="roleData.name" placeholder="请输入英文" />-->
                <!--</el-form-item>-->
                <el-form-item label="角色名称">
                    <el-input v-model="roleData.content" placeholder="请输入中文" />
                </el-form-item>
                <el-form-item label="角色描述">
                    <el-input v-model="roleData.description"/>
                </el-form-item>
                <el-form-item label="权限分配">
                    <!-- default-expanded-keys 默认展开 -->
                    <!-- default-checked-keys 默认勾选 -->
                    <!--:default-checked-keys="checkedKeys"-->
                    <el-tree
                        ref="treePower"
                        :data="data"
                        show-checkbox
                        accordion
                        node-key="id"
                        :default-expanded-keys="[]"
                        :props="{
                            children: 'children',
                            label: 'content'
                        }"
                        style="height: 40vh;overflow-y: scroll">
                    </el-tree>
                </el-form-item>
            </el-form>
            <div class="btn-group">
                <el-row>
                    <el-button size=small @click="dialogRoleVisible = false">取消</el-button>
                    <el-button size=small type="primary" v-show="action=='edit'" @click="save">保存</el-button>
                    <el-button size=small type="primary" v-show="action=='add'" @click="submit">确定</el-button>
                </el-row>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import api from '@/api/power'
export default {
    name: "role-info",
    props: {
        action: {
            type: String,
            default: 'add'
        },
        data: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            dialogRoleVisible: false,
            roleData: {},
            // checkedKeys: ['1000001118041816','1000001512880124'],
        }
    },
    methods: {
        open(data) {
            this.dialogRoleVisible = true
            if(data) {
                this.roleData = data
                let checkedKeys = []
                this.roleData.permissionList.forEach((item,i) => {
                    checkedKeys.push(item.permissionId)
                })
                setTimeout(() => {
                    this.$refs.treePower.setCheckedKeys(checkedKeys)
                    // console.log('edit:', this.roleData, checkedKeys)
                }, 0)
            } else {
                this.roleData = {
                    name: '',
                    content: '',
                    description: '',
                    permissionIds: '',
                    childrenPermissionIds: ''
                }
                setTimeout(() => {
                    this.$refs.treePower.setCheckedKeys([])
                    // console.log('add:', this.roleData)
                }, 0)

            }
        },
        save() {
            delete this.roleData.permissionList
            delete this.roleData.customerId
            this.roleData.permissionIds = this.$refs.treePower.getCheckedKeys().join(',')
            // console.log(this.roleData)
            api.updateRole(this.roleData).then((res) => {
                console.log(res)
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
                this.dialogRoleVisible = false
                // this.$emit('updateList')
            }).catch(error => {
                console.log(error)
            })
        },
        submit() {
            let nodes =  this.$refs.treePower.getCheckedNodes()
            nodes.forEach((item, i) => {
                if(item.grade=='1') {
                    this.roleData.permissionIds += item.id+','
                } else {
                    this.roleData.childrenPermissionIds += item.id+','
                }
            })
            this.roleData.permissionIds = this.roleData.permissionIds.substring(0, this.roleData.permissionIds.length - 1)
            this.roleData.childrenPermissionIds = this.roleData.childrenPermissionIds.substring(0, this.roleData.childrenPermissionIds.length - 1)
            console.log(this.roleData)

            api.addRole(this.roleData).then((res) => {
                console.log(res)
                this.$message({
                    type: 'success',
                    message: '添加成功!'
                });
                this.dialogRoleVisible = false
                this.$emit('updateList')
            }).catch(error => {
                console.log(error)
            })
        }
    },
    created() {

    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .dialog-info {
        top: -3vh;
    }
    .info-wrp {
        margin-top: -20px;
        .info-item {
            margin: 22px 20px;
            span:first-child {
                display: inline-block;
                width: 80px;
                text-align: right;
            }
            span:last-child {
                padding-left: 10px;
            }
        }
        .title {
            font-size: 16px;
            margin: 20px 0 10px;
            padding-top: 20px;
            border-top: 1px solid #ccc;
        }
        .btn-group {
            text-align: center;
            margin-top: 20px;
        }
    }
</style>