<template>
  <div class="search-form form">
    <dl>
      <!-- 통합검색에서만 보이는 기록유형 선택 -->
      <dd class="mb-15" v-if="pageType === 'all'">
        <p>기록유형</p>
        <ul>
          <li>
            <input type="checkbox" id="allRecord" v-model="isChkAllRecord" @change="fnChkAllOptions('record')" />
            <label for="allRecord">전체</label>
          </li>
          <li>
            <input type="checkbox" id="photoRecord" v-model="formData.usePhoto" @change="fnChkOption('record')" />
            <label for="photoRecord">사진</label>
          </li>
          <li>
            <input type="checkbox" id="videoRecord" v-model="formData.useVideo" @change="fnChkOption('record')" />
            <label for="videoRecord">영상</label>
          </li>
          <li>
            <input type="checkbox" id="mediaVideo" v-model="formData.useMedia" @change="fnChkOption('record')" />
            <label for="mediaVideo">미디어영상</label>
          </li>
          <li>
            <input type="checkbox" id="newsData" v-model="formData.useNews" @change="fnChkOption('record')" />
            <label for="newsData">보도자료</label>
          </li>
        </ul>
      </dd>
      <dd class="mb-15">
        <p>검색범위</p>
        <ul>
          <li>
            <input type="checkbox" id="allScope" v-model="isChkAllScope" @change="fnChkAllOptions('scope')" />
            <label for="allScope">전체</label>
          </li>
          <li>
            <input type="checkbox" id="searchSj" v-model="formData.useSj" @change="fnChkOption('scope')" />
            <label for="searchSj">제목</label>
          </li>
          <li>
            <input type="checkbox" id="searchCn" v-model="formData.useCn" @change="fnChkOption('scope')" />
            <label for="searchCn">내용</label>
          </li>
          <li v-if="pageType !== 'media' && pageType !== 'bodo'">
            <input type="checkbox" id="searchAdres" v-model="formData.useAdres" @change="fnChkOption('scope')" />
            <label for="searchAdres">주소</label>
          </li>
        </ul>
      </dd>
      <dd class="mb-15">
        <p>검색어</p>
        <div class="wfull"><input type="text" v-model="formData.searchText" v-on:keyup.enter="fnSearch"></div>
      </dd>
      <dd class="mb-15">
        <p>생산연도</p>
        <input type="text" v-model="formData.startYear" pattern="[0-9]{4}" maxlength="4" @input="onlyNumberInput('startYear')">
        <p class="mark">~</p>
        <input type="text" v-model="formData.endYear" pattern="[0-9]{4}" maxlength="4" @input="onlyNumberInput('endYear')">
      </dd>
      <dd class="mb-20 category-dd" v-if="categoryList.length > 0">
        <p>카테고리</p>
        <ul>
          <li v-for="(category, idx) of categoryList" :key="idx">
            <input type="checkbox" :id="'ctgry_' + idx" name="categorys" :value="category.ctgryId" v-model="formData.searchCtgries" />
            <label :for="'ctgry_' + idx">{{ category.ctgryNm }}</label>
          </li>
        </ul>
      </dd>
      <dd class="mb-15">
        <p>정렬</p>
        <ul>
          <li v-for="(order, idx) of orders" :key="idx">
            <input type="radio" :id="order.key" name="orders" :value="order.key" v-model="formData.order" />
            <label :for="order.key">{{ order.value }}</label>
          </li>
        </ul>
      </dd>
      <div class="btn-group">
        <button type="button" class="reset" @click="fnReset">
          <img :src="reseticon" alt="">
          <p>초기화</p>
        </button>
        <button type="button" class="search" @click="fnSearch">
          <img :src="searchicon" alt="">
          <p>검색</p>
        </button>
      </div>
    </dl>
  </div>
</template>
<script>
// API
import { findAllByNullProc } from "@/resources/api/category"; // 카테고리 목록 검색

