<template>
  <div class="fullHeight whiteBlock">
    <template v-if="setDialog == false">
      <div class="searchBox whiteBlock">
        <el-form size="medium" :model="pageInfo" ref="queryForm" :inline="true">
          <el-form-item label="考勤组名称" prop="groupName">
            <el-input v-model="pageInfo.groupName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="handleQuery">查询</el-button>
            <el-button type="warning" plain @click="handleRefresh">刷新</el-button>
            <el-button
              v-permission="{
                key: 'add',
                menuPath: '/project/labor/attendanceGroup',
              }"
              type="primary"
              @click="setControlListDialog(1)"
              >新增</el-button
            >
            <el-button
              :disabled="$refs.multipleTable && $refs.multipleTable.selection.length == 0"
              :type="
                $refs.multipleTable && $refs.multipleTable.selection.length == 0
                  ? 'info'
                  : 'danger'
              "
              plain
              class="delete_btn"
              @click="deleteAttendanceBatch"
              v-permission="{
                key: 'deleteBatch',
                menuPath: '/project/labor/attendanceGroup',
              }"
              >删除</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="table_wrap whiteBlock">
        <el-table height="calc(100% - 64px)" max-height="calc(100% - 64px)" ref="multipleTable" class="tables" :data="rulesList">
          <el-table-column type="selection" align="center" width="55"></el-table-column>
          <el-table-column align="center" prop="groupName" label="考勤组名称">
            <template slot-scope="scope">
              <span>{{ scope.row.groupName }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="workerNum" label="绑定人员数量">
            <template v-slot="{ row }">
              {{ row.workerNum }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <div class="flex2 edit">
                <el-button
                  v-permission="{
                    key: 'examine',
                    menuPath: '/project/labor/attendanceGroup',
                  }"
                  @click="setControlListDialog(3, scope.row)"
                  type="text"
                  icon="el-icon-view"
                  >查看</el-button
                >
                <el-button
                  v-permission="{
                    key: 'edit',
                    menuPath: '/project/labor/attendanceGroup',
                  }"
                  @click="setControlListDialog(2, scope.row)"
                  style="border: 0 !important"
                  type="text"
                  icon="el-icon-edit"
                  >编辑</el-button
                >
                <el-button
                  v-permission="{
                    key: 'delete',
                    menuPath: '/project/labor/attendanceGroup',
                  }"
                  style="border: 0 !important; color: #f56c6c"
                  type="text"
                  icon="el-icon-delete"
                  @click="deleteBtn(scope.row)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pagerBox"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.pageNo"
          :page-sizes="$store.state.PAGESIZRS"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="Number(pageInfo.total)"
          background
        ></el-pagination>
      </div>
    </template>
    <div class="container-detail" v-else>
      <div class="sidebar_btn">考勤人员列表</div>
      <el-form
        class="main-header"
        size="medium"
        :model="attendanceInfo"
        ref="attendanceInfo"
        :rules="cardFormRules"
        :disabled="batchSettingType == 3"
        :inline="true"
      >
        <el-form-item label="考勤组名称" prop="groupName">
          <el-input v-model="attendanceInfo.groupName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            placeholder="请输入"
            v-model="attendanceInfo.remark"
            maxlength="500"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="sidebar_btn">用户配置</div>
      <div class="main-content" v-if="batchSettingType == 1">
        <div class="content-left">
          <div>
            <div>企业名称</div>
            <el-input
              @input="getRiskListLibraryList"
              size="medium"
              placeholder="请输入"
              suffix-icon="el-icon-search"
              v-model="searchInfo.enterpriseName"
            ></el-input>
            <div class="treeBox">
              <vue-scroll v-if="treeList.length > 0">
                <el-tree
                  :data="treeList"
                  @node-click="handleNodeClick"
                  :props="defaultProps"
                  default-expand-all
                  node-key="id"
                  ref="riskPointTree"
                >
                  <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span
                      style="
                        width: 160px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        display: inline-block;
                      "
                      :title="node.label"
                      >{{ node.label }}</span
                    >
                  </span>
                </el-tree>
              </vue-scroll>
              <div class="placeholderBox" v-else>
                <img src="@/assets/images/noData2.png" alt="" srcset="" />
                <p>{{ $t("message.videoManage.empty") }}</p>
              </div>
            </div>
          </div>
          <div>
            <div>
              <div>
                待选择人员({{ selectLeftTableData.length }}/{{ staffInfo.total }})
              </div>
              <div>
                <template v-if="treeListDetail.id == ''">
                  <el-checkbox disabled :value="true">包含下级</el-checkbox>
                </template>
                <template v-else>
                  <el-checkbox
                    @change="getUpdatePersonListFn"
                    v-model="searchInfo.checked"
                    >包含下级</el-checkbox
                  >
                </template>
              </div>
            </div>
            <div class="flex">
              <el-select
                @change="searchTypeChange"
                size="medium"
                v-model="searchInfo.searchType"
                placeholder="请选择"
              >
                <el-option label="姓名" :value="1"> </el-option>
                <el-option label="身份证号" :value="2"> </el-option>
              </el-select>
              <el-input
                @input="getUpdatePersonListFn"
                size="medium"
                placeholder="请输入"
                suffix-icon="el-icon-search"
                v-model="searchInfo.searchValue"
              ></el-input>
            </div>
            <el-table
              :height="370"
              ref="staffMultipleTable"
              class="tables"
              :data="tableDataUp"
              @select="handleLeftSelectChange"
              @select-all="handleLeftSelectAll"
            >
              <el-table-column
                type="selection"
                align="center"
                width="55"
              ></el-table-column>
              <el-table-column
                align="center"
                show-overflow-tooltip
                prop="workerName"
                label="姓名"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.workerName ? scope.row.workerName : "--" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                show-overflow-tooltip
                prop="idCard"
                label="身份证号"
              >
                <template v-slot="{ row }">
                  {{ row.idCard ? row.idCard : "--" }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                show-overflow-tooltip
                prop="enterpriseName"
                label="企业名称"
              >
                <template v-slot="{ row }">
                  {{ row.enterpriseName ? row.enterpriseName : "--" }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                show-overflow-tooltip
                prop="departmentTeamName"
                label="所属班组/部门"
              >
                <template v-slot="{ row }">
                  {{
                    row.teamName
                      ? row.teamName
                      : row.departmentName
                      ? row.departmentName
                      : "--"
                  }}
                </template>
              </el-table-column>
              <template v-if="tableData.length > 0" #append>
                <div
                  style="text-align: center; padding: 12px 10px 0"
                  v-if="staffInfo.pageNo * staffInfo.pageSize >= staffInfo.total"
                >
                  没有更多了
                </div>
                <div
                  v-else
                  @click="staffLoad(1)"
                  style="text-align: center; padding: 12px 10px 0; cursor: pointer"
                >
                  加载更多
                </div>
              </template>
            </el-table>
          </div>
        </div>
        <div class="content-middle">
          <div @click="moveRightChange">
            <i class="el-icon-arrow-right"></i>
            <div>移入右侧选择框</div>
          </div>
          <div @click="moveLeftChange">
            <i class="el-icon-arrow-left"></i>
            <div>移入左侧选择框</div>
          </div>
        </div>
        <div class="content-right">
          <div>已选人员({{ selectRightTableData.length }}/{{ selectInfo.total }})</div>
          <div class="flex">
            <el-select
              @change="selectSearchTypeChange"
              size="medium"
              v-model="selectInfo.searchType"
              placeholder="请选择"
            >
              <el-option label="姓名" :value="1"> </el-option>
              <el-option label="身份证号" :value="2"> </el-option>
            </el-select>
            <el-input
              @input="selectSearchValueFilter"
              size="medium"
              placeholder="请输入"
              suffix-icon="el-icon-search"
              v-model="selectInfo.searchValue"
            ></el-input>
          </div>
          <el-table
            :height="370"
            ref="selectedStaffMultipleTable"
            class="tables"
            :data="selectListUp"
            @select="handleRightSelectChange"
            @select-all="handleRightSelectAll"
          >
            <el-table-column type="selection" align="center" width="55"></el-table-column>
            <el-table-column
              align="center"
              show-overflow-tooltip
              prop="workerName"
              label="姓名"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.workerName ? scope.row.workerName : "--" }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              show-overflow-tooltip
              prop="idCard"
              label="身份证号"
            >
              <template v-slot="{ row }">
                {{ row.idCard ? row.idCard : "--" }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              show-overflow-tooltip
              prop="enterpriseName"
              label="企业名称"
            >
              <template v-slot="{ row }">
                {{ row.enterpriseName ? row.enterpriseName : "--" }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              show-overflow-tooltip
              prop="departmentTeamName"
              label="所属班组/部门"
            >
              <template v-slot="{ row }">
                {{
                  row.teamName
                    ? row.teamName
                    : row.departmentName
                    ? row.departmentName
                    : "--"
                }}
              </template>
            </el-table-column>
            <template v-if="selectList.length > 0" #append>
              <div
                style="text-align: center; padding: 12px 10px 0"
                v-if="selectInfo.pageNo * selectInfo.pageSize >= selectInfo.total"
              >
                没有更多了
              </div>
              <div
                v-else
                @click="staffLoad(2)"
                style="text-align: center; padding: 12px 10px 0; cursor: pointer"
              >
                加载更多
              </div>
            </template>
          </el-table>
        </div>
      </div>
      <div class="main-table" v-if="batchSettingType == 2 || batchSettingType == 3">
        <el-form size="medium" :model="selectWorkerInfo" ref="queryForm" :inline="true">
          <el-form-item label="人员类型" prop="personType">
            <el-select
              clearable
              v-model="selectWorkerInfo.personType"
              placeholder="请选择"
            >
              <el-option
                v-for="item in personTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属企业" prop="enterpriseId">
            <el-select
              filterable
              clearable
              @change="onEnterpriseChange"
              v-model="selectWorkerInfo.enterpriseId"
              placeholder="请选择"
            >
              <el-option
                v-for="item in enterpriseList"
                :key="item.id"
                :label="item.enterpriseName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属班组" prop="teamId">
            <el-select
              filterable
              clearable
              v-model="selectWorkerInfo.teamId"
              placeholder="请选择"
            >
              <el-option
                v-for="item in teamOptions"
                :key="item.id"
                :label="item.teamName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属部门" prop="departmentId">
            <el-select
              filterable
              clearable
              v-model="selectWorkerInfo.departmentId"
              placeholder="请选择"
            >
              <el-option
                v-for="item in departmentOptions"
                :key="item.id"
                :label="item.departmentName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名" prop="workerName">
            <el-input
              v-model="selectWorkerInfo.workerName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="handleQuerySelectWorker"
              >查询</el-button
            >
            <el-button type="warning" plain @click="handleRefreshSelectWorker"
              >刷新</el-button
            >
            <template v-if="batchSettingType == 2">
              <el-button
                :disabled="
                  $refs.selectworkerTable && $refs.selectworkerTable.selection.length == 0
                "
                :type="
                  $refs.selectworkerTable && $refs.selectworkerTable.selection.length == 0
                    ? 'info'
                    : 'danger'
                "
                plain
                class="delete_btn"
                @click="deleteAttendanceBatchPersonnel"
                >删除</el-button
              >
              <el-button type="primary" @click="setAddPersonnelDialog"
                >添加人员</el-button
              >
            </template>
          </el-form-item>
        </el-form>
        <el-table
          ref="selectworkerTable"
          height="calc(100% - 64px - 58px)" 
          max-height="calc(100% - 64px - 58px)"
          class="tables selectworkerTable"
          :data="selectWorkerList"
        >
          <el-table-column type="selection" align="center" width="55"></el-table-column>
          <el-table-column prop="workerName" label="姓名">
            <template slot-scope="scope">
              <span>{{ scope.row.workerName ? scope.row.workerName : "--" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="personType" label="人员类型">
            <template v-slot="{ row }">
              {{
                row.personType == 1 ? "施工人员" : row.personType == 2 ? "管理人员" : "--"
              }}
            </template>
          </el-table-column>
          <el-table-column prop="enterpriseName" label="企业名称">
            <template v-slot="{ row }">
              {{ row.enterpriseName ? row.enterpriseName : "--" }}
            </template>
          </el-table-column>
          <el-table-column prop="teamName" label="所属班组">
            <template v-slot="{ row }">
              {{ row.teamName ? row.teamName : "--" }}
            </template>
          </el-table-column>
          <el-table-column prop="departmentName" label="所属部门">
            <template v-slot="{ row }">
              {{ row.departmentName ? row.departmentName : "--" }}
            </template>
          </el-table-column>
          <el-table-column prop="idCard" label="身份证号">
            <template v-slot="{ row }">
              {{ row.idCard ? row.idCard : "--" }}
            </template>
          </el-table-column>
          <el-table-column prop="phoneNumber" label="手机号">
            <template v-slot="{ row }">
              {{ row.phoneNumber ? row.phoneNumber : "--" }}
            </template>
          </el-table-column>
          <el-table-column v-if="batchSettingType == 2" label="操作" align="center">
            <template slot-scope="scope">
              <div class="flex2 edit">
                <el-button
                  style="border: 0 !important; color: #f56c6c"
                  type="text"
                  icon="el-icon-delete"
                  @click="deleteAttendanceBatchPersonnel(scope.row)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pagerBox1"
          @size-change="handleSizeChangeWorker"
          @current-change="handleCurrentChangeWorker"
          :current-page="selectWorkerInfo.pageNo"
          :page-sizes="$store.state.PAGESIZRS"
          :page-size="selectWorkerInfo.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="Number(selectWorkerInfo.total)"
          background
        ></el-pagination>
      </div>
      <div class="main-footer" v-if="batchSettingType != 3">
        <el-button
          class="cancleBtn"
          @click="setDialog = false"
          icon="el-icon-circle-close"
          size="medium"
          >取消
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-circle-check"
          @click="submit('attendanceInfo')"
          size="medium"
          >确定
        </el-button>
      </div>
      <div class="main-footer" v-else>
        <el-button
          class="cancleBtn"
          @click="setDialog = false"
          icon="el-icon-circle-close"
          size="medium"
          >返回
        </el-button>
      </div>
      <el-dialog
        :modal-append-to-body="false"
        :title="title"
        :visible.sync="addPersonnelDialog"
        width="1708px"
        class="source-danger"
      >
        <div class="main-content">
          <div class="content-left">
            <div>
              <div>企业名称</div>
              <el-input
                @input="getRiskListLibraryList"
                size="medium"
                placeholder="请输入"
                suffix-icon="el-icon-search"
                v-model="searchInfo.enterpriseName"
              ></el-input>
              <div class="treeBox">
                <vue-scroll v-if="treeList.length > 0">
                  <el-tree
                    :data="treeList"
                    @node-click="handleNodeClick"
                    :props="defaultProps"
                    default-expand-all
                    node-key="id"
                    ref="riskPointTree"
                  >
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                      <span
                        style="
                          width: 160px;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          white-space: nowrap;
                          display: inline-block;
                        "
                        :title="node.label"
                        >{{ node.label }}</span
                      >
                    </span>
                  </el-tree>
                </vue-scroll>
                <div class="placeholderBox" v-else>
                  <img src="@/assets/images/noData2.png" alt="" srcset="" />
                  <p>{{ $t("message.videoManage.empty") }}</p>
                </div>
              </div>
            </div>
            <div>
              <div>
                <div>
                  待选择人员({{ selectLeftTableData.length }}/{{ staffInfo.total }})
                </div>
                <div>
                  <template v-if="treeListDetail.id == ''">
                    <el-checkbox disabled :value="true">包含下级</el-checkbox>
                  </template>
                  <template v-else>
                    <el-checkbox
                      @change="getUpdatePersonListFn"
                      v-model="searchInfo.checked"
                      >包含下级</el-checkbox
                    >
                  </template>
                </div>
              </div>
              <div class="flex">
                <el-select
                  @change="searchTypeChange"
                  size="medium"
                  v-model="searchInfo.searchType"
                  placeholder="请选择"
                >
                  <el-option label="姓名" :value="1"> </el-option>
                  <el-option label="身份证号" :value="2"> </el-option>
                </el-select>
                <el-input
                  @input="getUpdatePersonListFn"
                  size="medium"
                  placeholder="请输入"
                  suffix-icon="el-icon-search"
                  v-model="searchInfo.searchValue"
                ></el-input>
              </div>
              <el-table
                :height="370"
                ref="staffMultipleTable"
                class="tables"
                :data="tableDataUp"
                @select="handleLeftSelectChange"
                @select-all="handleLeftSelectAll"
              >
                <el-table-column
                  type="selection"
                  align="center"
                  width="55"
                ></el-table-column>
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  prop="workerName"
                  label="姓名"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.workerName ? scope.row.workerName : "--" }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  prop="idCard"
                  label="身份证号"
                >
                  <template v-slot="{ row }">
                    {{ row.idCard ? row.idCard : "--" }}
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  prop="enterpriseName"
                  label="企业名称"
                >
                  <template v-slot="{ row }">
                    {{ row.enterpriseName ? row.enterpriseName : "--" }}
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  prop="departmentTeamName"
                  label="所属班组/部门"
                >
                  <template v-slot="{ row }">
                    {{
                      row.teamName
                        ? row.teamName
                        : row.departmentName
                        ? row.departmentName
                        : "--"
                    }}
                  </template>
                </el-table-column>
                <template v-if="tableData.length > 0" #append>
                  <div
                    style="text-align: center; padding: 12px 10px 0"
                    v-if="staffInfo.pageNo * staffInfo.pageSize >= staffInfo.total"
                  >
                    没有更多了
                  </div>
                  <div
                    v-else
                    @click="staffLoad(1)"
                    style="text-align: center; padding: 12px 10px 0; cursor: pointer"
                  >
                    加载更多
                  </div>
                </template>
              </el-table>
            </div>
          </div>
          <div class="content-middle">
            <div @click="moveRightChange">
              <i class="el-icon-arrow-right"></i>
              <div>移入右侧选择框</div>
            </div>
            <div @click="moveLeftChange">
              <i class="el-icon-arrow-left"></i>
              <div>移入左侧选择框</div>
            </div>
          </div>
          <div class="content-right">
            <div>已选人员({{ selectRightTableData.length }}/{{ selectInfo.total }})</div>
            <div class="flex">
              <el-select
                @change="selectSearchTypeChange"
                size="medium"
                v-model="selectInfo.searchType"
                placeholder="请选择"
              >
                <el-option label="姓名" :value="1"> </el-option>
                <el-option label="身份证号" :value="2"> </el-option>
              </el-select>
              <el-input
                @input="selectSearchValueFilter"
                size="medium"
                placeholder="请输入"
                suffix-icon="el-icon-search"
                v-model="selectInfo.searchValue"
              ></el-input>
            </div>
            <el-table
              :height="370"
              ref="selectedStaffMultipleTable"
              class="tables"
              :data="selectListUp"
              @select="handleRightSelectChange"
              @select-all="handleRightSelectAll"
            >
              <el-table-column
                type="selection"
                align="center"
                width="55"
              ></el-table-column>
              <el-table-column
                align="center"
                show-overflow-tooltip
                prop="workerName"
                label="姓名"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.workerName ? scope.row.workerName : "--" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                show-overflow-tooltip
                prop="idCard"
                label="身份证号"
              >
                <template v-slot="{ row }">
                  {{ row.idCard ? row.idCard : "--" }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                show-overflow-tooltip
                prop="enterpriseName"
                label="企业名称"
              >
                <template v-slot="{ row }">
                  {{ row.enterpriseName ? row.enterpriseName : "--" }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                show-overflow-tooltip
                prop="departmentTeamName"
                label="所属班组/部门"
              >
                <template v-slot="{ row }">
                  {{
                    row.teamName
                      ? row.teamName
                      : row.departmentName
                      ? row.departmentName
                      : "--"
                  }}
                </template>
              </el-table-column>
              <template v-if="selectList.length > 0" #append>
                <div
                  style="text-align: center; padding: 12px 10px 0"
                  v-if="selectInfo.pageNo * selectInfo.pageSize >= selectInfo.total"
                >
                  没有更多了
                </div>
                <div
                  v-else
                  @click="staffLoad(2)"
                  style="text-align: center; padding: 12px 10px 0; cursor: pointer"
                >
                  加载更多
                </div>
              </template>
            </el-table>
          </div>
        </div>
        <div class="dialog-footer">
          <el-button
            class="cancleBtn"
            @click="addPersonnelDialog = false"
            icon="el-icon-circle-close"
            size="medium"
            >{{ $t("message.alarmValueSet.cancel") }}
          </el-button>
          <el-button
            type="primary"
            icon="el-icon-circle-check"
            @click="addPersonnelSubmit"
            size="medium"
            >{{ $t("message.alarmValueSet.save") }}
          </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  getWorkerAttendanceGroupV2PageApi,
  addWithWorkerListWorkerAttendanceGroupV2Api,
  editWorkerAttendanceGroupV2Api,
  deleteWorkerAttendanceGroupV2Api,
  deleteBatchWorkerAttendanceGroupV2Api,
  deleteWorkerListFromAttendanceGroupV2Api,
  addWorkerListToAttendanceGroupV2Api,
  getEnterpriseInfoList,
  getWorkerInfoList,
  selectHierarchyEnterpriseListApi,
} from "@/assets/js/api/laborPerson";
import { getRiskListLibraryTreePageApi } from "@/assets/js/api/safeManage";
import { teamList, departmentList } from "@/assets/js/api/laborManagement/payoff";
import dayjs from "dayjs";
export default {
  data() {
    return {
      pageInfo: {
        total: 0,
        pageNo: 1,
        pageSize: 10,
        groupName: "",
      },
      rulesList: [],
      personList: [],
      enterpriseList: [],
      setDialog: false,
      batchSettingType: "2",
      attendanceInfo: {
        groupName: "",
        remark: "",
      },
      searchInfo: {
        enterpriseName: "",
        searchType: 1,
        searchValue: "",
        checked: false,
      },
      treeList: [],
      treeListDetail: {},
      tableData: [],
      staffInfo: {
        pageNo: 1,
        pageSize: 20,
        total: 0,
      },
      selectLeftTableData: [],
      selectList: [],
      oldSelectList: [],
      selectRightTableData: [],
      selectInfo: {
        pageNo: 1,
        pageSize: 20,
        total: 0,
        searchType: 1,
        searchValue: "",
      },
      cardFormRules: {
        groupName: [
          {
            required: true,
            message: "请输入考勤组名称",
            trigger: "blur",
          },
        ],
      },
      defaultProps: {
        children: "children",
        label: "enterpriseName",
      },
      personTypeList: [
        {
          label: "施工人员",
          value: 1,
        },
        {
          label: "管理人员",
          value: 2,
        },
      ],
      selectWorkerList: [],
      selectWorkerInfo: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        personType: "",
        enterpriseId: "",
        teamId: "",
        departmentId: "",
        workerName: "",
      },
      teamOptions: [],
      departmentOptions: [],
      addPersonnelDialog: false,
      selectListAll: [],
      title: "",
    };
  },
  mounted() {
    this.getDataList();
    this.getEnterpriseListFn();
    // this.getTeamList();
    // this.getDepartmentList();
  },
  methods: {
    setAddPersonnelDialog() {
      this.selectList = [];
      this.selectRightTableData = [];
      this.selectInfo.total = this.selectList.length;

      this.getRiskListLibraryList();
      this.title = "新增";
      // this.$nextTick(() => {
      //   this.$refs["attendanceInfo"].clearValidate();
      // });
      this.addPersonnelDialog = true;
    },
    addPersonnelSubmit() {
      let data = {
        ...this.attendanceInfo,
        projectSn: this.$store.state.projectSn,
        workerIdList: this.selectList.map((item) => item.id),
      };
      addWorkerListToAttendanceGroupV2Api(data).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.$message.success(this.$t("message.quality.newSuccess"));
          this.addPersonnelDialog = false;
          this.getDataList();
          this.getSelectedPersonListFn();
        }
      });
    },
    staffLoad(type) {
      console.log("加载更多数据");
      if (type == 1) {
        this.staffInfo.pageNo += 1;
      } else if (type == 2) {
        this.selectInfo.pageNo += 1;
      }
    },
    setControlListDialog(type, row) {
      this.batchSettingType = type;
      this.selectRightTableData = [];
      this.selectList = [];
      this.selectInfo.total = this.selectList.length;
      if (row && row.id) {
        this.attendanceInfo = {
          ...row,
        };
      } else {
        this.attendanceInfo = {
          groupName: "",
          remark: "",
        };
      }
      if (type == 1) {
        this.getRiskListLibraryList();
      } else if (type == 2 || type == 3) {
        this.getSelectedPersonListFn();
      }
      this.setDialog = true;
      this.$nextTick(() => {
        this.$refs["attendanceInfo"].clearValidate();
      });
    },

    //弹窗---保存按钮
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            ...this.attendanceInfo,
            projectSn: this.$store.state.projectSn,
            workerIdList: this.selectList.map((item) => item.id),
          };
          if (this.batchSettingType == 1) {
            //   addRiskListMonthlyApi
            addWithWorkerListWorkerAttendanceGroupV2Api(data).then((res) => {
              // console.log(res);
              if (res.code == 200) {
                this.$message.success(this.$t("message.quality.newSuccess"));
                this.setDialog = false;
                this.getDataList();
              }
            });
          } else if (this.batchSettingType == 2) {
            //   addRiskListMonthlyApi
            editWorkerAttendanceGroupV2Api(data).then((res) => {
              // console.log(res);
              if (res.code == 200) {
                this.$message.success("编辑成功");
                this.setDialog = false;
                this.getDataList();
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    //删除 按钮
    deleteBtn(value) {
      this.$confirm(
        this.$t("message.quality.deleteHint"),
        this.$t("message.quality.hint"),
        {
          confirmButtonText: this.$t("message.quality.confirm"),
          cancelButtonText: this.$t("message.quality.cancel"),
          type: "warning",
        }
      )
        .then(() => {
          let data = {
            id: value.id,
          };
          deleteWorkerAttendanceGroupV2Api(data).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: this.$t("message.quality.successfullyDelete") + "!",
              });
              this.getDataList();
            }
          });
        })
        .catch(() => {});
    },
    // 获取企业列表
    getEnterpriseListFn() {
      let that = this;
      let reqeustData = {
        projectSn: this.$store.state.projectSn,
      };
      getEnterpriseInfoList(reqeustData).then((res) => {
        that.enterpriseList = res.result;
      });
    },
    onEnterpriseChange() {
      this.selectWorkerInfo.teamId = "";
      this.selectWorkerInfo.departmentId = "";
      this.teamOptions = [];
      this.departmentOptions = [];
      if (this.selectWorkerInfo.enterpriseId) {
        this.getTeamList();
        this.getDepartmentList();
      }
    },
    /** 查询班组列表 */
    getTeamList() {
      const params = {
        enterpriseId: this.selectWorkerInfo.enterpriseId,
        projectSn: this.$store.state.projectSn,
      };
      teamList(params).then((res) => {
        console.log("查询班组列表: ", res);
        this.teamOptions = res.result.list;
      });
    },
    /** 查询部门列表 */
    getDepartmentList() {
      const params = {
        enterpriseId: this.selectWorkerInfo.enterpriseId,
        projectSn: this.$store.state.projectSn,
      };
      departmentList(params).then((res) => {
        console.log("查询部门列表: ", res);
        this.departmentOptions = res.result.list;
      });
    },
    // 获取人员列表
    getPersonListFn(enterpriseId) {
      let that = this;
      let reqeustData = {
        projectSn: this.$store.state.projectSn,
        enterpriseId: "",
      };
      getWorkerInfoList(reqeustData).then((res) => {
        that.personList = res.result;
      });
    },
    // 删除考勤组人员
    deleteAttendanceBatchPersonnel(row) {
      if (this.$refs.selectworkerTable.selection.length === 0 && !row.id)
        return this.$message.warning("请勾选需要删除的数据！");
      this.$confirm("删除后操作不可恢复，请谨慎操作！", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const ids = this.$refs.selectworkerTable.selection.map((item) => item.id);

          deleteWorkerListFromAttendanceGroupV2Api({
            id: this.attendanceInfo.id,
            workerIdList: row.id ? [row.id] : ids,
          }).then((res) => {
            this.getDataList();
            this.getSelectedPersonListFn();
          });
        })
        .catch(() => {});
    },
    // 删除考勤组
    deleteAttendanceBatch() {
      if (this.$refs.multipleTable.selection.length === 0)
        return this.$message.warning("请勾选需要删除的数据！");
      this.$confirm("删除后操作不可恢复，请谨慎操作！", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const ids = this.$refs.multipleTable.selection.map((item) => item.id).join(",");
          //   console.log(this.$refs.multipleTable.selection);
          deleteBatchWorkerAttendanceGroupV2Api({ ids }).then((res) => {
            this.getDataList();
          });
        })
        .catch(() => {});
    },
    //查看条数
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.getDataList();
    },
    //查看页
    handleCurrentChange(val) {
      this.pageInfo.pageNo = val;
      this.getDataList();
    },
    getDataList() {
      let that = this;
      let requestData = {
        projectSn: this.$store.state.projectSn,
        pageNo: this.pageInfo.pageNo,
        pageSize: this.pageInfo.pageSize,
        groupName: this.pageInfo.groupName,
      };
      getWorkerAttendanceGroupV2PageApi(requestData).then((res) => {
        this.rulesList = res.result.records;
        that.pageInfo.total = res.result.total;
      });
    },
    handleQuery() {
      this.pageInfo.pageNo = 1;
      this.getDataList();
    },
    handleRefresh() {
      this.pageInfo.pageNo = 1;
      this.pageInfo.groupName = "";
      this.getDataList();
    },
    handleNodeClick(data) {
      console.log(data);
      this.selectedInfo = {};
      this.treeListDetail = data;
      this.selectLeftTableData = [];
      this.getUpdatePersonListFn();
    },
    selectSearchTypeChange() {
      this.selectInfo.searchValue = "";
      this.selectSearchValueFilter();
    },
    selectSearchValueFilter() {
      this.selectList = this.oldSelectList.filter((item) => {
        if (this.selectInfo.searchType == 1) {
          return item.workerName.indexOf(this.selectInfo.searchValue) !== -1;
        } else if (this.selectInfo.searchType == 2) {
          return item.idCard.indexOf(this.selectInfo.searchValue) !== -1;
        }
        return true;
      });
    },
    searchTypeChange() {
      this.searchInfo.searchValue = "";
      this.getUpdatePersonListFn();
    },
    // 向左移入
    moveLeftChange() {
      if (this.selectRightTableData.length == 0)
        return this.$message.warning("请选择要移入的数据");
      this.tableData = [...this.selectRightTableData, ...this.tableData];
      this.selectRightTableData.forEach((item) => {
        const findIndex = this.selectList.findIndex((ele) => item.id === ele.id);
        if (findIndex !== -1) {
          this.selectList.splice(findIndex, 1);
        }
      });
      this.clearTableSelection(2);
    },
    // 右边表单选择 单选
    handleRightSelectChange(selection, row) {
      console.log(selection, row);
      const findIndex = this.selectRightTableData.findIndex((item) => item.id === row.id);
      if (findIndex !== -1) {
        this.selectRightTableData.splice(findIndex, 1);
      } else {
        this.selectRightTableData.push(row);
      }
    },
    // 右边表单选择 多选
    handleRightSelectAll(selection) {
      console.log(selection);
      this.selectList.forEach((ele) => {
        const findIndex = this.selectRightTableData.findIndex(
          (item) => item.id === ele.id
        );
        if (selection.length > 0) {
          if (findIndex == -1) {
            this.selectRightTableData.push(ele);
          }
        } else {
          if (findIndex !== -1) {
            this.selectRightTableData.splice(findIndex, 1);
          }
        }
      });
    },
    // 向右移入
    moveRightChange() {
      if (this.selectLeftTableData.length == 0)
        return this.$message.warning("请选择要移入的数据");
      this.selectList = [...this.selectLeftTableData, ...this.selectList];
      this.selectLeftTableData.forEach((item) => {
        const findIndex = this.tableData.findIndex((ele) => item.id === ele.id);
        if (findIndex !== -1) {
          this.tableData.splice(findIndex, 1);
        }
      });
      this.oldSelectList = [...this.selectList];
      console.log(this.selectList, this.selectLeftTableData);
      this.clearTableSelection(1);
    },
    // 左边表单选择 单选
    handleLeftSelectChange(selection, row) {
      console.log(selection, row);
      const findIndex = this.selectLeftTableData.findIndex((item) => item.id === row.id);
      if (findIndex !== -1) {
        this.selectLeftTableData.splice(findIndex, 1);
      } else {
        this.selectLeftTableData.push(row);
      }
    },
    // 左边表单选择 多选
    handleLeftSelectAll(selection) {
      console.log(selection);
      this.tableData.forEach((ele) => {
        const findIndex = this.selectLeftTableData.findIndex(
          (item) => item.id === ele.id
        );
        if (selection.length > 0) {
          if (findIndex == -1) {
            this.selectLeftTableData.push(ele);
          }
        } else {
          if (findIndex !== -1) {
            this.selectLeftTableData.splice(findIndex, 1);
          }
        }
      });
      console.log(this.selectLeftTableData);
    },
    clearTableSelection(type) {
      this.selectInfo.total = this.selectList.length;
      this.staffInfo.total = this.tableData.length;
      if (type == 1) {
        this.selectLeftTableData = [];
        this.$refs.staffMultipleTable.clearSelection();
      } else if (type == 2) {
        this.selectRightTableData = [];
        this.$refs.selectedStaffMultipleTable.clearSelection();
      }
    },
    //查看条数
    handleSizeChangeWorker(val) {
      this.selectWorkerInfo.pageSize = val;
      this.getSelectedPersonListFn();
    },
    //查看页
    handleCurrentChangeWorker(val) {
      this.selectWorkerInfo.pageNo = val;
      this.getSelectedPersonListFn();
    },
    handleQuerySelectWorker() {
      this.selectWorkerInfo.pageNo = 1;
      this.getSelectedPersonListFn();
    },
    handleRefreshSelectWorker() {
      this.selectWorkerInfo.pageNo = 1;
      this.selectWorkerInfo.personType = "";
      this.selectWorkerInfo.enterpriseId = "";
      this.selectWorkerInfo.teamId = "";
      this.selectWorkerInfo.departmentId = "";
      this.selectWorkerInfo.workerName = "";
      this.getSelectedPersonListFn();
    },
    getSelectedPersonListFn() {
      let data = {
        projectSn: this.$store.state.projectSn,
        pageNo: this.selectWorkerInfo.pageNo,
        pageSize: this.selectWorkerInfo.pageSize,
        personType: this.selectWorkerInfo.personType,
        enterpriseId: this.selectWorkerInfo.enterpriseId,
        teamId: this.selectWorkerInfo.teamId,
        departmentId: this.selectWorkerInfo.departmentId,
        workerName: this.selectWorkerInfo.workerName,
        attendanceGroupV2Id: this.attendanceInfo.id,
      };
      getWorkerInfoList(data).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.selectWorkerList = res.result.records;
          this.selectWorkerInfo.total = res.result.total;
        }
      });
    },
    // 分页获取人员列表信息
    getUpdatePersonListFn() {
      let data = {
        projectSn: this.$store.state.projectSn,
        // enterpriseId: this.treeListDetail.id,
        // userId: this.selectedInfo.userId,
        // enterpriseId: this.treeListDetail.id,
        pageNo: 1,
        pageSize: -1,
        attendanceGroupV2IdIsNull: 1,
      };
      if (this.searchInfo.searchType == 1) {
        data.workerName = this.searchInfo.searchValue;
      } else if (this.searchInfo.searchType == 2) {
        data.idCard = this.searchInfo.searchValue;
      }
      if (this.searchInfo.checked) {
        data.containEnterpriseId = this.treeListDetail.id;
      } else {
        data.enterpriseId = this.treeListDetail.id;
      }
      this.staffInfo.pageNo = 1;
      getWorkerInfoList(data).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.tableData = res.result.records;
          this.staffInfo.total = res.result.records.length;
        }
      });
    },
    // 获取企业列表树状
    getRiskListLibraryList() {
      selectHierarchyEnterpriseListApi({
        projectSn: this.$store.state.projectSn,
        enterpriseName: this.searchInfo.enterpriseName,
      }).then((result) => {
        if (result.success) {
          if (this.searchInfo.enterpriseName) {
            this.treeList = [...result.result];
          } else {
            this.treeList = [
              {
                id: "",
                enterpriseName: "全部企业",
                regionCode: "",
                regionName: "",
              },
              ...result.result,
            ];
          }

          this.$nextTick(() => {
            this.$refs.riskPointTree &&
              this.$refs.riskPointTree.setCurrentKey(this.treeList[0].id); // 默认选中节点第一个
            this.treeListDetail = this.treeList[0];
            this.getUpdatePersonListFn();
          });
        }
      });
    },
  },
  computed: {
    tableDataUp() {
      if (this.tableData.length > 0) {
        const resultList = this.tableData.slice(
          0,
          this.staffInfo.pageNo * this.staffInfo.pageSize
        );
        this.$nextTick(() => {
          if (this.selectRightTableData.length > 0) {
            this.selectRightTableData.forEach((item) => {
              const find = this.selectList.find((ele) => ele.id == item.id);
              if (find) {
                this.$refs.selectedStaffMultipleTable.toggleRowSelection(find, true);
              }
            });
          }
        });
        return resultList;
      }
      return [];
    },
    selectListUp() {
      if (this.selectList.length > 0) {
        const resultList = this.selectList.slice(
          0,
          this.selectInfo.pageNo * this.selectInfo.pageSize
        );
        this.$nextTick(() => {
          if (this.selectLeftTableData.length > 0) {
            this.selectLeftTableData.forEach((item) => {
              const find = this.tableData.find((ele) => ele.id == item.id);
              if (find) {
                this.$refs.staffMultipleTable.toggleRowSelection(find, true);
              }
            });
          }
        });
        return resultList;
      }
      return [];
    },
  },
};
</script>
<style lang="less" scoped>
.table_wrap {
  position: relative;
  .pagerBox {
    margin-top: 0;
    width: 100%;
    position: absolute;
    bottom: 16px;
  }
}
.pagerBox1 {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.selectworkerTable {
  min-height: initial;
  max-height: initial;
}
.container-detail {
  padding: 20px;
  height: calc(100% - 40px);
  overflow-y: auto;
  .main-table {
    margin-top: 20px;
    height: calc(100% - 130px - 48px - 20px - 64px - 22px);
    .el-input,
    .el-select {
      width: 192px;
    }
  }
  .main-header {
    display: flex;
    flex-direction: column;
    margin-top: 22px;
    .el-form-item {
      margin-bottom: 20px;
      .el-input {
        width: 192px;
      }
      .el-textarea {
        width: 320px;
      }
    }
  }
  .main-content {
    display: flex;
    height: 487px;
    margin-top: 20px;
    .content-right {
      width: calc(610px - 40px);
      padding: 20px;
      border: 1px solid #d8dbe8;
      > div:first-child {
        font-size: 14px;
        color: #272d45;
        margin-bottom: 15px;
      }
      .flex {
        display: flex;

        .el-select {
          width: 150px;
        }
        .el-input {
          width: 240px;
        }
      }
      .tables {
        margin-top: 10px;
        min-height: initial;
        max-height: initial;
      }
    }
    .content-left {
      display: flex;
      > div:first-child {
        width: calc(280px - 40px);
        padding: 20px;
        border: 1px solid #d8dbe8;
        > div:first-child {
          font-size: 14px;
          color: #272d45;
          margin-bottom: 15px;
        }
        .treeBox {
          margin-top: 20px;
          height: calc(100% - 20px - 18px - 34px);
          // background-color: rgba(216, 216, 216, 0.2);
          //   border: 1px solid #e4e7ed;
          //   border-radius: 4px;
          //   padding: 12px 6px;
          position: relative;
          :deep(.el-checkbox.is-disabled) {
            display: none;
          }
          .treeStyle();
        }
      }
      > div:last-child {
        width: calc(610px - 40px);
        padding: 20px;
        border: 1px solid #d8dbe8;
        > div:first-child {
          font-size: 14px;
          color: #272d45;
          margin-bottom: 15px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .flex {
          display: flex;

          .el-select {
            width: 150px;
          }
          .el-input {
            width: 240px;
          }
        }
        .tables {
          margin-top: 10px;
          min-height: initial;
          max-height: initial;
        }
      }
    }
    .content-middle {
      margin: 0 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      > div {
        width: calc(118px - 20px);
        height: calc(50px - 15px);
        background: #ffffff;
        border: 1px solid #d8dbe8;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        color: #a2a4af;
        padding: 10px 10px 5px;
        cursor: pointer;
      }
      > div:nth-child(n + 2) {
        margin-top: 30px;
      }
    }
  }
  .main-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }
}
.tables {
  .el-button {
    /deep/ span {
      color: #262d49;
    }
  }
}
/deep/ .el-dialog__body {
  padding: 0 20px 20px;
}
.sidebar_btn {
  font-family: ABeeZee, ABeeZee;
  font-weight: normal;
  font-size: 16px;
  color: #272d45;
  position: relative;
  padding-left: 12px;
}
.sidebar_btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 3px;
  background-color: #5c81ee;
}
::v-deep .el-input__inner {
  line-height: 1px !important;
}
.flex() {
  display: flex;
  align-items: center;
}
.search-box {
  .flex();
  margin-left: 30px;
  > div {
    .flex();
    margin-right: 10px;
    > span {
      margin-right: 2px;
      font-size: 14px;
    }
    .question-icon {
      border: 1px solid #676c7c;
      border-radius: 50%;
      width: 10px;
      height: 10px;
      text-align: center;
      line-height: 10px;
      font-size: 12px;
    }
  }
  /deep/.el-radio-group {
    margin-top: 2px;
  }
}
.delete_btn {
  background-color: transparent;
  color: #f56c6c;
  border-color: #f56c6c;
}
.treeStyle() {
  /deep/.el-tree {
    font-size: 15px;
    width: 100%;
    background-color: transparent;
    .el-tree-node {
      white-space: normal;
      &:focus > .el-tree-node__content {
        background-color: transparent;
      }
      &.is-current > .el-tree-node__content {
        background-color: rgba(81, 129, 246, 0.14);
        color: #5181f6;
      }
    }
    .custom-tree-node {
      height: 16px;
    }
    .el-tree-node__content {
      // height: 32px;
      padding: 7px 0;
      height: auto;
      line-height: 16px;
      position: relative;
      // margin-bottom: 7px;
      &:hover {
        background-color: rgba(81, 129, 246, 0.14);
        color: #5181f6;
      }

      .videoName {
        font-size: 14px;
      }
      .projectName {
        font-size: 14px;
        width: calc(100% - 55px);
        display: inline-block;
      }
      .companyName2 {
        font-size: 16px;
        font-weight: bold;
        display: inline-block;
        width: 192px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .el-tree-node__expand-icon {
      font-size: 16px;
      padding: 0 6px;
      &.is-leaf {
        color: transparent !important;
      }
    }
    .treeTitle {
      background-color: #f7f7f7;
      margin-bottom: 10px;
    }
  }
}
</style>
