<template>
  <details open class="form-table-style mb30">
    <summary
      :class="{
        'point-font2': pageRole == 'adm',
        'point-font': pageRole == 'government',
      }"
    >
      <p class="summary-style pl10">상담내역</p>
    </summary>
    <div class="pt10 pb10">
      <ListTable
        :colgroup="colgroup"
        :thead="thead"
        :tbody="tbody"
        :className="pageRole == 'adm' ? 'admin-list' : 'consulting-table'"
        @listClick="fnModalOpen"
      />
      <div class="flex justify-end no-gutters">
        <div class="gd-1"></div>
        <div class="gd-10">
          <PaginationButton
            v-model:currentPage="search['currentPage']"
            :pagination="search"
            :click="fnViewList"
            :className="pageRole == 'adm' ? 'admin-pagination' : null"
          />
        </div>
        <div class="gd-1">
          <button
            :class="{
              'large-btn': true,
              'blue-btn point-font2': pageRole == 'adm',
              'green-btn point-font': pageRole == 'government',
            }"
            @click="fnInsert"
            v-if="pageAuth.regAuthrt == 'Y'"
          >
            등록
          </button>
        </div>
      </div>
    </div>
  </details>

  <!-- 상담내역 상세 모달 -->
  <Modal className="medium-modal" :showModal="isOpen">
    <template v-slot:header>
      <div
        :class="{
          'box-title': true,
          'point-font2': pageRole == 'adm',
          'point-font': pageRole == 'government',
        }"
      >
        <p>투자상담</p>
      </div>
      <button class="close-btn" @click="fnModalClose">X</button>
    </template>

    <!-- 투자상담 -->
    <IvstDscsnDetail
      :pageNm="pageNm"
      :pageId="ivstDscsnId"
      :pageAuth="pageAuth"
      :pageRole="pageRole"
      :entId="pageId"
    />

    <template v-slot:footer>
      <div v-if="pageAuth.mdfcnAuthrt == 'Y'" class="gd-3 pd0 mr10">
        <button
          :class="{
            'large-btn': true,
            'blue-border-btn': pageRole == 'adm',
            'green-border-btn point-font': pageRole == 'government',
          }"
          @click="fnModalUpdate"
        >
          수정
        </button>
      </div>
      <div v-if="pageAuth.delAuthrt == 'Y'" class="gd-3 pd0">
        <button
          :class="{
            'large-btn': true,
            'red-border-btn': pageRole == 'adm',
            'red-border-btn point-font': pageRole == 'government',
          }"
          @click="fnModalDelete"
        >
          삭제
        </button>
      </div>
    </template>
  </Modal>
</template>

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

// API
import {
  ivstDscsnListProc,
  ivstDscsnDetailProc,
  ivstDscsnDeleteProc,
} from "../../../resources/api/ivstDscsn";

export default {
  components: {
    ListTable: ListTable,
    PaginationButton: PaginationButton,
    Modal: Modal,
    IvstDscsnDetail: IvstDscsnDetail,
  },
  props: {
    data: {
      type: Object,
    },
    pageNm: {
      type: String,
      default: null,
    },
    pageId: {
      type: String,
    },
    pageAuth: {
      type: Object,
    },
    pageRole: {
      type: String,
      default: "government",
    },
  },
  data() {
    return {
      colgroup: ["15%", "70%", "15%"],
      thead: ["NO", "제목", "등록일"],
      tbody: [],
      search: { ...defaultSearchParams },
      list: [],
      // 팝업
      isOpen: false,
      ivstDscsnView: {},
      ivstDscsnId: null,
    };
  },
  created() {
    this.fnViewList();
  },
  methods: {
    // axios: 조회(목록)
    async fnViewList() {
      // 데이터 세팅
      let data = this.search;
      data.cateId = "ent_id";
      data.cateValue = this.pageId;
      // 실행
      try {
        const response = await ivstDscsnListProc(data);
        this.list = response.data.data.list;
        this.search = response.data.data.pagination;
        this.makeTbody();
      } catch (error) {
        alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
      }
    },
    // tbody 생성
    makeTbody() {
      this.tbody = [];
      this.tbody = this.list.map((ivstDscsn, idx) => ({
        id:
          this.search.totalRecordCount -
          idx -
          (this.search.currentPage - 1) * this.search.recordSize,
        ttl: ivstDscsn.ttl,
        regDt: ivstDscsn.regDt,
      }));
    },

    // 등록
    fnInsert() {
      this.$router.push({
        path: "/invest/" + this.pageRole + "/companyInvest/insert.page",
        query: {
          entId: this.data["entId"],
          entNm: this.data["entNm"],
        },
      });
    },

    // 모달 열기
    fnModalOpen(idx) {
      this.isOpen = true;
      this.ivstDscsnView = this.list[idx];
      this.ivstDscsnId = this.list[idx].ivstDscsnId;
    },
    // 모달 닫기
    fnModalClose() {
      this.isOpen = false;
      this.fnViewList();
    },

    // axios: 모달 조회(상세)
    async fnDetail(idx) {
      // 데이터 세팅
      let data = { ivstDscsnId: this.list[idx]["ivstDscsnId"] };
      // 실행
      try {
        const response = await ivstDscsnDetailProc(data);
        this.ivstDscsnView = response.data.data;
      } catch (error) {
        alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
      }
    },

    // axios: 모달 삭제
    async fnModalDelete() {
      var isDelete = confirm("해당 투자상담을 삭제하시겠습니까?");
      if (!isDelete) {
        return;
      }
      // 데이터 세팅
      let data = this.ivstDscsnView;
      data.useYn = "N";
      // 실행
      try {
        const response = await ivstDscsnDeleteProc(data);
        alert(response.data["message"]);
        this.fnViewList(); // 상담내역 재조회
        this.$emit("fnEntInfoView");
        this.fnModalClose();
      } catch (error) {
        alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
      }
    },
    // 모달 수정
    fnModalUpdate() {
      this.$router.push({
        path: "/invest/" + this.pageRole + "/companyInvest/insert.page",
        query: { pageId: this.ivstDscsnView["ivstDscsnId"] },
      });
    },
  },
};
</script>