<template>
    <span>
        <div class="pl-org-select" @click="openChooseOrgPosUser" v-if="isButton">
            <div class="pl-org-select-title" :style="width"
                 :class="[userName === '' ? 'pl-org-select-title':'pl-org-select-title-color1']">{{userName || '请选择'}}
            </div>
            <el-button slot="append"
                       size="small"
                       type="info"
                       plain
                       @click="openChooseOrgPosUser"
                       :icon="buttonIcon?buttonIcon:'el-icon-search'"
                       class="open-search">{{buttonName}}
            </el-button>
        </div>

        <div v-if="!isButton" @click="openChooseOrgPosUser">
            <div class="select-title" :class="[userName === ''? 'select-title':'pl-org-select-title-color1']">{{userName || '请选择'}}</div>
        </div>


        <el-dialog
                   :close-on-click-modal=false
                   title="选择执行人"
                   :visible.sync="userSelectDialogVisible"
                   width="90%"
                   height="90%"
                   top="5vh"
                   append-to-body>
            <!-- 临时通过v-if触发重新渲染，这里需要优化组织岗位人员选择组件-->
            <sys-org-pos-user-select ref="orgPosUserSelectRef"
                                     :ogn-enable="contactType?contactType=='org' ||contactType=='all' :true"
                                     :pos-enable="contactType? contactType=='pos'||contactType=='all':true"
                                     :user-enable="contactType?contactType=='user'||contactType=='all' :true"
                                     :checkbox="checkType === 'checkbox'"
                                     :default-choose-ids="userDataIds"
                                     v-if="userSelectDialogVisible"></sys-org-pos-user-select>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button type="primary" @click="chooseOrgPosUser">确 定</el-button>
                <el-button @click="userSelectDialogVisible = false">取 消</el-button>
            </div>
            <!-- :ogn-enable="contactType=='org' ||contactType=='all'"
                                     :pos-enable="contactType=='pos'||contactType=='all'"-->
        </el-dialog>
    </span>
</template>

