<template>
    <div class="userImg" :class="count!==1?'h100b w100b':''" align="center">
        <slot name="topSlot"></slot>
        <!--    如果是单选-->
        <div class="user_imgs_single w100b h100b" v-if="count===1">
            <div class="user_img_item" v-if="showUserImg" @click="handleIcon">
                <div class="user_img" v-if="isImage">
                    <img :src="imgScr" :alt="value"/>
                </div>
                <div class="user_img" :style="userImgBgColor()" v-else>
                    <Icon type="ios-person" color="#E1E1E1" :size="getIconSize()"/>
                </div>
            </div>

            <div v-else :style="iconStyle()" class="go_sel_img_div" @click="handleIcon">
                <Icon type="ios-person-add" color="#E1E1E1" :size="getIconSize()"/>
            </div>
            <div class="user_name" style="margin-top: 10px;">{{ value || label }}</div>
        </div>
        <!--    如果是多选-->
        <div class="user_img_more w100b" v-else>
            <!--      如果是选择了数据-->
            <div class="imgs_div clearfix">
                <div class="user_img_item" :key="index" v-for="(item,index) of userItems">
                    <div class="user_img" :style="userImgBgColor()">
                        <div v-if="item.userImage">
                            <img :src="getImageSrc(item.userImage)" :alt="value"/>
                        </div>
                        <div v-else>
                            <Icon type="ios-person-add" color="#F5F7F8" size="45"/>
                        </div>
                    </div>
                    <div class="user_name">{{item.userName}}</div>
                </div>

                <div class="user_img_item" v-show="!disabled">
                    <div class="user_img" @click="handleIcon" style="background-color: #F0F0F0">
                        <Icon type="ios-person-add" style="position: relative;top:5px;" color="#666" size="35"/>
                    </div>
                    <div class="user_name">{{label}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import goDialog from "../../jsCom/go-dialog";
    import {AssertUtils,GoingUtils,QueryCommand} from "goingutils";

    export default {
        name: "go-sel-user-img",
        data: function () {
            return {
                userItems: [],
                isImage: false,
                imgScr: window.SysConfigUtils.go_eplat_adress+`/static/img/common/404.jpg`,
                showUserImg: false
            };
        },
        props: {
            suffix: {
                type: Boolean,
                default: true
            },
            //校验选中的数据
            validateSelRecord: {},
            count: {
                type: Number,
                default: 1
            },
            disabled: {
                type: Boolean,
                default: false
            },
            value: {},
            ids: {
                type: String,
                default: ""
            },
            //只能单选
            moreSel: {
                type: Boolean,
                default: false
            },
            label: {
                type: String,
                default: "请选择用户"
            },
            size: {
                type: Number,
                default: 100
            },
            tabs: {},
            item:{},
        },
        computed: {},
        mounted() {
            //如果进来id不为空 则根据id进行查询
            if (AssertUtils.isNotEmpty(this.ids)) {
                this.showUserImg = true;
                this.showUserImgs();
            }
        },
        watch: {
            ids(newVal) {
                if (AssertUtils.isNotEmpty(newVal)) {
                    this.showUserImg = true;
                    this.initImgSrc();
                } else {
                    this.isImage = false;
                    this.showUserImg = false;
                }
            }
        },
        methods: {
            //显示用户图片信息
            showUserImgs() {
                //如果是单选
                if (this.count === '1' || this.count === 1) {
                    this.initImgSrc();
                } else {
                    //如果是多选
                    this.initMoreImgSrcs();
                }
            },
            //显示多人图片信息
            initMoreImgSrcs() {
                this.userItems = [];
                let idsAry = this.ids.split(GoingUtils.relChart);
                let valAry = this.value.split(GoingUtils.relChart);
                for (let num = 0; num < valAry.length; num++) {
                    this.userItems.push({id: idsAry[num], name: valAry[num].split("_")[0], userImage: ""});
                }
                this.initImgSrc();
            },
            //根据用户id 获取用户信息
            getUserByUserId(userIds,backFun,errorFun) {
                var queryCommand = new QueryCommand({
                    url:  `${window.SysConfigUtils.go_eplat_adress}/api/pe-portal/users/getUserHeaderImgs`,
                    showTip: false
                });
                //执行查询操作
                let successFun = userJson => {
                    if (userJson != null&&userJson[0]["avatar"]!=="") {
                        let avatar='data:image/png;base64,'+userJson[0]["avatar"];
                        backFun&&backFun(avatar);
                    }else{
                        backFun(null);
                    }
                };
                //设置不显示错误flag
                queryCommand.setHasErrorFlag(false);
                //执行同步查询
                queryCommand.executeQuery({ params:{ids:userIds},successFun ,errorFun});
            },
            getImageSrc(userImage) {
                return `${window.SysConfigUtils.go_eplat_adress}${window.projectName.file}/attachment/showImg/`+userImage;
            },
            //获取图片背景颜色
            userImgBgColor() {
                let bgColors = ['#CA0C16', '#38C054', '#1F85EC', '#f0ad4e'];
                return {backgroundColor: bgColors[Math.floor(Math.random() * bgColors.length)]};
            },
            //初始化图片路径
            initImgSrc() {
                //根据用户id 获取用户信息
                this.getUserByUserId(this.ids, (avatar) => {
                    //如果不为空
                    if (avatar != null ) {
                        if(this.count===1){
                            //获取用户图片的bid 再根据bid获取用户图片信息
                            this.isImage = true;
                            this.imgScr = avatar;
                        }else{
                            this.userItems=avatar;
                        }
                    }
                },()=>{
                    this.isImage=false;
                });
                return "";
            },
            getIconSize() {
                return this.size - 20;
            },
            iconStyle() {
                return {height: this.size + "px", width: this.size + "px"};
            },
            executeConfirm(aclCtl) {
                //获取返回的ids
                let {selIds, selNames, accountId, backFlag} = aclCtl.getBackInfos(this.count, false);
                //如果返回false 则表示出现了提示信息
                if (backFlag === false) {
                    return backFlag;
                }
                //对选择的数据进行校验
                if (AssertUtils.isNotNull(this.validateSelRecord) && AssertUtils.isFunction(this.validateSelRecord)) {
                    let flat = this.validateSelRecord({selIds: selIds.join(""), selNames});
                    if (!flat) {
                        return flat;
                    }
                }
                //需要返回数组的情况 才进行操作
                if (AssertUtils.isNotNull(selNames) && AssertUtils.isArray(selNames)) {
                    //提交数据
                    this.$emit("input", selNames.join(GoingUtils.relChart));
                    //执行回调方法
                    this.$emit("selRecords", {
                        selIds: selIds.join(GoingUtils.relChart),
                        selNames: selNames.join(GoingUtils.relChart),
                        accountId: accountId,
                    });
                }
            },
            //点击弹出选人
            handleIcon() {
                if(this.disabled){
                    return void(0);
                }
                let tabsSets=this.tabs;
                if(tabsSets==null){
                    tabsSets = this.item["config"]["tabs"];
                }
                if(tabsSets==null){
                    GoingUtils.showErrorMessage("请设置授权对象集合");
                    return void(0);
                }
                //tab配置信息
                let tabConfig = {
                    count: this.count,
                    title: this.label,
                    tabs: tabsSets,
                };

                //设置控件的初始化值
                if (AssertUtils.isNotEmpty(this.value)) {
                    tabConfig["initFun"] =  ()=>{
                        return {
                            ids: this.ids,
                            names: this.value,
                            dataForms:this._getDataForms()
                        };
                    };
                }

                //需要设置相应的配置信息才行
                if (tabsSets != null) {
                    //确定按钮
                    tabConfig["confirmBtn"] = (aclCtl) => {
                        let flag = this.executeConfirm(aclCtl);
                        //如果返回了false 则表示有提示信息出现
                        if (flag !== false) {
                            //关闭窗口
                            this.$WinUtils.closeParentCurWin();
                            //销毁授权对象的内存信息
                            goDialog.destructionAcl();
                        }
                    };
                    //设置授权窗口信息
                    goDialog.attachAclWin(tabConfig, this);
                }
            },
            //根据id集合获取数据来源
            _getDataForms(){
                let dataForms=[];
                this.ids.split(GoingUtils.relChart).forEach(()=>{
                    dataForms.push("用户");
                });
                return dataForms;
            }
        }
    };
</script>

