<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
                ><el-button @click="patchMoveUser" :disabled="disabled"
                  >批量转移成员</el-button
                ></span
              >
              <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 == 'name'">
                    {{ scope.row[item.prop] }}
                    {{ scope.row.departLeader ? "(部门管理员)" : "" }}
                  </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 v-else>{{ 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>

    <!-- 批量转移部门成员弹窗 -->
    <MoveUserDialog
      :showdialogMove.sync="showdialogMove"
      :getTreeDepartlist="getTreeDepartlist"
      @refurlist="refurlist"
      ref="MovepopChildren"
    ></MoveUserDialog>
  </div>
</template>
<script>
import selectTree from "@/components/SelectTree";
import {
  UserDeptListApi,
  SearchDepartmentsListEmplyeeApi,
} from "@/api/staffApi.js";
import MoveUserDialog from "./MoveUserDialog.vue"; //转移成员弹窗
export default {
  props: ["showdialogUser", "getTreeDepartlist"],
  watch: {
    showdialogUser() {
      this.dialogFormVisible = this.showdialogUser;
    },
    multipleSelection() {
      //复选框选中启用按钮
      if (this.multipleSelection.length) {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    },
  },
  components: {
    selectTree, //注册组件
    MoveUserDialog,
  },
  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);
          }
        }
      });
    },
    getTreeData(arr) {
      //递归遍历部门
      arr.forEach((item) => {
        item.label = item.name;
        item.value = item.id;
        if (item.children && item.children.length < 1) {
          item.children = undefined;
        } else if (item.children && item.children.length > 0) {
          this.getTreeData(item.children);
        }
      });
    },
    submitForm() {
      console.log(this.formList.departIds);
      let departIds = [];
      this.multipleArr.forEach((item) => {
        departIds.push(item.id);
      });

      let obj2 = { domainId: this.$route.query.domainId };
      if (this.OperType == 0) {
        //新增
      }
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$confirm(
            `即将批量设置${$SuperviseStr.depart}成员的通讯录权限,提交后无法恢复，是否继续?`,
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
            .then(() => {
              batchImDepartmentsApi(this.formList, departIds, obj2).then(
                (response) => {
                  if (response.status == 200) {
                    let newobj = JSON.parse(JSON.stringify(this.formList));
                    this.$emit("refurlist", newobj); //确定后发送$emit绑定父数据
                    this.cancelForm();
                  }
                }
              );
            })
            .catch(() => {
              // this.radio = ""; //清空选中
            });
        } else {
          return false;
        }
      });
    },
    cancelForm() {
      //取消关闭
      this.$emit("update:showdialogUser", false);
      this.$nextTick(function () {
        this.$refs.ruleForm.resetFields(); //重置输入框提示
      });
    },
    refurlist() {
      //弹窗后刷新列表
      this.tableDatalist(); //表格列表
      this.$emit("refurlist", {});
    },
    patchMoveUser() {
      //批量转移成员弹窗
      this.showdialogMove = true;
      this.$refs.MovepopChildren.getTableRow(this.multipleSelection, 0);
    },
  },
};
</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>
