<template>
  <div class="content">
    <div class="admin-page-title point-font2 mb30">
      <p>콘텐츠 관리</p>
    </div>
    <div class="admin-style">
      <details open class="form-table-style mb30">
        <summary class="point-font">
          <p class="summary-style pl10">신청내용</p>
        </summary>
        <div class="pt10 pb10">
          <table class="form-table2 mb30">
            <colgroup>
              <col width="15%" />
              <col width="35%" />
              <col width="15%" />
              <col width="35%" />
            </colgroup>
            <tr>
              <th class="point-font">기업명</th>
              <td>{{ entDscsnAply["entNm"] }}</td>
              <th class="point-font">성명</th>
              <td>{{ entDscsnAply["aplcntNm"] }}</td>
            </tr>
            <tr>
              <th class="point-font">연락처</th>
              <td>{{ entDscsnAply["telno"] }}</td>
              <th class="point-font">이메일</th>
              <td>{{ entDscsnAply["eml"] }}</td>
            </tr>
            <tr>
              <th class="point-font">첨부파일</th>
              <td colspan="3">
                <div v-if="entDscsnAply['fileMngId'] != null">
                  <p v-for="(file, index) of fileList" :key="index">
                    <a :href="file['absltPath']">
                      {{ file["fileNm"] }}.{{ file["extnNm"] }}
                    </a>
                  </p>
                </div>
                <p v-else class="data-none">등록된 첨부파일이 없습니다.</p>
              </td>
            </tr>
          </table>
          <div class="gd-12 pd0">
            <label for="" class="point-font mb10" style="font-size: 1.6rem">
              내용
            </label>
            <textarea
              class="content"
              :value="entDscsnAply['aplyCn']"
              disabled
            ></textarea>
          </div>
        </div>
      </details>
      <details open class="form-table-style mb30">
        <summary class="point-font">
          <p class="summary-style pl10">상담조치내역</p>
        </summary>
        <div class="pt10 pb10">
          <table class="form-table2 mb10">
            <colgroup>
              <col width="15%" />
              <col width="35%" />
              <col width="15%" />
              <col width="35%" />
            </colgroup>
            <tr>
              <th class="point-font">담당자</th>
              <td>
                <div class="flex align-center no-gutters">
                  <div class="gd-9 mr10">
                    <input
                      type="text"
                      class="full-input"
                      ref="clr"
                      v-model="entDscsnAply['mbrNm']"
                      placeholder="담당자를 선택하세요."
                      readonly
                    />
                  </div>
                  <div class="gd-2">
                    <button
                      class="large-btn blue-border-btn"
                      @click="fnModalOpen('접수자')"
                    >
                      찾기
                    </button>
                  </div>
                </div>
              </td>
              <th class="point-font">조치일자</th>
              <td>
                <div class="gd-12">
                  <div>{{ entDscsnAply["actnDt"] }}</div>
                </div>
              </td>
            </tr>
          </table>
          <div class="gd-12 pd0">
            <label for="" class="point-font mb10" style="font-size: 1.6rem">
              비고
            </label>
            <textarea
              class="content"
              v-model="entDscsnAply['rmrk']"
              disabled
            ></textarea>
          </div>
        </div>
      </details>
      <div class="flex justify-end align-center">
        <div class="gd-1 pr0">
          <button class="large-btn gray-border-btn" @click="fnPrev">
            목록
          </button>
        </div>
        <div class="gd-1 pr0">
          <button
            class="large-btn blue-btn"
            :disabled="isMbrId"
            @click="fnUpdate"
          >
            <span v-if="entDscsnAply['prcsStts'] == 'C'">재배정</span>
            <span v-else>배정</span>
          </button>
        </div>
      </div>
    </div>
    <!-- 모달: 찾기 -->
    <Modal :showModal="isOpen">
      <template v-slot:header>
        <div class="box-title point-font">
          <p>담당자 선택</p>
        </div>
        <button class="close-btn" @click="fnModalClose">X</button>
      </template>
      <table class="form-table2 mb10">
        <colgroup>
          <col width="60%" />
          <col width="35%" />
        </colgroup>
        <thead>
          <tr>
            <th class="text-ct">이름</th>
            <th class="text-ct">비고</th>
          </tr>
        </thead>
        <tr v-for="(item, index) of modal['list']" :key="index">
          <td>{{ item["name"] }}</td>
          <td>
            <button
              type="button"
              class="large-btn blue-btn"
              @click="fnModalInsert(item)"
            >
              선택
            </button>
          </td>
        </tr>
      </table>
      <template v-slot:footer>
        <div class="gd-2"></div>
        <div class="gd-8">
          <PaginationButton
            :className="'admin-pagination'"
            v-model:currentPage="modal.pagination.currentPage"
            :pagination="modal.pagination"
            :click="axiosModalViewList"
          />
        </div>
        <div class="gd-2"></div>
      </template>
    </Modal>
  </div>
