<template>
<div>
  <el-dialog
    v-dialogDrag
    :title="title"
    :visible="dialogFormVisible"
    @close="cancelForm"
    :close-on-click-modal="false"
    class="el-dialog-double el-dialog-user"
  >
    <el-form
      label-width="130px"
      :model="formList"
      :rules="rules"
      ref="ruleForm"
    >
      <el-row>
        <el-col :span="24">
          <section class="UserSearchBoX">
            <span class="searchArea"><el-input v-model="params.keyword" placeholder="输入姓名/账号/手机号/证件号码" clearable class="inputSearchUser" style='width:45%'/><el-button type="primary" @click="search">查询</el-button></span>
          </section>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
           <!-- 选中表格内容展示区域 -->
          <section class="TableSelectBox">
            <span><i class="el-icon-warning-outline el-icon-flag"></i><span v-for="(item,index) in multipleSelection" :key="index">{{item.name}}<b v-if="index!=multipleSelection.length-1">,</b></span></span>
          </section>
        </el-col>
      </el-row>


      <el-row>
        <el-col :span="24">
           <el-table :data="tableData" ref="districtTable"  max-height="750" default-expand-all  row-key="id"  @selection-change="handleSelectionChange" @select-all="handleSelectionAllChange">
                <el-table-column  type="selection"   width="55">
                </el-table-column>
                <el-table-column v-for="(item,index) in tableColumn" :key="index" :prop="item.prop" :label="item.label" :width="item.width" v-if="item.show">
                <template slot-scope="scope">
                    <!-- <span v-if="item.prop=='credentialType'">
                        {{scope.row[item.prop]=='IdCard'?'居民身份证/户口簿':''}}
                        {{scope.row[item.prop]=='IdCardOfXiangGang'?'香港特区护照/身份证明':''}}
                        {{scope.row[item.prop]=='IdCardOfAoMen'?'澳门特区护照/身份证明':''}}
                        {{scope.row[item.prop]=='IdCardOfTaiwan'?'台湾居民来往大陆通行证':''}}
                        {{scope.row[item.prop]=='Passport'?'外国护照':''}}
                        {{scope.row[item.prop]=='Arms'?'退伍军人证':''}}
                        {{scope.row[item.prop]=='PoliceNo'?'警号':''}}
                    </span>

                    <span v-else-if="item.prop=='UserCheckedStatus'">
                        {{scope.row[item.prop]=='None'?'未提交':''}}
                        {{scope.row[item.prop]=='Matched'?'已核验':''}}
                        {{scope.row[item.prop]=='NotMatched'?'其他':''}}            
                    </span>
                    <span v-else-if="item.prop=='occupationType'">
                        {{scope.row[item.prop]=='Normal'?'一般职员':''}}
                        {{scope.row[item.prop]=='SecurityGuard'?'保安员':''}}
                        {{scope.row[item.prop]=='Police'?'警官':''}}            
                    </span>

                    <span v-else-if="item.prop=='authenticatedStatus'">
                        {{scope.row[item.prop]=='UnAuthenticated'?'未认证':''}}
                        {{scope.row[item.prop]=='Authenticating'?'认证中':''}}
                        {{scope.row[item.prop]=='Failed'?'认证失败':''}}  
                        {{scope.row[item.prop]=='Passed'?'已认证':''}}             
                    </span>                   -->
                    
                    <span>{{scope.row[item.prop]}}</span>
                </template>
            </el-table-column>
           </el-table>
           <!-- 分页页签 -->
             <pages
                :total='params.total'
                :currentPage.sync='params.pageIndex'
                :pageSize='params.pageSize'
                @handleCurrentChangeSub="handleCurrentChange"
                @handleSizeChangeSub="handleSizeChange"
            ></pages>
        </el-col>
      </el-row>

     
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm()">确 定</el-button>
      <el-button @click="cancelForm()">取 消</el-button>
    </div>
     
  </el-dialog>

   <!-- 批量转移部门成员弹窗 -->
