<template>
  <div class="card ">
    <div class="card-body ">
      <h2 class="card-title">직원 검색</h2>
      <div class="flex align-top">
        <div class="sch-form-wrap search">
          <div class="input-group">
            <div class="sch-input">
              <input type="text" class="form-control" placeholder="직원명" v-model="searchReqDTO.searchText" @keyup.enter="searchUsers">
              <button class="ico-sch" @click="searchUsers">
                <SearchOutlined />
              </button>
            </div>
          </div>
          <div class="tbl-wrap table-scroll">
            <table id="myTable" class="tbl data">
              <!-- 동적으로 <th> 생성 -->
              <thead>
                <tr>
                  <th>부서 </th>
                  <th>이름</th>
                  <th>직급(직책)</th>
                </tr>
              </thead>
              <!-- 동적으로 <td> 생성 -->
              <tbody>
                <tr v-for="(item, index) in selectedUsers" :key="index" @click="selectUser(item)" :class="{ 'inactive-user': item.useAt === 'N' }">
                  <td>{{ item.deptNm }}</td>
                  <td>{{ item.userNm }}</td>
                  <td>
                    <template v-if="item.rspofcNm">
                      {{ item.clsfNm }}({{ item.rspofcNm }})
                    </template>
                    <template v-else>
                      {{ item.clsfNm }}
                    </template>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div class="name-box flex sb simple">
            <div class="img-area" style="width: 170px;">
              <div class="img"><img :src="selectedUser.file.filePath" :alt="selectedUser.file.fileNm">
              </div>
            </div>
            <div class="row g-3 needs-validation " :class="{ 'was-validated': formSubmitted }"
              @submit.prevent="handleRegister" novalidate>
              <div class="col-12">
                <label for="yourName" class="form-label">아이디</label>
                <input v-model="name" type="text" name="name" class="form-control" required readonly
                  placeholder="admin">
              </div>
              <div class="col-12 ">
                <div class="col-12 border-x">
                  <label for="userNm" class="form-label ">이름<p class="require"><img :src="require" alt=""></p>
                  </label>
                  <input v-model="selectedUser.userNm" type="text" name="username" class="form-control" required
                    readonly>
                </div>
                <div class="col-12 border-x">
                  <label for="deptNm" class="form-label">부서</label>
                  <input v-model="selectedUser.deptNm" type="text" name="password" class="form-control" required
                    readonly placeholder="주식회사 테이큰 소프트">
                </div>
              </div>
              <div class="col-12 border-x">
                <div class="col-12 border-x">
                  <label for="clsfNm" class="form-label">직급</label>
                  <input v-model="selectedUser.clsfNm" type="text" name="username" class="form-control" required
                    readonly>
                </div>
                <div class="col-12 border-x">
                  <label for="rspofcNm" class="form-label">직책</label>
                  <input v-model="selectedUser.rspofcNm" type="password" name="password" class="form-control" required
                    readonly>
                </div>
              </div>
            </div>
          </div>
          <div class="row g-3 needs-validation detail" :class="{ 'was-validated': formSubmitted }"
            @submit.prevent="handleRegister" novalidate>
            <div class="col-12">
              <label for="mbtlnum" class="form-label">연락처</label>
              <input v-model="selectedUser.mbtlnum" type="text" name="name" class="form-control" required readonly
                placeholder="admin">
            </div>
            <div class="col-12">
              <label for="brthdy" class="form-label">생년월일</label>
              <input v-model="selectedUser.brthdy" type="text" name="name" class="form-control" required readonly
                placeholder="admin">
            </div>
            <div class="col-12 border-x">
              <label for="encpn" class="form-label">입사일</label>
              <input v-model="selectedUser.encpn" type="text" name="name" class="form-control" required readonly
                placeholder="admin">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import GoogleCalendar from "../../../component/GoogleCalendar.vue"
import { SearchOutlined } from '@ant-design/icons-vue';
import { findUsersProc } from "../../../../resources/api/user"
export default {
  data() {
    return {
      photoicon: "/client/resources/img/photo_icon.png",
      img1: "/client/resources/img/img.png",
      icon1: "/client/resources/img/icon.png",
      dateicon: "/client/resources/img/date.png",
      startbtn: "/client/resources/img/start.png",
      stopbtn: "/client/resources/img/stop.png",
      moreicon: "/client/resources/img/more.png",
      selectedUsers: [],
      selectedUser: {
        file: {
          fileNm: "기본이미지",
          filePath: "/client/resources/img/photo_icon.png",
        },
        loginId: null,
        userNm: null,
        deptNm: null,
        clsfNm: null,
        rspofcNm: null,
        mbtlnum: null,
        brthdy: null,
        encpn: null,
      },
      searchReqDTO: {
        searchType: "nm",
        searchText: null,
      },
    }
  },
  components: {
    SearchOutlined, findUsersProc
  },
  methods: {
    //사용자 정보 전체 조회
    async searchUsers() {
      try {
        const response = await findUsersProc(this.searchReqDTO);
        if (response.status === 200) {
          this.selectedUsers = response.data.data.users; // API 응답에서 카테고리 목록을 가져옴
          console.log("user~~~~~!", this.selectedUsers);
        }
      } catch (error) {
        console.error("검색 중 오류 발생:", error);
      }
    },
    selectUser(item) {
      this.selectedUser = {
        file: {  // file 객체도 함께 초기화
          fileNm: "기본이미지",
          filePath: this.photoicon,
        },
        loginId: item.loginId,
        userNm: item.userNm,
        deptNm: item.deptNm,
        clsfNm: item.clsfNm,
        rspofcNm: item.rspofcNm,
        mbtlnum: item.mbtlnum,
        brthdy: item.brthdy,
        encpn: item.encpn,
      };
      // 썸네일 정보가 있으면 업데이트
      if (item.thumbnail && Object.keys(item.thumbnail).length > 0) {
        this.selectedUser.file.fileNm = item.thumbnail.fileNm; // thumbnail -> item.thumbnail
        this.selectedUser.file.filePath = item.thumbnail.filePath; // thumbnail -> item.thumbnail
      }
    }
  },
  watch: {

  },
  computed: {

  },
  mounted() {
    this.searchUsers();
  }
}
</script>
<style scoped>
tr {
  cursor: pointer;
}
.inactive-user {
  color: #999999 !important; /* 회색 텍스트 */
}

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