</template>

<script>
import Modal from "../../../../component/modal/Modal.vue";
import PaginationButton from "../../../../component/pagination/PaginationButton.vue";
import { defaultSearchParams } from "../../../../../resources/js/defaultSearchParams";

// api
import {
  entDscsnAplyDetailProc,
  entDscsnAplyUpdate,
} from "../../../../../resources/api/entDscsnAply";
import { mbrListProc } from "../../../../../resources/api/mbrInfo";

export default {
  data() {
    return {
      // id
      pageId: this.$route.query.pageId,

      // 상세 조회 정보 담는 객체
      entDscsnAply: {},
      fileList: [],

      isOpen: false,
      isMbrId: false,

      // 모달 객체
      modal: {
        list: [],
        listCount: 0,
        pagination: { ...defaultSearchParams },
      },
    };
  },
  created() {
    this.fnViewDetail();
  },
  methods: {
    // 배정
    fnUpdate() {
      this.axiosUpdate();
    },
    // 모달 열기
    fnModalOpen() {
      this.isOpen = true;
      this.axiosModalViewList();
    },
    // 모달 닫기
    fnModalClose() {
      this.isOpen = false;
      this.modal = {
        title: null,
        list: [],
        listCount: 0,
        pagination: {},
      };
    },
    // 모달 등록
    fnModalInsert(data) {
      this.entDscsnAply["mbrNm"] = data["name"];
      this.entDscsnAply["actnPic"] = data["id"];
      this.fnModalClose();
    },
    // 목록
    fnPrev() {
      this.$router.push({
        name: "admAdminCompanyConsultSelectList"
      });
    },

    // 조회(상세)
    async fnViewDetail() {
      // 데이터 세팅
      const data = { entDscsnAplyId: this.pageId };
      // 실행
      try {
        const response = await entDscsnAplyDetailProc(data);
        this.entDscsnAply = response.data["data"]["entDscsnAply"];
        if (
          response.data["data"]["entDscsnAply"]["mbrNm"] != null &&
          response.data["data"]["entDscsnAply"]["mbrNm"] != ""
        ) {
          if (response.data["data"]["entDscsnAply"]["prcsStts"] != "C") {
            this.isMbrId = true;
          }
        }
      } catch (error) {
        const errorData = error.response.data;
        if (errorData.message != null && errorData.message != "") {
          alert(error.response.data.message);
        } else {
          alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
        }
      }
    },
    // axios: 수정
    async axiosUpdate() {
      // 데이터 세팅
      let data = this.entDscsnAply;
      if (this.entDscsnAply["prcsStts"] == "C") {
        data["prcsStts"] = "N";
      }
      // 실행
      try {
        const response = await entDscsnAplyUpdate(data);
        alert(response.data["message"]);
        location.reload();
      } catch (error) {
        const errorData = error.response.data;
        if (errorData.message != null && errorData.message != "") {
          alert(error.response.data.message);
        } else {
          alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
        }
      }
    },
    // axios: 조회(목록)
    async axiosModalViewList() {
      // 데이터 삽입
      const data = { ...this.modal["pagination"], authrtCd: "" };
      // 실행
      try {
        const response = await mbrListProc(data);

        let dataList = [];
        for (let mbr of response.data["data"]["list"]) {
          dataList.push({
            name: mbr["mbrNm"],
            id: mbr["mbrId"],
          });
        }
        this.modal["list"] = dataList;
        this.modal["pagination"] = response.data["data"]["pagination"];
      } catch (error) {
        const errorData = error.response.data;
        if (errorData.message != null && errorData.message != "") {
          alert(error.response.data.message);
        } else {
          alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
        }
      }
    },
  },
  watch: {},
  computed: {},
  components: { Modal, PaginationButton },
  mounted() {},
};
</script>