<template>
  <div class="wrapper editwrap">
    <el-dialog
      :visible.sync="reVisible"
      title="添加人选信息"
      :show-close="false"
      :close-on-click-modal="false"
      append-to-body
    >
        <div>
            <el-table :data="NumberArr" ref="NumberArr" style="width: 100%;margin-left: 10px;"
                                  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" v-model="multipleSelection"></el-table-column>
                <el-table-column label="部门名称" prop="deptName" sortable></el-table-column>
                <el-table-column label="姓名" prop="userName" sortable></el-table-column>
                <el-table-column label="电话" prop="phone" sortable></el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer" style="float: right;margin-top: 13px;">
                <el-button size="small" @click="speedupCheckbox">确认添加</el-button>
                <el-button @click="$emit('redialogFun')" size="small">取消</el-button>
            </span>
        </div>
    </el-dialog>
  </div>
</template>

<style lang="scss">
@import '@/utils/default.scss';
</style>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
@Component({
  components: {}
})
export default class AddPersonInfo extends Vue {

    @Prop(Boolean) reVisible!: Boolean;

    @Prop(Array) rdeptInfoList!: Array;

    @Provide() multipleSelection: any =[];

    handleSelectionChange(val) {
        this.multipleSelection = val;
    }
    @Provide() NumberArr: any = [];

    //全速
    speedupData(){
        var arr=this.multipleSelection;
        this.$emit('addNewPersonToArr',arr);
        this.$refs.NumberArr.clearSelection();            //操作完成清除勾选框
        this.$emit('redialogFun');
    }
    //全速选择框
    speedupCheckbox() {
        if (this.multipleSelection.length === 0) {
            this.$message({
                message: '请至少勾选一项，再进行操作',
                type: 'warning'
            });
        } else {
            this.speedupData();
        }
    }

    getNumberData() {
        let that = this;
        (that as any).$axios
            .get(`/user/getDutyContactsList`)
            .then((res: any) => {
                that.NumberArr = res;
                that.unique(res)
                this.$emit('getNumberData',res);
            });
    }
    unique(arr) {
        let that = this;
        for(var i=0;i<that.NumberArr.length;i++){
            for(var j=0;j< that.rdeptInfoList.length;j++){
                if( that.rdeptInfoList[j].userName == that.NumberArr[i].userName){
                    this.NumberArr.splice(i,1);
                }
            }
        }
    }
    created() {
        let that = this;
        that.getNumberData();
    }


}
</script>