export default {
  name: "SearchFormComponent",
  props: {
    // 부모 컴포넌트에서 전달받을 데이터
    initialData: {
      type: Object,
      default: () => ({
        usePhoto: true,
        useVideo: true,
        useMedia: true,
        useNews: true,
        useSj: true,
        useCn: true,
        useAdres: true,
        searchText: null,
        startYear: null,
        endYear: null,
        searchCtgries: [],
        order: "rgsde",
        // 페이지네이션 관련 속성
        currentPage: 1,
        recordSize: 24,
      }),
    },
    // 페이지 타입 (통합검색: 'all', 사진: 'pic', 영상: 'video', 미디어: 'media', 보도자료: 'bodo')
    pageType: {
      type: String,
      default: 'all'
    }
  },
  data() {
    return {
      // 아이콘
      searchicon: 'client/resources/images/icon/search.png',
      reseticon: 'client/resources/images/icon/reset.png',

      isChkAllRecord: true, // 기록유형 전체 체크 여부
      isChkAllScope: true, // 검색범위 전체 체크 여부

      // 검색 폼 데이터
      formData: {},

      // 카테고리 목록
      categoryList: [],

      // 정렬 목록
      orders: [
        { key: "rgsde", value: "최신" },
        { key: "rdcnt", value: "인기" },
      ],
    };
  },
  created() {
    // 초기 데이터 설정
    this.initFormData();

    // 카테고리 목록 조회
    this.fnFindCategorys();
  },
  watch: {
    // initialData가 변경되면 formData를 업데이트
    initialData: {
      handler() {
        this.initFormData();
      },
      deep: true
    }
  },
  methods: {
    // 폼 데이터 초기화
    initFormData() {
      // 초기 데이터 복사
      this.formData = JSON.parse(JSON.stringify(this.initialData));

      // 페이지 타입에 따라 검색 타입 설정
      if (this.pageType !== 'all') {
        // 페이지 타입에 맞는 searchTy 설정
        switch (this.pageType) {
          case 'pic':
            this.formData.searchTy = "P";
            break;
          case 'video':
            this.formData.searchTy = "V";
            break;
          case 'media':
            this.formData.searchTy = "M";
            // 미디어 영상에서는 주소 검색 비활성화
            this.formData.useAdres = false;
            break;
          case 'bodo':
            this.formData.searchTy = "N";
            // 보도자료에서는 주소 검색 비활성화
            this.formData.useAdres = false;
            break;
        }
      }

      // 전체 체크박스 상태 동기화
      this.isChkAllRecord = this.formData.usePhoto && this.formData.useVideo && this.formData.useMedia && this.formData.useNews;

      // 검색범위 전체 체크박스 상태 계산
      if (this.pageType === 'media' || this.pageType === 'bodo') {
        // 미디어 영상과 보도자료는 제목과 내용만 검색 가능
        this.isChkAllScope = this.formData.useSj && this.formData.useCn;
      } else {
        // 기타 타입은 주소 포함 세 가지 모두 검색 가능
        this.isChkAllScope = this.formData.useSj && this.formData.useCn && this.formData.useAdres;
      }
    },

    // 카테고리 목록 조회
    async fnFindCategorys() {
      try {
        const response = await findAllByNullProc();
        if (response.data && response.data.data && response.data.data.ctgry) {
          this.categoryList = response.data.data.ctgry;
        } else {
          this.categoryList = [];
        }
      } catch (error) {
        this.categoryList = []; // 카테고리 목록 초기화

        if (error.response) {
          alert(error.response.data.message);
        }

        console.error(error.message);
      }
    },

    // 초기화 버튼 클릭
    fnReset() {
      if (confirm('검색 조건을 초기화하시겠습니까?')) {
        this.initFormData();

        // 부모 컴포넌트에 이벤트 발생
        this.$emit('reset');
      }
    },

    // 검색 실행
    fnSearch() {
      // 유효성 검사 (통합검색일 경우 검색 유형 체크)
      if (this.pageType === 'all' && !this.formData.usePhoto && !this.formData.useVideo && !this.formData.useMedia && !this.formData.useNews) {
        alert('검색 유형은 최소 한 개 이상 선택해주세요.');
        return;
      }

      // 검색 범위 유효성 검사
      if (this.pageType === 'media' || this.pageType === 'bodo') {
        // 미디어 영상과 보도자료는 제목, 내용만 체크
        if (!this.formData.useSj && !this.formData.useCn) {
          alert('검색 범위는 최소 한 개 이상 선택해주세요.');
          return;
        }
      } else {
        // 다른 타입은 제목, 내용, 주소 체크
        if (!this.formData.useSj && !this.formData.useCn && !this.formData.useAdres) {
          alert('검색 범위는 최소 한 개 이상 선택해주세요.');
          return;
        }
      }

      if (!this.$isEmpty(this.formData.startYear) && !this.$isEmpty(this.formData.endYear)) {
        const startYear = parseInt(this.formData.startYear);
        const endYear = parseInt(this.formData.endYear);

        if (startYear > endYear) {
          alert('종료 연도는 시작 연도보다 작을 수 없습니다.');
          return;
        }
      }

      // 부모 컴포넌트에 이벤트 발생 (데이터 전달)
      this.$emit('search', JSON.parse(JSON.stringify(this.formData)));
    },

    // 전체 선택/해제
    fnChkAllOptions(type) {
      switch (type) {
        case 'record':
          this.formData.usePhoto = this.isChkAllRecord;
          this.formData.useVideo = this.isChkAllRecord;
          this.formData.useMedia = this.isChkAllRecord;
          this.formData.useNews = this.isChkAllRecord;
          break;
        case 'scope':
          this.formData.useSj = this.isChkAllScope;
          this.formData.useCn = this.isChkAllScope;
          // media 또는 bodo 타입이 아닌 경우에만 주소 검색 옵션 설정
          if (this.pageType !== 'media' && this.pageType !== 'bodo') {
            this.formData.useAdres = this.isChkAllScope;
          }
          break;
      }
    },

    // 개별 체크박스 선택시 전체 체크박스 상태 업데이트
    fnChkOption(type) {
      switch (type) {
        case 'record':
          this.isChkAllRecord = this.formData.usePhoto && this.formData.useVideo && this.formData.useMedia && this.formData.useNews;
          break;
        case 'scope':
          if (this.pageType === 'media' || this.pageType === 'bodo') {
            // 미디어 영상과 보도자료는 제목과 내용만 체크
            this.isChkAllScope = this.formData.useSj && this.formData.useCn;
          } else {
            // 다른 타입은 주소 포함 체크
            this.isChkAllScope = this.formData.useSj && this.formData.useCn && this.formData.useAdres;
          }
          break;
      }
    },

    // 생산연도 입력 제한
    onlyNumberInput(type) {
      if (type === 'startYear') {
        this.formData.startYear = this.formData.startYear.replace(/[^0-9]/g, '');
      } else if (type === 'endYear') {
        this.formData.endYear = this.formData.endYear.replace(/[^0-9]/g, '');
      }
    }
  },
};
</script>