<template>
    <awsui-layout id="roleManage">
        <awsui-dialog
                v-loading="loading"
                element-loading-text="加载中"
                :border=false
                :title=title
                :visible.sync="dialogVisible"
                width="500px"
                height="300px"
                :close-on-click-modal=false
                :before-close="handleClose">
            <!--awsui-dialog标签中的内容都可以自行去控制-->
            <div class="text-general-color">
                <div style="border-top:1px solid #F2F2F2;"></div>
                <div style="width: 100%;height: 258px;overflow-y: auto;">
                    <ul>
                        <li v-for="item in roleData" class="general-bgcolor-hover" :style="{'background-color': item.roleId == checkdRole || item.checked ? '#F5F7FA' : ''}">
                            <div style="width: 100%;height: 50px;line-height: 50px;vertical-align: middle;">
                                <div style="width: 15%;display: inline-block;text-align: center;">
                                    <i class="iconfont" v-html="item.icon"></i>
                                </div>
                                <div style="width: 70%;display: inline-block;line-height: 25px;vertical-align: middle;">
                                    <p class="text-overflow-hidden" style="position:relative;top: 2px;font-size: 14px;">{{item.roleName}}</p>
                                    <el-tooltip class="item" effect="dark" :content="item.roleDesc" placement="bottom-start">
                                        <p class="text-overflow-hidden text-second-color" style="position:relative;top: -2px;font-size: 12px;">{{item.roleDesc}}</p>
                                    </el-tooltip>

                                </div>
                                <div style="width: 15%;display: inline-block;text-align: center;">
                                    <i v-if="type=='roleManage' && item.roleType!=0" class="awsui-iconfont general-bgcolor-text-hover operate-icon-display" style="cursor: pointer;font-size: 14px;" @click="updateRole(item.roleId)">&#xe622;</i>
                                    <i v-if="type=='roleManage' && item.roleType!=0 && item.roleType!=1 && item.roleType!=2" class="awsui-iconfont general-bgcolor-text-hover operate-icon-display" style="padding-left: 10px;cursor: pointer;font-size: 14px;" @click="removeRole(item.roleId)">&#xe626;</i>
                                    <awsui-radio v-if="type=='roleConfig' && isOlderVersion" v-else size="small" :label="item.roleId" :showText="false" v-model="checkdRole"></awsui-radio>
                                    <el-checkbox v-if="type=='roleConfig' && !isOlderVersion" v-model="item.checked" :checked="item.checked" @change="$forceUpdate()"></el-checkbox>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div style="border-top: 1px solid #F2F2F2;">
                    <div class="text-linker-color" style="cursor: pointer; width: 100%;height: 30px;line-height: 30px;vertical-align: middle;padding-top:8px;" @click="updateRole('')">
                        <div style="width: 15%;display: inline-block;text-align: center;">
                            <i class="awsui-iconfont">&#xe615;</i>
                        </div>
                        <div style="width: 85%;display: inline-block;">
                            <span v-if="type == 'roleConfig'">无满足角色，去添加</span>
                            <span v-else>添加角色</span>
                        </div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <awsui-button class="button-general-color" type="primary" @click="submit">确定</awsui-button>
                <awsui-button @click="cancel">取消</awsui-button>
            </span>
        </awsui-dialog>
        <role-update
                ref="roleUpdate"
                :visible.sync="roleUpdate.visible"
                :teamId="teamId"
                :roleId="roleUpdate.roleId"
                v-on:cancel="roleUpdate.visible = false"
                v-on:getResult="updateRoleDone"/>
    </awsui-layout>
</template>

