<template>
  <div>
  <el-select
    clearable
    v-model="userIdVal"
    filterable
    remote
    reserve-keyword
    placeholder="请输入姓名"
    :remote-method="remoteMethod"
    :loading="personLoading"
    style="width: 100%"

    @change="userIdChange">
    <el-option
      v-for="item in personNameOptions"
      :key="item.user_id"
      :label="item.nick_name"
      :value="item.user_id">
    </el-option>
  </el-select>
  </div>
</template>

<script>
    import { getSelectUserRouteList  } from "@/api/sfa/routeList";
    export default {
        name: "User",
        components: {  },
        props:['userId','orgIds',"approvalNickName"],
        // props: {
        //     userId: {
        //         type: Number,
        //         default:null
        //     },
        //     orgIds: {
        //         type: Array,
        //         default() {
        //             return []
        //         }
        //     }
        // },
        watch:{
            userId:{
                immediate:true,
                handler(val){
                    this.userIdVal = val;
                  this.getSelectUserRouteListData();

                }
            },
          approvalNickName:{
            immediate:true,
            handler(val){
              this.nameTitle=val
              this.remoteMethod(this.nameTitle)
            }
          },
            orgIds:{
                immediate:true,
                handler(val){
                    this.personNameOptions =[];
                    this.userIdVal = null;
                    this.$emit('userIdFn', this.userIdVal);
                    this.orgIds = val;
                    this.getSelectUserRouteListData();
                }
            },
        },
        computed: {

        },
        data() {
            return {
                // 菜单树选项
                personNameOptions:[],
                personLoading:false,
                personList:[],
                userIdVal:this.userId,
                nameTitle:this.name,
            }
        },
        created() {
            this.getSelectUserRouteListData();
        },
      methods: {
            // 获取人员列表
            getSelectUserRouteListData(){
                let obj = '';
                if(Array.isArray(this.orgIds)){
                    obj = {orgIds:this.orgIds.join(",")}
                }else{
                    obj = {orgIds:this.orgIds}
                }
                getSelectUserRouteList(obj).then(response => {
                    this.personList = response.data;
                  this.remoteMethod(this.nameTitle)
                });
            },
            // 检索人员列表
            remoteMethod(query) {
                if (query !== ''&&query !== undefined) {
                    this.personLoading = true;
                    setTimeout(() => {
                        this.personLoading = false;
                        this.personNameOptions = this.personList.filter(item => {
                            let queryCon = query.replace(/\s*/g,"");
                            let nick_name = item.nick_name.replace(/\s*/g,"");
                            return nick_name.indexOf(queryCon) > -1;
                        });
                    }, 200);
                }
                if(query == ''){
                  this.personNameOptions=[]
                }
            },
            userIdChange(){
                this.$emit('userIdFn', this.userIdVal);
            },
        }
    }
</script>

<style scoped>

</style>
