<template>
  <div class="consulting-page content-page">
    <div class="content pt50 pb50">
      <div class=" w1400">
        <div class="page-title point-font mb10">
          <p>온라인상담신청</p>
        </div>
        <div>
          <p class="essential text-rg"><span class="mr10">*</span>필수입력</p>
        </div>
        <table class="form-table mb30">
          <colgroup>
            <col width="10%" />
            <col width="40%" />
            <col width="10%" />
            <col width="40%" />
          </colgroup>
          <tbody>
            <tr>
              <th class="point-font">
                <span>기업명</span>
              </th>
              <td>
                <input
                  type="text"
                  class="full-input"
                  ref="entNm"
                  v-model="entDscsnAplyVO['entNm']"
                  placeholder="기업명을 입력하세요."
                />
              </td>
              <th class="point-font">
                <span>성명</span>
              </th>
              <td>
                <input
                  type="text"
                  class="full-input"
                  ref="aplcntNm"
                  v-model="entDscsnAplyVO['aplcntNm']"
                  placeholder="성명을 입력하세요."
                />
              </td>
            </tr>
            <tr>
              <th class="point-font">
                <span>연락처</span>
              </th>
              <td>
                <input
                  type="text"
                  class="full-input"
                  ref="telno"
                  v-model="entDscsnAplyVO['telno']"
                  oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
                  minlength="10"
                  maxlength="11"
                  placeholder="연락 가능한 휴대폰 번호를 입력하세요.(숫자만)"
                />
              </td>
              <th class="point-font">
                <span>이메일</span>
              </th>
              <td>
                <input
                  type="text"
                  class="full-input"
                  ref="eml"
                  v-model="entDscsnAplyVO['eml']"
                  placeholder="이메일을 입력하세요."
                />
              </td>
            </tr>
            <tr class="border-top">
              <th colspan="4" class="text-lf point-font">
                <span>내용</span>
              </th>
            </tr>
            <tr>
              <td colspan="4">
                <textarea
                  name=""
                  id=""
                  class="content"
                  ref="aplyCn"
                  v-model="entDscsnAplyVO['aplyCn']"
                  placeholder="내용을 입력하세요."
                />
              </td>
            </tr>
            <tr class="border-top">
              <td colspan="4">
                <div class="gd-12 pl0 pr0">
                  <label class="mb10 point-font">첨부파일</label>
                  <div class="flex">
                    <div class="gd-10 pl0">
                      <div class="filebox">
                        <input
                          class="upload-name full-input"
                          v-model="viewFiles"
                          placeholder="첨부파일이 없습니다."
                          readonly
                        />
                      </div>
                      <div>
                        <div
                          v-for="(file, index) of fileList"
                          :key="index"
                          class="file-wrap flex justify-between align-center border pd10 mt10"
                        >
                          <p v-if="file['fileId'] != null">
                            {{ file.fileNm }}.{{ file.extnNm }}
                          </p>
                          <p v-else>{{ file.name }}</p>
                          <button
                            class="icon-btn pd0"
                            @click="fnFileDelete(file, index)"
                          >
                            <svg-icon
                              type="mdi"
                              :width="15"
                              :height="15"
                              :path="path"
                            />
                          </button>
                        </div>
                      </div>
                    </div>
                    <div class="gd-2 pr0">
                      <label
                        for="file"
                        class="large-btn text-ct cursor green-border-btn"
                      >
                        파일찾기
                      </label>
                      <input
                        type="file"
                        id="file"
                        ref="file"
                        @change="fnFileInsert"
                        multiple
                        style="display: none"
                      />
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="flex justify-end no-gutters">
          <div class="gd-2">
            <button class="large-btn green-btn point-font" @click="fnInsert">
              상담신청
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import defaultAxios from "../../../../../resources/js/defaultAxios";
import defaultFileSystem from "../../../../../resources/js/defaultFileSystem";
// API
import { entDscsnAplyDetailProc } from "../../../../../resources/api/entDscsnAply";
export default {
  mixins: [defaultFileSystem],
  data() {
    return {
      entDscsnAplyVO: {},
    };
  },
  created() {
    this.fnViewDetail();
  },
  methods: {
    // axios: 조회(상세)
    async fnViewDetail() {
      // 데이터 세팅
      const data = { entDscsnAplyId: null };
      // 실행
      try {
        const response = await entDscsnAplyDetailProc(data);
        this.entDscsnAplyVO = response.data.data;
      } catch (error) {
        alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
      }
    },

    // 상담신청
    fnInsert() {
      // 유효성 검사
      if (this.valiadtion() == false) {
        return;
      }
      // 데이터 세팅
      let data = this.entDscsnAplyVO;
      data.insertFileList = this.insertFileList;
      data.deleteFileList = this.deleteFileList;
      // 실행
      defaultAxios({
        url: "/sys/entDscsnAply/insertProc.file",
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data; charset=UTF-8",
          Authorization: this.$store.state.authorization,
        },
        data: data,
      })
        .then((response) => {
          alert(response.data["message"]);
          this.fnViewDetail();
          this.viewFiles = null;
          this.fileList = [];
          this.insertFileList = [];
          this.deleteFileList = [];
        })
        .catch((error) => {
          const errorData = error.response.data;
          if (errorData.message != null && errorData.message != "") {
            alert(error.response.data.message);
          } else {
            alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
          }
        });
    },
    // 유효성 검사
    valiadtion() {
      if (
        this.entDscsnAplyVO["entNm"] == null ||
        this.entDscsnAplyVO["entNm"] == ""
      ) {
        alert("기업명을 입력해주세요.");
        this.$refs.entNm.focus();
        return false;
      }

      if (
        this.entDscsnAplyVO["aplcntNm"] == null ||
        this.entDscsnAplyVO["aplcntNm"] == ""
      ) {
        alert("성명을 입력해주세요.");
        this.$refs.aplcntNm.focus();
        return false;
      }

      if (
        this.entDscsnAplyVO["telno"] == null ||
        this.entDscsnAplyVO["telno"] == ""
      ) {
        alert("연락처를 입력해주세요.");
        this.$refs.telno.focus();
        return false;
      } else if (
        this.entDscsnAplyVO["telno"].length < 7 ||
        this.entDscsnAplyVO["telno"].length > 11
      ) {
        alert("유효하지 않은 연락처입니다.");
        this.$refs.telno.focus();
        return false;
      }

      if (
        this.entDscsnAplyVO["eml"] == null ||
        this.entDscsnAplyVO["eml"] == ""
      ) {
        alert("이메일을 입력해주세요.");
        this.$refs.eml.focus();
        return false;
      }
      if (!this.emlCheck(this.entDscsnAplyVO["eml"])) {
        alert("유효하지 않은 이메일입니다.");
        this.$refs.eml.focus();
        return false;
      }

      if (
        this.entDscsnAplyVO["aplyCn"] == null ||
        this.entDscsnAplyVO["aplyCn"] == ""
      ) {
        alert("내용을 입력해주세요.");
        this.$refs.aplyCn.focus();
        return false;
      }
    },
    // 이메일 형식 검사
    emlCheck(eml_address) {
      let eml_regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;
      if (!eml_regex.test(eml_address)) {
        return false;
      } else {
        return true;
      }
    },
  },
  watch: {
    fileList: {
      deep: true,
      handler() {
        this.fnFileList();
      },
    },
  },
};
</script>