<script>
    import awsuiAxios from "../../awsuiAxios";
    import RoleUpdate from "./RoleUpdate";

    export default {
        name: "RoleManage",
        components: {RoleUpdate},
        props: {
            visible: {
                type: Boolean,
                default: false
            },
            teamId: {// 小组ID
                type: String,
                default: ''
            },
            title: {// 标题
                type: String,
                default: ''
            },
            userIds: {// 配置用户角色的用户Ids
                type: Array,
                default: function () {
                    return []
                }
            },
            type: {// 用户操作类型，角色管理roleManage 角色设置roleConfig
                type: String,
                default: 'roleManage'
            }
        },
        data() {
            return {
                dialogVisible: false,
                loading: false,
                roleData: [],
                checkdRole: '',
                roleUpdate: {
                    visible: false,
                    roleId: '',
                },
                isOlderVersion:true,
            };
        },
        created() {
        },
        mounted() {
        },
        methods: {
            initData() {// 初始化查询
                const that = this;
                that.loading = true;
                const params = {
                    url:'jd',
                    data:{
                        cmd: 'com.actionsoft.apps.coe.pal.cooperation_role_data_query',
                        teamId: that.teamId,
                        userIds: JSON.stringify(that.userIds)
                    }
                };
                // 查询数据
                awsuiAxios.post(params).then(function (ro) {
                    if (ro.result == 'ok') {
                        const data = ro.data;
                        that.roleData = data.roleData;
                        that.isOlderVersion= data.isOlderVersion;
                        if (that.isOlderVersion){
                          if (data.roleIds && data.roleIds.length > 0) {// 多个人进行角色修改时，默认选中第一个人角色
                            that.checkdRole = data.roleIds[0];
                          }
                        }else{
                          data.roleData.forEach((item)=>{
                            if (data.roleIds.includes(item.roleId)){
                              item.checked = true;
                            }
                          })
                        }

                    } else {
                        that.$message.error(ro.msg);
                    }
                    that.loading = false;
                }).catch(error=>{
                    console.log(error);
                    that.loading = false;
                })
            },
            clearAllData() {// 清空数据
                const that = this;
                that.roleData = [];
                that.checkdRole = '';
                that.roleUpdate.visible = false;
                that.roleUpdate.roleId = '';
            },
            handleClose(done) {
                this.closeDlalog('cancel');
                done();
            },
            cancel() {
                this.closeDlalog('cancel');
            },
            submit() {
                this.closeDlalog('save');
            },
            closeDlalog(type) {// 取消/确定之后的关闭
                const that = this;
                if (type == 'save') {
                    if (this.type == 'roleManage') {// 角色管理
                        that.$emit('getResult', 'ok');
                    } else {// 角色设置
                        const data = {
                            teamId: that.teamId,
                            userIds: that.userIds,
                            roleId: that.checkdRole
                        }

                        let arr = [];
                        that.roleData.forEach(item=>{
                          if (item.checked){
                            arr.push(item.roleId);
                          }
                        })
                        data.roleId = arr;
                        console.log("data:",data)
                        // 保存
                        that.loading = true;
                        const params = {
                            url:'jd',
                            data:{
                                cmd: 'com.actionsoft.apps.coe.pal.cooperation_role_user_update_save',
                                data: JSON.stringify(data)
                            }
                        };
                        awsuiAxios.post(params).then(function (ro) {
                            that.loading = false;
                            if (ro.result == 'ok') {
                                that.$message({
                                    message: '保存成功',
                                    type: 'success'
                                });
                                that.$emit('getResult', 'ok');
                                that.dialogVisible = false;
                                // 清空所有数据
                                that.clearAllData();
                            } else {
                                that.$message({
                                    message: ro.msg,
                                    type: 'warning'
                                });
                            }

                        }).catch(error=>{
                            console.log(error);
                            that.loading = false;
                        })
                    }
                } else {
                    that.$emit('cancel');
                    that.dialogVisible = false;
                    // 清空所有数据
                    that.clearAllData();
                }
            },
            updateRole(roleId) {// 修改角色
                this.roleUpdate.roleId = roleId;
                this.roleUpdate.visible = true;
            },
            updateRoleDone(result) {// 角色修改完成
                this.roleUpdate.visible = false;
                if (result == 'ok') {
                    this.initData();
                }
            },
            removeRole(roleId) {
                const that = this;
                that.$confirm('确定要删除吗？', '提示', {
                    confirmButtonText: '确定',
                    confirmButtonClass: 'button-general-color',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const params = {
                        url:'jd',
                        data:{
                            cmd: 'com.actionsoft.apps.coe.pal.cooperation_role_remove',
                            teamId: that.teamId,
                            roleId: roleId
                        }
                    };
                    // 查询数据
                    awsuiAxios.post(params).then(function (ro) {
                        if (ro.result == 'ok') {
                            that.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            that.initData();
                        } else {
                            that.$message.error(ro.msg);
                        }
                    }).catch(error=>{
                        console.log(error);
                    })
                }).catch(() => {
                });
            }
        },
        watch: {
            visible(val) {
                this.dialogVisible = val;
                if (val) {// 打开
                    this.initData();
                } else {// 关闭
                }
            }
        }
    }
</script>

<style scoped>
    #roleManage >>> .awsui-dialog__body {
        margin: 0 16px;
    }
    #roleManage >>> .role_data_perm_textarea textarea {
        cursor: pointer;
    }
    .text-overflow-hidden {
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .general-bgcolor-hover:hover .operate-icon-display {
        display: inline;
    }
    .general-bgcolor-hover .operate-icon-display {
        display: none;
    }
</style>