<template>
  <div class="content">
    <div class="admin-page-title mb30">
      <p>기술문서</p>
    </div>
    <div class="full-page">
      <div class="flex content">
        <div class="gd-3 pl0">
          <div class="tree-zone content pd15">
            <div class="border-b mb10 pb10">
              <p class="detail-bold">버전정보</p>
            </div>
            <div class="box pd15 mb10">
              <p class="detail-text">현재버전</p>
              <p class="detail-bold blue">{{ currentVer }}</p>
            </div>
            <div class="mb10">
              <p class="detail-text">버전 목록</p>
            </div>
            <div class="tec-tree conten">
              <div class="content overflow-y">
                <ul>
                  <li :class="{'mb10 radius pd10 cursor':true, 'selected': selectedIndex === idx}" style="background-color: var(--white);" v-for="(techDoc, idx) in techDocVerList" :key="idx" @click="viewTechDoc(idx,techDoc)">{{ techDoc.techDoc.bbsVerNo }}</li>
                </ul>
                <!-- <draggable tag="ul" class="tree-node" :list="codeList" :group="{ name: 'menu' }" item-key="id"
                  handle=".handle" ghost-class="ghost">
                  <template #item="{ element }">
                    <Hierachy :tasks="element" :icon="iconPath" :selectedNode="selectedCd"
                      @changeSelected="fnViewDetail" />
                  </template>
                </draggable> -->
              </div>
            </div>
            <div class="btn-zone pt15">
              <button class="large-btn blue-border-btn" v-if="editMode == 'update'" @click="fnVarSave">
                버전추가
              </button>
            </div>
          </div>
        </div>
        <div class="gd-9 pr0 content overflow-y">
          <div class="content">
            <table class="form-table">
              <colgroup>
                <col width="50%" />
                <col width="50%" />
              </colgroup>
              <tr>
                <td>
                  <div class="gd-12 pl0">
                    <label for="" class="form-title mb10">기술문서명</label>
                    <input type="text" class="full-input" id="techDocNm" v-model="techDoc.techDocNm" :disabled="editMode === 'update'"/>
                  </div>
                </td>
                <td>
                  <div class="gd-12 pl0">
                    <label for="" class="form-title point-font2 mb10">
                      카테고리
                    </label>
                    <select name="" id="techDocCtgryCd" class="full-select ml0" v-model="techDoc.techDocCtgryCd" :disabled="editMode === 'update'">
                        <option :value=null disabled>선택하세요</option>
                        <option v-for="(ctgryCd, idx) in ctgryCdList" :key="idx" :value=ctgryCd.cdId>
                          {{ ctgryCd.cdNm }}</option>
                    </select>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="gd-12 pl0">
                    <label for="" class="form-title mb10" >버전</label>
                    <input type="text" class="full-input" id="bbsVerNo" v-model="techDoc.bbsVerNo"/>
                  </div>
                </td>
                <td>
                  <div class="gd-12 pl0">
                    <label for="" class="form-title mb10">버전명</label>
                    <input type="text" class="full-input" id="bbsTtl" v-model="techDoc.bbsTtl"/>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="gd-12 pl0">
                    <label for="" class="form-title mb10">문서번호</label>
                    <input type="text" class="full-input" id="bbsDocNo" v-model="techDoc.bbsDocNo"/>
                  </div>
                </td>
                <td>
                  <div class="gd-12 pl0">
                    <label for="" class="form-title mb10">키워드</label><p>키워드간의 구분은 쉼표로 할 수 있습니다</p>
                    <input type="text" class="full-input" id="bbsKywdNm" v-model="techDoc.bbsKywdNm"/>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="gd-12 pl0">
                    <label for="" class="form-title mb10">배포날짜</label>
                    <input type="date" class="full-input" id="bbsCrltnDt" v-model="techDoc.bbsCrltnDt"/>
                  </div>
                </td>
                <td>
                  <div class="gd-12 pr0">
                    <label for="" class="form-title mb10">버전공개여부</label>
                    <div class="flex align-center no-gutters" style="height: 4rem;">
                      <div class="gd-4">
                        <input type="radio" name="code" id="y" class="mr5" value="Y" v-model="rlsYn" :disabled="editMode === 'create'">
                        <label for="y">공개</label>
                      </div>
                      <div class="gd-4">
                        <input type="radio" name="code" id="n" class="mr5" value="N" v-model="rlsYn" :disabled="editMode === 'create'"/>
                        <label for="n">비공개</label>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <div class="gd-12 pl0">
                    <label for="" class="form-title mb10">주요내용</label>
                    <input type="text" class="full-input" id="bbsMainCn" v-model="techDoc.bbsMainCn"/>
                  </div>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <div class="gd-12 pl0">
                    <label for="" class="form-title mb10">내용</label>
                    <textarea name="smart" id="smart"  style="width:100%; height: 35rem;"></textarea>
                  </div>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <div class="gd-12 pr0">
                    <label for="" class="form-title mb10">표지이미지</label>
                    <div class="flex align-center">
                      <div class="gd-2 pl0 pr0">
                        <label for="thumbnail" class="large-btn blue-border-btn text-ct">파일찾기</label>
                        <input type="file" id="thumbnail" ref="thumbnail" @change="fnThumbnailInsert" accept="image/*">
                      </div>
                      <div class="gd-12 pl0">
                        <div>
                          <ul v-if="imgFileList.length > 0" style="max-height: 20rem;" class="pt10 pb10 overflow-y">
                            <li v-for="(file, index) in imgFileList" :key="index" class="pl10 pr10 border radius">
                              <div v-if="file.fileId != null" class="flex justify-between align-center">
                                <p>{{ file.fileNm }}.{{ file.extnNm }}</p>
                                <button class="icon-btn" @click="fnImgFileDelete(file, index)">X</button>
                              </div>
                              <div v-else class="flex justify-between align-center">
                                <p>{{ file.name }}</p>
                                <button class="icon-btn" @click="fnImgFileDelete(file, index)">X</button>
                              </div>
                            </li>
                          </ul>
                        </div>
                      </div>

                    </div>
                  </div>
                </td>
              </tr>
              <tr class="border-t">
                <td colspan="2">
                  <div class="gd-12 pr0">
                    <label for="" class="form-title mb10">첨부파일</label>
                    <div class="flex align-center">
                      <div class="gd-2 pl0 pr0">
                        <label for="file" class="large-btn blue-border-btn text-ct">파일찾기</label>
                        <input type="file" id="file" ref="file" @change="fnFileInsert" multiple>
                      </div>
                      <div class="gd-12 pl0">
                        <div>
                          <ul v-if="fileList.length > 0" style="max-height: 20rem;" class="pt10 pb10 overflow-y">
                            <li v-for="(file, idx) in fileList" :key="idx" class="pl10 pr10 border radius">
                              <div v-if="file.fileId != null" class="flex justify-between align-center">
                                <p> {{ file.fileNm }}.{{ file.extnNm }}</p>
                                <button class="icon-btn" @click="fnFileDelete(file, idx)">X</button>
                              </div>
                              <div v-else class="flex justify-between align-center">
                                {{ file.name }}
                                <button class="icon-btn" @click="fnFileDelete(file, idx)">X</button>
                              </div>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
            </table>
            <div class="flex justify-end pt15" >
              <div class="gd-1 pr0">
                <button class="large-btn gray-border-btn" @click="fnList">
                  목록
                </button>
              </div>
              <div class="gd-1 pr0" v-if="editMode === 'update'">
                <button class="large-btn red-border-btn"  @click="verDelete">
                  삭제
                </button>
              </div>
              <div class="gd-1 pr0">
                <button class="large-btn blue-border-btn" v-if="editMode === 'create'"  @click="save">
                  등록
                </button>
                <button class="large-btn blue-border-btn" v-else-if="!isVerSave && editMode === 'update'" @click="verUpdate">
                  수정
                </button>
                <button class="large-btn blue-border-btn" v-else @click="verSave">
                  버전등록
                </button>
              </div>
              <!-- <div class="gd-1 pr0" v-else>
                <button class="large-btn blue-border-btn" v-if="!isVerSave" @click="verUpdate">
                  수정
                </button>
                <button class="large-btn blue-border-btn" v-else @click="verSave">
                  버전등록
                </button>
              </div>
              <div class="gd-1 pr0">
                <button class="large-btn red-border-btn" v-if="editMode === 'update'" @click="verDelete">
                  삭제
                </button>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import Hierachy from "../../../../component/hierachy/HierachyDraggable.vue";
