<template>
  <div class="card">
    <div class="card-body">
      <h2 class="card-title">출장 신청</h2>
      <p class="require"><img :src="require" alt=""> 필수입력</p>
      <div class="tbl-wrap">
        <table class="tbl data">
          <tbody>
            <tr>
              <th>출장구분 <span class="require"><img :src="require" alt=""></span></th>
              <td>
                <select class="form-select sm" style="width: 110px;" v-model="bsrpInfo.bsrpSe">
                  <option v-for="(item, idx) of cmmnCodes.bsrpCodeList" :key="idx" :value="item.code">
                    {{ item.codeNm }}
                  </option>
                </select>
              </td>
              <th>일수</th>
              <td>
                <input type="text" class="form-control sm" v-model="totalDays" readonly />
              </td>
            </tr>

            <tr>
              <th>출장지 <span class="require"><img :src="require" alt=""></span></th>
              <td>
                <input type="text" class="form-control sm" v-model="bsrpInfo.bsrpPlace" />
              </td>
               <th>출장목적 <span class="require"><img :src="require" alt=""></span></th>
              <td>
                <input type="text" class="form-control sm" v-model="bsrpInfo.bsrpPurps" />
              </td>
            </tr>

            <tr>
              <th>출장기간 <span class="require"><img :src="require" alt=""></span></th>
              <td colspan="3">
                <div class="d-flex">
                  <div class="d-flex gap-1 mb-1">
                    <input type="date" class="form-control sm" v-model="bsrpInfo.bgnde" />
                    <input type="text" class="form-control sm" style="width: 100px;" placeholder="시" v-model="bsrpInfo.beginHour" />
                    <input type="text" class="form-control sm" style="width: 100px;" placeholder="분" v-model="bsrpInfo.beginMnt" />
                  </div>
                  <div class="d-flex gap-1">
                    <input type="date" class="form-control sm" v-model="bsrpInfo.endde" />
                    <input type="text" class="form-control sm" style="width: 100px;" placeholder="시" v-model="bsrpInfo.endHour" />
                    <input type="text" class="form-control sm" style="width: 100px;" placeholder="분" v-model="bsrpInfo.endMnt" />
                  </div>
                </div>
              </td>
            </tr>


            <tr>
              <th>
                동행자
              </th>
              <td>
                <button type="button" title="추가" @click="isOpenNmprModal = true">
                  <PlusCircleFilled />
                </button>
                <HrPopup v-if="isOpenNmprModal" :lists="bsrpInfo.bsrpNmprList" @onSelected="fnAddNmpr" @close="isOpenNmprModal = false" />
                <div class="approval-container">
                  <div v-for="(item, idx) of bsrpInfo.bsrpNmprList" :key="idx" class="d-flex addapproval">
                    <div class="d-flex align-items-center border-x">
                      <p>{{ item.triperNm }} {{ item.clsfNm }}</p>
                      <button type="button" @click="fnDelNmpr(idx)" @mousedown.stop>
                        <CloseOutlined />
                      </button>
                    </div>
                  </div>
                </div>
              </td>
              <th>
                승인자 <span class="require"><img :src="require" alt=""></span>
              </th>
              <td>
                <button type="button" title="추가" @click="isOpenSanctnModal = true">
                  <PlusCircleFilled />
                </button>
                <HrPopup v-if="isOpenSanctnModal" :lists="bsrpCnsul.sanctnList" @onSelected="fnAddSanctn" @close="isOpenSanctnModal = false" />
                <div class="approval-container">
                  <SanctnList v-model:lists="bsrpCnsul.sanctnList" @delSanctn="fnDelSanctn" />
                </div>
              </td>
            </tr>
            <tr>
              <th>품의내용 <span class="require"><img :src="require" alt=""></span></th>
              <td colspan="3"  style="height: calc(100% - 550px);">
                <EditorComponent v-model:contents="bsrpCnsul.cn" />
              </td>
            </tr>
            <tr>
              <th>
                법인카드
                <button type="button" title="추가" @click="isOpenCardModal = true">
                  <PlusCircleFilled />
                </button>
              </th>
              <td>
                <CorpCardPopup v-if="isOpenCardModal" :bsrpInfo="bsrpInfo" :lists="cprCardList" @close="isOpenCardModal = false" @onSelected="fnAddCard" />
                <div class="approval-container">
                  <div v-for="(card, idx) in cprCardList" :key="idx" class="d-flex gap-2 addapproval mb-2">
                    <form class="d-flex align-items-center border-x">
                      <p>{{ card.cardNm }}</p>
                      <button type="button" @click="fnDelCard(idx)" class="delete-button">
                        <CloseOutlined />
                      </button>
                    </form>
                  </div>
                </div>
              </td>
              <th>
                법인차량
                <button type="button" title="추가" @click="isOpenVhcleModal = true">
                  <PlusCircleFilled />
                </button>
              </th>
              <td>
                <CorpCarPopup v-if="isOpenVhcleModal" :bsrpInfo="bsrpInfo" :lists="cprVhcleList" @close="isOpenVhcleModal = false" @onSelected="fnAddVhcle" />
                <div class="approval-container">
                  <div v-for="(vhcle, idx) in cprVhcleList" :key="idx" class="d-flex gap-2 addapproval mb-2">
                    <p>{{ vhcle.vhcleNm }}</p>
                    <select class="form-select" v-model="vhcle.drverId">
                      <option value="" disabled hidden>운전자 선택</option>
                      <option :value="userInfo.userId">{{ userInfo.userNm }}</option>
                      <option v-for="(item, idx) of bsrpInfo.bsrpNmprList" :key="idx" :value="item.userId">
                        {{ item.userNm }}
                      </option>
                    </select>
                    <button type="button" @click="fnDelVhcle(idx)" class="delete-button">
                      <CloseOutlined />
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="buttons">
        <button type="button" class="btn sm sm primary" @click="fnSave">신청</button>
        <button v-if="$isEmpty(pageId)" type="button" class="btn sm sm secondary" @click="fnMoveTo('list')">목록</button>
        <button v-else type="button" class="btn sm sm secondary" @click="fnMoveTo('view', pageId)">취소</button>
      </div>
    </div>
  </div>
