<template>
  <div class="col-lg-12">
    <div class="card">
      <div class="card-body">
        <h2 class="card-title">직원관리</h2>
        <div class="sch-form-wrap">
          <div class="input-group">
            <select name="" id="" class="form-select">
              <option value="">부서</option>
            </select>
            <select class="form-select" v-model="selectedClsf">
              <option value="">직급</option>
              <option v-for="jobRank in clsfCode" :key="jobRank.codeNm" :value="jobRank">
                {{ jobRank.codeNm }}
              </option>
            </select>
            <select class="form-select" v-model="selectedRepofc">
              <option value="">직책</option>
              <option v-for="position in rspofcCode" :key="position.codeNm" :value="position">
                {{ position.codeNm }}
              </option>
            </select>
            <div class="sch-input">
              <input type="text" class="form-control" v-model="userSearchReqDTO.searchText" @keyup.enter="searchUsers"
                placeholder="직원명">
              <button class="ico-sch" @click="searchUsers">
                <SearchOutlined />
              </button>
            </div>
          </div>
        </div>

        <!-- Table  -->
        <div class="tbl-wrap">
          <table id="myTable" class="tbl data">
            <!-- 동적으로 <th> 생성 -->
            <thead>
              <tr>
                <th>부서 </th>
                <th>직급</th>
                <th>직책</th>
                <th>아이디</th>
                <th>이름</th>
                <th>입사일</th>
                <th>비밀번호 초기화</th>
              </tr>
            </thead>
            <!-- 동적으로 <td> 생성 -->
            <tbody>
              <tr v-for="(item, index) in selectedUsers" :key="index" @click="goToDetailPage(item)" :class="{ 'inactive-user': item.useAt === 'N' }">
                <td>{{ item.deptNm }}</td>
                <td>{{ item.clsfNm }}</td>
                <td>{{ item.rspofcNm }}</td>
                <td>{{ item.loginId }}</td>
                <td>{{ item.userNm }}</td>
                <td>{{ item.encpn }}</td>
                <td>
                  <button class="btn tertiary xsm" @click.stop="resetPassword(item)">초기화</button>
                </td>
              </tr>
            </tbody>
          </table>

        </div>
        <Pagination :search="userSearchReqDTO" @onChange="fnChangeCurrentPage" />
        <div class="buttons">
          <button class="btn primary" type="submit" @click="goToPage('등록')">등록</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
import { findUsersProc, updatePassword } from "../../../../resources/api/user"
import Pagination from '../../../component/Pagination.vue';
import { findCodesProc } from '../../../../resources/api/code';
export default {
  data() {
    return {
      showOptions: false,
      currentPage: 1,
      totalPages: 3,
      photoicon: "/client/resources/img/photo_icon.png",
      selectedUsers: [],
      // 코드 조회
      serachRequest: {
        searchType: "upperCd",
        searchText: null,
      },
      // 직급코드 
      clsfCode: [],
      // 직책코드
      rspofcCode: [],
      selectedClsf: '',
      selectedRepofc: '',
      userSearchReqDTO: {
        searchType: "all",    // 'id' 또는 'nm' 등 선택
        searchText: null,    // 검색어 입력
        userSttus: null,     // 회원상태 선택 (0,1,2,3)
        useAt: null,         // 사용여부 선택 (Y, N)
        dept: null,          // 부서 선택
        clsf: null,          // 직급 선택
        rspofc: null,         // 직책 선택

        currentPage: 1,
      },
      updatePasswordDTO: {
        oldPassword:"Ts0511@@1",
        newPassword:"Ts0511@@1",
        resetAt: true,
      },
    };
  },
  components: {
    SearchOutlined, Pagination, findCodesProc, updatePassword
  },
  computed: {
  },
  created() {
    this.clsfTypeCodes(); // 직급 종류 조회
    this.rspofcTypeCodes(); // 직책 종류 조회
  },
  methods: {
    // 페이지 이동
    fnChangeCurrentPage(currentPage) {
      this.userSearchReqDTO.currentPage = Number(currentPage);
      console.log(this.userSearchReqDTO);
      this.$nextTick(() => {
        this.searchUsers();
      });
    },
    //사용자 정보 전체 조회
    async searchUsers() {
      try {
        const response = await findUsersProc(this.userSearchReqDTO);
        if (response.status === 200) {
          this.selectedUsers = response.data.data.users; // API 응답에서 카테고리 목록을 가져옴
          console.log("user 정보 ",this.selectedUsers);
        }
      } catch (error) {
        console.error("검색 중 오류 발생:", error);
      }
    },
    // 공통코드 직급
    async clsfTypeCodes() {
      this.clsfCode = []; // 초기화
      this.serachRequest.searchType = "UPPER_CODE"
      this.serachRequest.searchText = "clsf_code"; // 공통코드 분류코드 (직급)

      try {
        const response = await findCodesProc(this.serachRequest);
        if (response.status === 200) {
          this.clsfCode = response.data.data.codes; // API 응답에서 카테고리 목록을 가져옴
        }
      } catch (error) {
        console.error("검색 중 오류 발생:", error);
      }
    },
    // 공통코드 직책
    async rspofcTypeCodes() {
      this.clsfCode = []; // 초기화
      this.serachRequest.searchType = "UPPER_CODE"
      this.serachRequest.searchText = "rspofc_code"; // 공통코드 분류코드 (직급)

      try {
        const response = await findCodesProc(this.serachRequest);
        if (response.status === 200) {
          this.rspofcCode = response.data.data.codes; // API 응답에서 카테고리 목록을 가져옴
        }
      } catch (error) {
        console.error("검색 중 오류 발생:", error);
      }
    },
    async resetPassword(user) {
      try {
        const response = await updatePassword(user.userId, this.updatePasswordDTO);
        if (response.status === 200) {
          console.log("비밀번호 초기화");
        }
      } catch (error) {
        console.error("검색 중 오류 발생:", error);
      }
    },
    goToDetailPage(item) {
      // item.id 또는 다른 식별자를 사용하여 URL을 구성할 수 있습니다.
      this.$router.push({ name: 'HrmDetail', query: { id: item.userId } });
    },
    goToPage(type) {
      if (type === '등록') {
        this.$router.push({ name: 'HrmInsert' });
      }
    },
  },
  watch: {
    // 직급 선택 감지 -> requestDTO.clsf 업데이트
    selectedClsf(newVal) {
      this.userSearchReqDTO.clsf = newVal ? newVal.code : null; // 선택된 직급 객체의 'code'를 requestDTO.clsf에 할당
    },
    // 직책 선택 감지 -> requestDTO.rspofc 업데이트
    selectedRepofc(newVal) {
      this.userSearchReqDTO.rspofc = newVal ? newVal.code : null; // 선택된 직책 객체의 'code'를 requestDTO.rspofc에 할당
    },
  },
  mounted() {
    this.searchUsers();
    this.clsfTypeCodes();
    this.rspofcTypeCodes();
  },
};
</script>

<style scoped>
tr {
  cursor: pointer;
}
.inactive-user {
  color: #999999 !important; /* 회색 텍스트 */
}

.inactive-user td {
  color: #999999 !important; /* 모든 td 요소를 회색으로 */
}
</style>