import { mdiConsoleNetwork, mdiFileCode } from "@mdi/js";
import { findAllVer, findByVer, verDelete } from "../../../../../resources/api/techDoc.js"
import axios from "axios";
export default {
  components: {
    draggable: draggable,
    Hierachy: Hierachy,
  },
  data() {
    return {
      // 페이지 권한 객체
      pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth,

      // id
      pageId: this.$route.query.pageId,

      //path
      path: this.$store.state.path,

      // 글 작성 모드
      // create - 등록 (기본)
      // update - 수정
      editMode: "create",

      // 상세조회 정보 담는 객체
      techDoc: {
        techDocId: this.pageId,
        techDocNm: null,
        techDocCtgryCd: null,
        rlsTechDocId: null,
        bbsId: null,
        bbsTtl: null,
        bbsCn: null,
        fileMngId: null,
        bbsVerNo: null,
        bbsDocNo: null,
        imgFileMngId: null,
        bbsMainCn: null,
        bbsKywdNm: null,
        bbsCrltnDt: null
      },

      //카테고리 리스트
      ctgryCdList: [],
      
      //현재 버전
      currentVer:null,

      //공개여부
      rlsYn: 'Y',

      //버전추가 모드
      isVerSave: false,

      //파일
      imgFileList: [],
      fileList: [],
      deleteImgFileList: [],
      deleteFileList: [],

      //버전 리스트
      techDocVerList: [],

      //에디터
      oEditors: [],

      selectedIndex: null // 선택된 인덱스
    };
  },
  created() {
    // pageId 확인
    if (this.pageId != null) {
      this.editMode = "update";
      this.findAllVer();
    }
    this.findAllCtgry();
    
  },
  methods: {
    fnList() {
      if(!confirm("목록으로 돌아가시겠습니까? 작성중인 내용이 있으면 초기화 됩니다. ")) return
      this.$router.push({
          path: this.path + '/list.page'
      });
    },

    //버전추가 모드로 변경
    fnVarSave() {
      let docNm = this.techDoc.techDocNm;
      let docCtgrycd = this.techDoc.techDocCtgryCd;

      this.techDoc = {
          techDocId: this.pageId,
          techDocNm: null,
          techDocCtgryCd: null,
          rlsTechDocId: null,
          bbsId: null,
          bbsTtl: null,
          bbsCn: null,
          fileMngId: null,
          bbsVerNo: null,
          bbsDocNo: null,
          imgFileMngId: null,
          bbsMainCn: null,
          bbsKywdNm: null,
          bbsCrltnDt: null
      }
      this.techDoc.techDocNm = docNm;
      this.techDoc.techDocCtgryCd = docCtgrycd;
        // this.techDoc.techDocId= this.pageId
        // // this.techDoctechDocNm= null,
        // // this.techDoctechDocCtgryCd= null,
        // this.techDoc.rlsTechDocId= null
        // this.techDoc.bbsId= null
        // this.techDoc.bbsTtl= null
        // this.techDoc.bbsCn= null
        // this.techDoc.fileMngId= null
        // this.techDoc.bbsVerNo= null
        // this.techDoc.bbsDocNo= null
        // this.techDoc.imgFileMngId= null
        // this.techDoc.bbsMainCn= null
        // this.techDoc.bbsKywdNm= null
        // this.techDoc.bbsCrltnDt= null

      this.imgFileList = [];
      this.fileList = [];
      this.deleteImgFileList = [];
      this.deleteFileList = [];
      this.rlsYn = 'N';
      this.oEditors.getById["smart"].exec("SET_IR", [""]); //내용초기화
      if(this.editMode === 'update') document.getElementById("bbsVerNo").focus();
      else document.getElementById("techDocNm").focus();
      this.isVerSave = true;
      
    },

    //카테고리 리스트 불러오기
    async findAllCtgry() {
      this.ctgryCdList = await this.$getCommonCode('techDocCtgryCd');
    },

    //선택 버전 보여주기
    viewTechDoc(idx,techDoc) {
      this.selectedIndex = idx;
      this.techDoc = techDoc.techDoc;
      this.techDoc.bbsCrltnDt = this.$yyyymmdd(this.techDoc.bbsCrltnDt);
      this.isVerSave = false;
      this.oEditors.getById["smart"].exec("SET_IR", [techDoc.techDoc.bbsCn]);
      document.getElementById("bbsVerNo").focus();
      document.getElementById("bbsVerNo").blur();
      if(this.currentVer === this.techDoc.bbsVerNo) this.rlsYn = 'Y'
      else this.rlsYn = 'N'
      
      this.imgFileList = techDoc.imgFileList;
      this.fileList = techDoc.fileList;
      this.deleteImgFileList = [];
      this.deleteFileList = [];
    },

    //기술 문서 버전 리스트 목록 조회
    async findAllVer() {
      // 데이터 세팅
      const data = { techDocId: this.pageId };
      try {
          const response = await findAllVer(data);

          this.techDocVerList = response.data.data.list;
          this.techDoc = response.data.data.techDocMap.techDoc;
          this.imgFileList = response.data.data.techDocMap.imgFileList;
          this.fileList = response.data.data.techDocMap.fileList;
          this.techDoc.bbsCrltnDt = this.$yyyymmdd(this.techDoc.bbsCrltnDt);
          
          if(this.oEditors.length === 0) {
            this.initEditor(this.techDoc.bbsCn);
          } else {
            // this.oEditors.getById["smart"].exec("SET_IR", [""]); //내용초기화
            this.oEditors.getById["smart"].exec("SET_IR", [this.techDoc.bbsCn]);
            document.getElementById("bbsVerNo").focus();
            document.getElementById("bbsVerNo").blur();
          }
          
          this.currentVer = this.techDoc.bbsVerNo
      } catch (error) {
          const errorData = error.response.data;
          if (errorData.message != null && errorData.message != "") {
            alert(error.response.data.message); 
          } else {
            // alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
            alert(this.$getCmmnMessage('err005'));
          }
      }
    },

    //기술 문서 버전 상세 조회
    async findByVer() {
      // 데이터 세팅
      const data = { techDocId: this.pageId };
      try {
          const response = await findByVer();

          this.techDoc = response.data.data;

      } catch (error) {
          const errorData = error.response.data;
          if (errorData.message != null && errorData.message != "") {
            alert(error.response.data.message);
          } else {
            // alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
            alert(this.$getCmmnMessage('err005'));
          }
      }
    },

    //기술 문서 등록
    save() {
      const vm = this;
      if (!vm.Validation()) return;
      if (!confirm(vm.$getCmmnMessage('cnf003'))) return;

      vm.techDoc.rlsTechDocId = 'Y'

      let formData = new FormData();
      for (const file of vm.fileList) {
          formData.append('file', file);
      }
      for (const imgFile of vm.imgFileList) {
          formData.append('imgFile', imgFile);
      }
      const techDoc = new Blob([JSON.stringify(vm.techDoc)], {
                type: "application/json; charset=UTF-8",
            });
      formData.append("techDocVerVO", techDoc);

      axios({
          url: '/techDoc/save.file',
          method: 'post',
          headers: {
              'Content-Type': 'multipart/form-data',
              Authorization: vm.$store.state.authorization,
          },
          data: formData
      }).then(function (response) {
          if (response.status === 200) {
            alert(vm.$getCmmnMessage('msg001'));
            vm.$router.push({
              path: vm.path + '/view.page', query: { 'pageId' : response.data.data.bbsId }
            });
          } else {
              alert("문의 등록 중 오류가 발생하였습니다.\n담당자에게 문의하세요.");
          }
      }).catch(function (error) {
          console.log('error-',error)
          alert("문의 등록 중 오류가 발생하였습니다.\n담당자에게 문의하세요.");
      });
    },

    //기술 문서 버전 등록
    async verSave() {
      const vm = this;
      if (!vm.Validation()) return;
      
      if(vm.rlsYn === 'Y') {
        if (!confirm("현재버전은 " + vm.currentVer + " 입니다. 버전을 " + vm.techDoc.bbsVerNo + " (으)로 변경하시겠습니까?")) {
          return;
        } else {
          vm.techDoc.rlsTechDocId = 'Y'
        }
      } else {
        if (!confirm(vm.$getCmmnMessage('cnf003'))) return;
        vm.techDoc.rlsTechDocId = 'N'
      }

      let formData = new FormData();
      for (const file of vm.fileList) {
          formData.append('file', file);
      }
      for (const imgFile of vm.imgFileList) {
          formData.append('imgFile', imgFile);
      }
      const techDoc = new Blob([JSON.stringify(vm.techDoc)], {
                type: "application/json; charset=UTF-8",
            });
      formData.append("techDocVerVO", techDoc);

      axios({
          url: '/techDoc/verSave.file',
          method: 'post',
          headers: {
              'Content-Type': 'multipart/form-data',
              Authorization: vm.$store.state.authorization,
          },
          data: formData
      }).then(function (response) {
          if (response.status === 200) {
              alert(vm.$getCmmnMessage('msg001'));
              vm.findAllVer();
          } else {
              alert("문의 등록 중 오류가 발생하였습니다.\n담당자에게 문의하세요.");
          }
      }).catch(function (error) {
          console.log('error-',error)
          alert("문의 등록 중 오류가 발생하였습니다.\n담당자에게 문의하세요.");
      });
    },

    //기술 문서 버전 수정
    async verUpdate() {
      if (!this.Validation()) return;
      if (this.rlsYn === 'Y' && this.currentVer != this.techDoc.bbsVerNo) {
        if (!confirm("현재버전은 " + this.currentVer + " 입니다. 버전을 " + this.techDoc.bbsVerNo + " (으)로 변경하시겠습니까?")) {
          return;
        } else {
          this.techDoc.rlsTechDocId = 'Y'
        }
      } else if(this.rlsYn === 'N' && this.currentVer === this.techDoc.bbsVerNo) {
        alert("해당 기술문서의 공개버전입니다. 다른 버전으로 변경 후 공개여부를 수정해 주세요.")
        this.rlsYn = 'Y' 
        return;
      } else {
        if(!confirm(this.$getCmmnMessage('cnf004'))) return;
        this.techDoc.rlsTechDocId = 'N'
      }

      var formData = new FormData();
      const techDoc = new Blob([JSON.stringify(this.techDoc)], {
          type: "application/json; charset=UTF-8",
      });
      formData.append("techDocVerVO", techDoc);

      const deleteFileList = new Blob(
        [JSON.stringify(this.deleteFileList)],
        {
            type: "application/json; charset=UTF-8",
        }
      );
      formData.append("deleteFileList", deleteFileList);

      // 추가 첨부파일
      for (const file of this.fileList) {
        if (file.fileId == null) {
            formData.append("file", file);
        }
      }
      // 이미지 파일
      const deleteImgFileList = new Blob(
        [JSON.stringify(this.deleteImgFileList)],
        {
            type: "application/json; charset=UTF-8",
        }
      );
      formData.append("deleteImgFileList", deleteImgFileList);
      
      for (const imgFile of this.imgFileList) {
        if (imgFile.fileId == null) {
          formData.append("imgFile", imgFile);
        }
      }
      // axios 호출
      axios({
          url: "/techDoc/verUpdate.file",
          method: "post",
          headers: {
              "Content-Type": "multipart/form-data; charset=UTF-8",
              Authorization: this.$store.state.authorization,
          },
          data: formData,
      }).then((response) => {
        if (response.status === 200) {
              alert(this.$getCmmnMessage('msg002'));
              if(this.rlsYn === 'Y') this.findAllVer();
              else this.viewTechDoc(this.selectedIndex,response.data.data);
          } else {
              alert("문의 등록 중 오류가 발생하였습니다.\n담당자에게 문의하세요.");
          }
      }).catch((error) => {
        console.log('error', error);
        // alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
        alert(this.$getCmmnMessage('err005'));
      });
    },

    // 버전 삭제
    async verDelete() {
      if (this.currentVer === this.techDoc.bbsVerNo) {
        alert("해당 기술문서의 공개버전입니다. 다른 버전으로 변경 후 삭제해 주세요.")
        return
      } else {
        if (!confirm(this.$getCmmnMessage("cnf002"))) return
      }

      // 데이터 세팅
      const data = this.techDoc;
      try {
          const response = await verDelete(data);
          alert(this.$getCmmnMessage('msg003'));
          this.findAllVer();
      } catch (error) {
          console.log(error)
          const errorData = error.response.data;
          if (errorData.message != null && errorData.message != "") {
              alert(error.response.data.message);
          } else {
              // alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
              alert(this.$getCmmnMessage('err005'));
          }
      }
    },

    // 썸네일 등록
    fnThumbnailInsert(event) {
      const file = event.target.files[0];
      if (file && file.type.startsWith('image/')) {
          if (this.imgFileList.length > 0) {
              if (this.imgFileList[0].fileId != null) {
                  this.deleteImgFileList.push(this.imgFileList[0]);                
              }

          }
          this.imgFileList[0] = file;         
      } else {
          // 이미지 파일이 아닐 경우, 사용자에게 경고
          alert('이미지 파일만 등록할 수 있습니다.');
      }
    },

    // 썸네일 삭제
    fnImgFileDelete(file, index) {
      if (file.fileId != null) {
          this.deleteImgFileList.push(file);       
      }
      this.imgFileList = [];
    },

    // 첨부파일 등록
    fnFileInsert(event) {
      // 위험한 파일 확장자 목록
      const dangerousExtensions = ['exe', 'bat', 'sh', 'cmd', 'js', 'html', 'htm', 'php', 'py', 'pl', 'rb'];
      const file = event.target.files[0];

      if(file) {
        const fileExtension = file.name.split('.').pop().toLowerCase();

        // 파일 확장자가 위험한지 확인
        if (dangerousExtensions.includes(fileExtension)) {
            alert('이 파일 형식은 업로드할 수 없습니다.');
            return;
        } else {
          if (this.fileList.length > 0) {
            if (this.fileList[0].fileId != null) {
                this.deleteFileList.push(this.fileList[0]);
            }
          }
          this.fileList[0] = file;
        }
      } else {
        alert("첨부파일 등록 중 오류가 발생 하였습니다. 다시 시도해주세요.")
      }
    },

    // 첨부파일 삭제
    fnFileDelete(file, index) {
      if (file.fileId != null) {
          this.deleteFileList.push(file);
      }
      this.fileList.splice(index, 1);
    },

    Validation() {
      const vm = this;

      if(!vm.isVerSave) {
        // 기술문서명 빈값
        vm.techDoc.techDocNm = vm.techDoc.techDocNm ? vm.techDoc.techDocNm.trim() : null
        if (vm.$isEmpty(vm.techDoc.techDocNm)) {
          alert("기술문서명을 입력하세요.")
          document.getElementById("techDocNm").focus();
          return false;
        }
      }
      
      if(!vm.isVerSave) {
        // 카테고리 빈값
        if (vm.$isEmpty(vm.techDoc.techDocCtgryCd)) {
          alert("카테고리를 선택하세요.")
          document.getElementById("techDocCtgryCd").focus();
          return false;
        }
      }
      
      // 버전 빈값
      vm.techDoc.bbsVerNo = vm.techDoc.bbsVerNo ? vm.techDoc.bbsVerNo.trim() : null
      if (vm.$isEmpty(vm.techDoc.bbsVerNo)) {
        alert("버전을 입력하세요.")
        document.getElementById("bbsVerNo").focus();
        return false;
      }

      // 버전명명 빈값
      vm.techDoc.bbsTtl = vm.techDoc.bbsTtl ? vm.techDoc.bbsTtl.trim() : null
      if (vm.$isEmpty(vm.techDoc.bbsTtl)) {
        alert("버전명을 입력하세요.")
        document.getElementById("bbsTtl").focus();
        return false;
      }

      // 문서번호 빈값
      vm.techDoc.bbsDocNo = vm.techDoc.bbsDocNo ? vm.techDoc.bbsDocNo.trim() : null
      if (vm.$isEmpty(vm.techDoc.bbsDocNo)) {
        alert("문서번호를 입력하세요.")
        document.getElementById("bbsDocNo").focus();
        return false;
      }

      // 키워드 빈값
      vm.techDoc.bbsKywdNm = vm.techDoc.bbsKywdNm ? vm.techDoc.bbsKywdNm.trim() : null
      if (vm.$isEmpty(vm.techDoc.bbsKywdNm)) {
        alert("키워드를 입력하세요.")
        document.getElementById("bbsKywdNm").focus();
        return false;
      }

      // 배포날짜 빈값
      vm.techDoc.bbsCrltnDt = vm.techDoc.bbsCrltnDt ? vm.techDoc.bbsCrltnDt.trim() : null
      if (vm.$isEmpty(vm.techDoc.bbsCrltnDt)) {
        alert("배포날짜를 선택하세요.")
        document.getElementById("bbsCrltnDt").focus();
        return false;
      }

      // 버전공개여부 빈값
      if(vm.editMode === 'update') {
        if (vm.$isEmpty(vm.rlsYn)) {
          alert("배포날짜를 선택하세요.")
          document.getElementById("y").focus();
          return false;
        }
      }

      // 주요내용 빈값
      vm.techDoc.bbsMainCn = vm.techDoc.bbsMainCn ? vm.techDoc.bbsMainCn.trim() : null
      if (vm.$isEmpty(vm.techDoc.bbsMainCn)) {
        alert("주요내용을 입력하세요.")
        document.getElementById("bbsMainCn").focus();
        return false;
      }

      const oEditors = vm.oEditors;
      oEditors.getById['smart'].exec("UPDATE_CONTENTS_FIELD", []);
      // 스마트에디터의 iframe에 있는 내용을 textarea로. 
      vm.techDoc.bbsCn = document.getElementById('smart').value;
      //2.내용 null검사
      if (vm.$isEmpty(vm.techDoc.bbsCn) || vm.removeHtmlAndSpace(vm.techDoc.bbsCn) === '') {
        alert("내용을 입력하세요.")
        oEditors.getById['smart'].exec("FOCUS");
        return false;
      }

      //내용 길이 검사
      if (vm.techDoc.bbsCn > 5000) {
        alert("내용은 5000자 까지 입력할 수 있습니다.")
        oEditors.getById['smart'].exec("FOCUS");
        return false;
      }

      //표지이미지 검사
      if (!vm.imgFileList.length > 0) {
        alert("표지이미지를 등록하세요.")
        document.getElementById("thumbnail").focus();
        return false;
      }

      //표지이미지 검사
      if (!vm.fileList.length > 0) {
        alert("첨부파일을 등록하세요.")
        document.getElementById("file").focus();
        return false;
      }
      return true;
    },

    //에디터 html 삭제
    removeHtmlAndSpace: function (str) {
      return str.replace(/<[^>]*>/g, '') // HTML 태그 제거
          .replace(/&nbsp;/gi, ' ') // &nbsp;를 공백으로 변환
          .replace(/\s/g, ''); // 모든 공백 제거
    },

    // 에디터 만들기 
    initEditor: function (initData) {
      // 스마트 에디터 적용
      const oEditors = this.oEditors;
      nhn.husky.EZCreator.createInIFrame({
          oAppRef: oEditors,
          elPlaceHolder: "smart",
          sSkinURI: "/client/smarteditor2-2.8.2.3/SmartEditor2Skin.html",
          htParams: {
              bSkipXssFilter: true,
              bUseVerticalResizer: true,
              bUseModeChanger: true
          },
          fOnAppLoad: function () {
              oEditors.getById["smart"].exec("SET_IR", [initData]);
          },
          fCreator: "createSEditor2"
      });
    },
  },
  watch: {},
  computed: {

  },
  mounted() {
    if(this.editMode === 'create') {
      const oEditors = this.oEditors;
      nhn.husky.EZCreator.createInIFrame({
          oAppRef: oEditors,
          elPlaceHolder: "smart",
          sSkinURI: "/client/smarteditor2-2.8.2.3/SmartEditor2Skin.html",
          htParams: {
              bUseToolbar: true,				// 툴바 사용 여부 (true:사용/ false:사용하지 않음)
              bSkipXssFilter: true,
              bUseVerticalResizer: true,
              bUseModeChanger: true
          },
          fCreator: "createSEditor2"
      });
    } 
  },
};
</script>

<style scoped>
.ghost {
  height: 15px;
  color: transparent;
  border: 1px dashed var(--blue);
}

.ghost * {
  display: none;
}
</style>