</template>
<script>
import { PlusCircleFilled, CloseOutlined } from '@ant-design/icons-vue';
import HrPopup from '../../../component/Popup/HrPopup.vue';
import CorpCarPopup from '../../../component/Popup/CorpCarPopup.vue';
import CorpCardPopup from '../../../component/Popup/CorpCardPopup.vue';
import SanctnList from '../../../component/Sanctn/SanctnFormList.vue';
import EditorComponent from '../../../component/editor/EditorComponent.vue';
// API
import { saveBsrpProc, bsrpProc, updateBsrpProc } from '../../../../resources/api/bsrp';

export default {
  components: {
    PlusCircleFilled, CloseOutlined,
    HrPopup, CorpCarPopup, CorpCardPopup,
    SanctnList, EditorComponent,
  },

  data() {
    return {
      require: "/client/resources/img/require.png",

      pageId: null,
      userInfo: this.$store.state.userInfo,
      cmmnCodes: {},

      isOpenNmprModal: false,
      isOpenSanctnModal: false,
      isOpenCardModal: false,
      isOpenVhcleModal: false,

      // 출장정보
      bsrpInfo: {
        applcntId: null,  // 신청자 아이디
        bsrpSe: null,     // 출장구분
        bsrpPlace: null,  // 출장지
        bsrpPurps: null,  // 출장목적
        bgnde: null,      // 시작일
        beginHour: null,  // 시작시
        beginMnt: null,   // 시작분
        endde: null,      // 종료일
        endHour: null,    // 종료시
        endMnt: null,     // 종료분
        bsrpNmprList: [], // 출장인원 목록
      },
      // 출장품의
      bsrpCnsul: {
        bsrpId: null,     // 출장 아이디
        cn: null,         // 품의 내용
        confmAt: null,    // 승인여부
        rgsde: null,      // 등록일
        register: null,   // 등록자
        updde: null,      // 수정일
        updusr: null,     // 수정자
        sanctnList: [],   // 결재 목록
      },
      cprCardList: [],    // 법인카드 목록
      cprVhcleList: [],   // 법인차량 목록

      totalDays: 0, // 일수
    };
  },

  computed: {},

  watch: {
    cmmnCodes(newVal) {
      if (Object.keys(newVal).length > 0) {
        this.bsrpInfo.bsrpSe = this.cmmnCodes.bsrpCodeList[0].code;
      }
    },
    'bsrpInfo.bgnde'(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.calcDayCnt(); // 일수 계산
      }
    },
    'bsrpInfo.endde'(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.calcDayCnt(); // 일수 계산
      }
    },
  },

  async created() {
    this.pageId = this.$route.query.id;
    this.cmmnCodes = await this.$defaultCodes();
  },

  mounted() {
    if (!this.$isEmpty(this.pageId)) {
      this.findData();
    }
  },

  methods: {
    // 상세 조회
    async findData() {
      try {
        const response = await bsrpProc(this.pageId);
        const result = response.data.data;

        this.bsrpInfo = result.bsrpInfo;
        this.bsrpInfo.bgnde = this.bsrpInfo.bgnde.split(' ')[0];
        this.bsrpInfo.endde = this.bsrpInfo.endde.split(' ')[0];

        this.bsrpCnsul = result.bsrpCnsul;
        this.cprCardList = result.cprCardList;
        this.cprVhcleList = result.cprVhcleList;
      } catch (error) {
        console.error('데이터 조회 실패:', error);
        alert(error.response.data.message);

        this.fnMoveTo('list');
      }
    },

    // 일수 계산
    calcDayCnt() {
      if (!this.bsrpInfo.bgnde || !this.bsrpInfo.endde) {
        this.totalDays = 0;
        return;
      }

      const startDate = new Date(this.bsrpInfo.bgnde);
      const endDate = new Date(this.bsrpInfo.endde);

      if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
        this.totalDays = 0;
        return;
      }

      const timeDiff = endDate.getTime() - startDate.getTime();
      const dayDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24)) + 1;

      this.totalDays = Math.max(0, dayDiff);
    },

    // 동행자 추가
    fnAddNmpr(user) {
      const data = {
        triperId: user.userId,  // 출장자 아이디
        deptId: user.deptId,    // 부서 아이디
        clsf: user.clsf,        // 직급

        triperNm: user.userNm,  // 출장자 이름
        deptNm: user.deptNm,    // 부서 이름
        clsfNm: user.clsfNm,    // 직급 이름
      };

      this.bsrpInfo.bsrpNmprList.push(data);
      this.isOpenNmprModal = false;
    },

    // 동행자 삭제
    fnDelNmpr(idx) {
      this.bsrpInfo.bsrpNmprList.splice(idx, 1);
    },

    // 승인자 추가
    fnAddSanctn(user) {
      const data = {
        sanctnId: null,                                   // 결재 아이디
        confmerId: user.userId,                           // 승인자 아이디
        clsf: user.clsf,                                  // 직급
        sanctnOrdr: this.bsrpCnsul.sanctnList.length + 1, // 결재 순서
        sanctnIem: 'cnsul',                               // 결재 항목
        sanctnMbyId: null,                                // 결재 주체 아이디
        sanctnSe: this.cmmnCodes.sanctnCodeList[0].code,  // 결재구분

        confmerNm: user.userNm,                           // 승인자 이름
        clsfNm: user.clsfNm,                              // 직급 이름
      };

      this.bsrpCnsul.sanctnList.push(data);
      this.isOpenSanctnModal = false;
    },

    // 승인자 삭제
    fnDelSanctn(idx) {
      this.bsrpInfo.sanctnList.splice(idx, 1);
      this.bsrpInfo.sanctnList.forEach((item, idx) => { item.sanctnOrdr = idx + 1; });
    },

    // 법인카드 추가
    fnAddCard(item) {
      this.cprCardList.push(item);
      this.isOpenCardModal = false;
    },

    // 법인카드 삭제
    fnDelCard(idx) {
      this.cprCardList.splice(idx, 1);
    },

    // 법인차량 추가
    fnAddVhcle(item) {
      item.drverId = '';
      this.cprVhcleList.push(item);
      this.isOpenVhcleModal = false;
    },

    // 법인차량 삭제
    fnDelVhcle(idx) {
      this.cprVhcleList.splice(idx, 1);
    },

    // 유효성 검사
    validateForm() {
      if (this.$isEmpty(this.bsrpInfo.bsrpSe)) {
        return false;
      }
      if (this.$isEmpty(this.bsrpInfo.bsrpPlace)) {
        return false;
      }
      if (this.$isEmpty(this.bsrpInfo.bsrpPurps)) {
        return false;
      }
      if (this.$isEmpty(this.bsrpInfo.bgnde) || this.$isEmpty(this.bsrpInfo.beginHour) || this.$isEmpty(this.bsrpInfo.beginMnt)) {
        return false;
      }
      if (this.$isEmpty(this.bsrpInfo.endde) || this.$isEmpty(this.bsrpInfo.endHour) || this.$isEmpty(this.bsrpInfo.endMnt)) {
        return false;
      }
      if (this.$isEmpty(this.bsrpInfo.bsrpNmprList) || this.bsrpInfo.bsrpNmprList.length === 0) {
        return false;
      }
      if (this.$isEmpty(this.bsrpCnsul.cn)) {
        return false;
      }

      return true;
    },

    // 신청
    async fnSave() {
      try {
        if (!this.validateForm()) {
          return;
        }

        let data = {
          bsrpCnsulInsertDTO: this.bsrpCnsul,
          cardDtlsList: this.cprCardList,
          vhcleDtlsList: this.cprVhcleList,
        }
        if (this.$isEmpty(this.pageId)) {
          data.bsrpInfoInsertDTO = this.bsrpInfo;
        } else {
          data.bsrpInfoUpdateDTO = this.bsrpInfo;
        }

        const response = this.$isEmpty(this.pageId) ? await saveBsrpProc(data) : await updateBsrpProc(data);
        const message = this.$isEmpty(this.pageId) ? "등록되었습니다." : "수정되었습니다.";
        alert(message);

        this.fnMoveTo('view', response.data.data.pageId);
      } catch (error) {
        console.error('저장 실패:', error);
        const message = error.response?.data?.message || "저장에 실패했습니다.";
        alert(message);
      }
    },

    fnMoveTo(type, id) {
      const routes = {
        'list': { name: 'ChuljangStatue' },
        'view': { name: 'ChuljangDetailAll', query: { id } },
        'edit': { name: 'ChuljangInsert', query: this.$isEmpty(id) ? {} : { id } },
      };

      if (routes[type]) {
        if (!this.$isEmpty(this.pageId) && type === 'list') {
          this.$router.push({ name: 'ChuljangDetailAll', query: { id: this.pageId } });
          return;
        }
        this.$router.push(routes[type]);
      } else {
        alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");
        this.$router.push(routes['list']);
      }
    },
  },
};
</script>