</div>  
</template>
<script>
import selectTree from "@/components/SelectTree";
import { UserDeptListApi,SearchDepartmentsListEmplyeeApi} from "@/api/staffApi.js"
export default {
  props: ["showdialogUser", ],
  watch: {
    showdialogUser() {
      this.dialogFormVisible = this.showdialogUser;
    },
    multipleSelection(){//复选框选中启用按钮
        if(this.multipleSelection.length){
            this.disabled=false
        }else{
            this.disabled=true
        }
    }
  },
  components: {
    selectTree, //注册组件

  },
  data() {
    return {     
      title: "",
      dialogFormVisible: this.showdialogUser,
      OperType: 0, //0 新增  1修改
      formList: {},
      rules: {
        // permissionType:[{required: true, message: "请选择通讯录权限", trigger: "blur"}],
      }, 
      tableColumn:[
          {prop:"name",label:"姓名",width:"180",show:true},
          {prop:"telephone",label:"手机号",width:"180",show:true},
          // {prop:"departName",label:"所在部门",width:"180",show:true},
          {prop:"credentialType",label:"证件类型",width:"180",show:true},
          {prop:"credentialNumber",label:"证件号码",width:"180",show:true},
          {prop:"checkedStatus",label:"证件核验状态",width:"180",show:true},
          {prop:"occupationType",label:"职业类型",width:"180",show:true}, 
          // {prop:"authenticatedStatus",label:"实名认证状态",width:"180",show:true},
          // {prop:"hiredDateText",label:"入职日期",width:"180",show:true},
      ],
      tableData:[],
      params:{//搜索条件
        pageIndex:1,
        pageSize:10,
        keyword:'',             
        departIds:[],             
        total:0
      },
      multipleSelection:[],//复选框选中的数据
      disabled:true,
      showdialogMove:false,
    };
  },
  methods: {     
    getTableRow(data, type) {   
      console.log(data) 
      this.title=`${data.name} 成员列表` 
      this.params.departIds=[data.id]
      this.params.keyword=""

      this.tableDatalist()//根据部门数组id分页查询用户列表

    },
    tableDatalist(){//根据部门数组id分页查询用户列表
      let obj2={domainId:this.$route.query.domainId}
      UserDeptListApi(this.params,obj2).then(response=>{
            if(response.data.data){
              this.tableData=response.data.data
              this.params.total=response.data.total
            }
      })
    },
    search(){//查询
      console.log(this.params)
      this.params.pageIndex = 1;//重置第一页
      let obj2={domainId:this.$route.query.domainId}
      SearchDepartmentsListEmplyeeApi(this.params,obj2).then(response=>{
            if(response.data.data){
                this.tableData=response.data.data
                this.params.total=response.data.total
     
            }
      })
    }, 
    handleCurrentChange(val){//分页切换页码
        this.params.pageIndex=val
        this.tableDatalist()
    },
    handleSizeChange(val){//切换每页条数
        this.params.pageSize=val
        this.tableDatalist()
    },
    handleSelectionChange(val) {//选中全选
          console.log(val)
          this.multipleSelection = val;
    },      
    handleSelectionAllChange(selection,first){//全选
        if (!first) {
            this.isAllSelect = !this.isAllSelect;
        }
        selection.map(el => {
            if (el.children) {
                el.children.map(j => {
                    this.toggleSelection(j, this.isAllSelect);
                });
                if (el.children.length > 0) {
                    this.handleSelectionAllChange(el.children, true);
                }
            }
        });
    }, 
 
    submitForm() {
      this.$emit('filterChooseData',this.multipleSelection)
      this.$emit("update:showdialogUser", false);
 
    },
    cancelForm() {
      //取消关闭
      this.$emit("update:showdialogUser", false);
      this.$nextTick(function () {
        this.$refs.ruleForm.resetFields(); //重置输入框提示
      });
    },


  },
};
</script>
<style lang="scss">
.el-dialog-user{
    .UserSearchBoX{
      display: flex;
      justify-content: space-between;
      .searchArea{flex:1;display:flex; justify-content: flex-end;}
      .inputSearchUser{width: 30%;margin-right:10px;}
    }
    .TableSelectBox{
        display: flex;
        background: #e6f3fc;
        color: #666666;
        border: 1px solid #d4f0fc;
        border-radius:4px;
        margin-top:10px;
        margin-bottom:10px;
        padding: 5px 0;
        span{
            line-height: 20px;
            i{margin-left:5px;margin-right:5px;color:#2e8ad7}
        }
    }
}
</style>