<script>

    export default {
        name:   "pl-org-select",
        props: {
            value: {},
            /*
            **
            */
            prop: {
                type: String,
                required: true
            },
            /*
            ** 单选或多选
            ** radio - 单选
            ** checkbox - 多选
            */
            checkType: {
                type: String,
                default: 'radio'
            },
            contactType: {
                type: String,
                default: ''
            },
            backfillField: {
                type: String,
                default: ''
            },
            showName: {
                type: String,
                default: ''
            },
            buttonName:{
                type:String,default:""
            },
            buttonIcon:{
                type:String,default:""
            },
            ignoreUper:{
                default:false,//忽略字段的大小写
            },
            /*
            ** 是否显示选择按钮，默认显示
            */
            isButton:{
                type: Boolean,
                default: true,
            },
            contactValue:{
                type:String,default:""
            },
            outOtherUserItem:{ type:String,default:""},//外部参数
        },
        data() {
            return {
                userSelectDialogVisible: false,
                formData: this.value,
                userDataIds: '',
                userName: '',
                width:'width:calc(100% - 75px);',
            }
        },
        watch: {
            showName(){
                if(this.ignoreUper){
                    this.userName = this.formData[this.prop] || '';
                    if(this.formData[this.backfillField]){
                        this.userDataIds = this.formData[this.backfillField] || '';
                    }
                }else{
                    this.userName = this.formData[this.prop.toUpperCase()] || '';
                    if(this.formData[this.backfillField]){
                        this.userDataIds = this.formData[this.backfillField.toUpperCase()] || '';
                    }

                }

            },
            buttonName(){
                if(this.buttonName){
                    let length = this.buttonName.length * 14 + 75;
                    this.width = 'width:calc(100% - ' + length +'px);';
                }
            },
            contactValue(){
                this.userName = this.formData[this.prop] || '';
                if(this.formData[this.backfillField]){
                    this.userDataIds = this.formData[this.backfillField] || '';
                }
            }
        },
        created() {
            //赋值显示内容
            if(this.ignoreUper){
                this.userName = this.formData[this.prop] || '';
            }else{
                this.userName = this.formData[this.prop.toUpperCase()] || '';
            }

            if(this.buttonName){
                let length = this.buttonName.length * 14 + 75;
                this.width = 'width:calc(100% - ' + length +'px);';
            }
        },
        methods: {
            /*
            ** 打开人员选择窗口
            */
            openChooseOrgPosUser() {
                if(!this.formData.OTHER_ITEM && this.outOtherUserItem){
                    let outOtherUser = {};
                    this.spcpFormAxios.post(this.api.sysOrgPosUser.findNoPage,{userId:this.outOtherUserItem}).then(res =>{
                        if(res.data){
                            outOtherUser[this.prop+"_user"] = res.data[0].id;
                            this.$set(this.formData,'OTHER_ITEM',JSON.stringify(outOtherUser));
                            const otherItemStr = this.formData.OTHER_ITEM;
                            if (otherItemStr) {
                                const otherItem = JSON.parse(otherItemStr);
                                this.userDataIds = otherItem[this.prop.toLowerCase() + '_user'];
                            }
                            this.userSelectDialogVisible = true;
                        }
                    });

                }else {
                    const otherItemStr = this.formData.OTHER_ITEM;
                    if (otherItemStr) {
                        const otherItem = JSON.parse(otherItemStr);
                        this.userDataIds = otherItem[this.prop.toLowerCase() + '_user'];
                    }
                    this.userSelectDialogVisible = true;
                }

            },
            /*
            ** 选择人员
            */
            chooseOrgPosUser() {
                //let users = this.$refs["orgPosUserSelectRef"].getCheckedInfo("user");
                let users=[];
                let contactType= this.contactType;
                if(contactType=='all'){
                    let orgArr=this.$refs["orgPosUserSelectRef"].getCheckedInfo('org');
                    let posArr=this.$refs["orgPosUserSelectRef"].getCheckedInfo('pos');
                    let userArr=this.$refs["orgPosUserSelectRef"].getCheckedInfo('user');
                    users=users.concat(orgArr).concat(posArr).concat(userArr);
                }else{
                    users = this.$refs["orgPosUserSelectRef"].getCheckedInfo(contactType);
                }

                // if (users.length === 0) {
                //     this.$alert('请至少选择一位人员', '提醒', {
                //         confirmButtonText: '确定'
                //     });
                //     return;
                // }
                let arrUserIds = [];
                let arrUserDataIds = [];
                let arrUserNames = [];
                let arrOrgIds = [];
                for (let user of users) {
                    arrUserDataIds.push(user.id);
                    arrUserIds.push(user.userId);
                    if(contactType=='org'){
                        arrUserNames.push(user.orgName);
                    }else if(contactType=='pos'){
                        arrUserNames.push(user.posName);
                    }else{
                        arrUserNames.push(user.userName || user.posName || user.orgName);
                    }
                    arrOrgIds.push(user.dataId || '');
                }

                //回填显示值
                if(this.ignoreUper){
                    this.userName = arrUserNames.join(",");
                    this.$set(this.value,this.prop,arrUserNames.join(","));
                    this.$set(this.formData,this.prop,arrUserNames.join(","));
                }else{
                    this.userName = arrUserNames.join(",");
                    this.$set(this.value,this.prop.toUpperCase(),arrUserNames.join(","));
                    this.$set(this.formData,this.prop.toUpperCase(),arrUserNames.join(","));
                }
                //回填OTHER_ITEM
                const userDataIds = arrUserDataIds.join(',');
                const otherItem = JSON.parse(this.formData.OTHER_ITEM || "{}");
                otherItem[this.prop.toLowerCase() + '_org'] = userDataIds;
                otherItem[this.prop.toLowerCase() + '_user'] = userDataIds;
                this.formData.OTHER_ITEM = JSON.stringify(otherItem);

                //回填隐藏值
                if (this.backfillField) {
                    if (this.contactType === '岗位' || this.contactType === '组织') {
                        if(this.ignoreUper){
                            this.$set(this.value, this.backfillField, userDataIds);
                            this.$set(this.formData, this.backfillField, userDataIds);
                        }else{
                            this.$set(this.value, this.backfillField.toUpperCase(), userDataIds);
                            this.$set(this.formData, this.backfillField.toUpperCase(), userDataIds);
                        }

                    } else {
                        if(this.ignoreUper){
                            this.$set(this.value, this.backfillField, arrUserIds.join(","));
                            this.$set(this.formData, this.backfillField, arrUserIds.join(","));
                        }else{
                            this.$set(this.value, this.backfillField.toUpperCase(), arrUserIds.join(","));
                            this.$set(this.formData, this.backfillField.toUpperCase(), arrUserIds.join(","));
                        }

                    }
                }
                this.userSelectDialogVisible = false;

                this.$emit("change");
            }
        }
    }
</script>

<style scoped>
    .pl-org-select {
        width: 100%;
    }

    .pl-org-select-title {
        display: inline-block;
        /*height: 30px;*/
        /*line-height: 28px;*/
        border-radius: 5px 0 0 5px;
        border: 1px solid #DCDFE6;
        border-right: 0;
        /*margin-right: 5px;*/
        padding: 0 15px;
        cursor: pointer;
        color: #C0C4CC;
        width: calc(100% - 75px);
        white-space: nowrap;
        overflow-x: auto;
    }

    .select-title{
        height: 40px;
        line-height: 40px;
        padding: 0 15px;
        cursor: pointer;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        color: #C0C4CC;
        background-color: #ffffff;
    }

    .pl-org-select-title-color1 {
        color: #606266;
    }

    .pl-org-select-title::-webkit-scrollbar{
        width: 0;
        height: 0;
    }

    .open-search{
        border-radius: 0 5px 5px 0;
        height: 36px;
        position: absolute;
    }
</style>
