<template>
  <v-row class="search-box" align="center" no-gutters>
    <v-col v-if="label" :cols="labelCols">
      <label for="" class="search-box-label">
        <v-icon
          v-if="iconShow"
          small
          :class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
          >$icoBulletPoint</v-icon
        >
        {{ label }}
      </label>
    </v-col>
    <v-col :cols="label ? textCols : ''">
      <div class="datepicker-container">
        <v-text-field
          id="startpicker"
          ref="startpicker"
          v-model="fromDtValue"
          :class="
            isRange && !selectBoxTimeItemList.selectTimeValue1
              ? 'v-input__custom half large datepicker-timeselect'
              : 'v-input__custom large datepicker-timeselect'
          "
          style="border-radius: 8px; width: 170px"
          :hide-details="true"
          readonly
          outlined
        >
          <!-- dark theme border #424242 -->
          <!-- <template #append>
            <v-icon size="20">$icoCalendar</v-icon>
          </template> -->
          <template v-slot:append>
            <a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px" />
          </template>

          <template #append-outer>
            <div ref="startpicker-container" id="startpicker-container"></div>
          </template>
        </v-text-field>

        <component
          class="mx-2"
          v-if="selectBoxTimeItemList.selectTimeValue1"
          :parentPrgmId="parentPrgmId"
          :is="'SelectBoxTime'"
          ref="SelectBox1"
          :propsValue="selectTimeValue1"
          :itemList="selectTimeValueList1"
          :minInterval="
            selectBoxTimeItemList.minInterval ? selectBoxTimeItemList.minInterval : 1
          "
          @update:propsValue="selectTimeValue1 = $event"
        />
        <!-- <div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">~</div> -->

        <a-icon
          v-show="isRange"
          type="arrow-right"
          class="mx-3 v-icon"
          style="width: 14px; height: 40px; line-height: 0"
        />

        <v-text-field
          class="mx-2"
          v-show="isRange"
          id="endpicker"
          ref="endpicker"
          v-model="toDtValue"
          :class="
            isRange && !selectBoxTimeItemList.selectTimeValue2
              ? 'v-input__custom half large datepicker-timeselect'
              : 'v-input__custom large datepicker-timeselect'
          "
          style="border-radius: 8px; width: 170px"
          :hide-details="true"
          readonly
          outlined
        >
          <!-- <template #append>
            <v-icon size="20">$icoCalendar</v-icon>
          </template> -->
          <template v-slot:append>
            <a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px" />
          </template>
          <template #append-outer>
            <div ref="endpicker-container" id="endpicker-container"></div>
          </template>
        </v-text-field>
        <component
          v-if="selectBoxTimeItemList.selectTimeValue2"
          :parentPrgmId="parentPrgmId"
          :is="'SelectBoxTime'"
          ref="SelectBox2"
          :propsValue="selectTimeValue2"
          :itemList="selectTimeValueList2"
          :minInterval="
            selectBoxTimeItemList.minInterval ? selectBoxTimeItemList.minInterval : 1
          "
          @update:propsValue="selectTimeValue2 = $event"
        />
      </div>
    </v-col>
  </v-row>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import TuiDatepicker from "tui-date-picker";
import Utility from "~/plugins/utility";
import SelectBoxTime from "@/components/common/select/SelectBoxTime";
import DateUtility from "~/plugins/dateUtility";
export default {
  props: {
    parentPrgmId: {
      type: String,
      require: true,
    },
    label: {
      type: String,
      require: false,
    },
    timePicker: {
      type: Boolean,
      require: false,
      default: false,
    },
    labelCols: {
      type: Number,
      require: false,
      default: 4,
    },
    textCols: {
      type: Number,
      require: false,
      default: 8,
    },
    iconShow: {
      type: Boolean,
      require: false,
      default: false,
    },
    required: {
      type: Boolean,
      require: false,
      default: false,
    },
    isRangeOption: {
      type: Boolean,
      require: false,
      default: true,
    },
    selectBoxTimeItemList: {
      type: Object,
      require: false,
      default: () => {
        return {};
      },
    },
    selectFromDtUntilTodayFg: {
      type: Boolean,
      require: false,
      default: false,
    },
    selectToDtUntilTodayFg: {
      type: Boolean,
      require: false,
      default: false,
    },
  },
  components: {
    SelectBoxTime,
  },
  data() {
    return {
      today: new Date(),
      startDatepickerInstance: null,
      endDatepickerInstance: null,
      startDtValue: null,
      endDtValue: null,
      fromDtOldVal: null,
      toDtOldVal: null,
      cmCycleFlag: false,
      selectTimeValue1:
        this.selectBoxTimeItemList.selectTimeValue1 != undefined
          ? this.selectBoxTimeItemList.selectTimeValue1
          : null, // selectBoxTime에 필요한 prop
      selectTimeValueList1:
        this.selectBoxTimeItemList.selectTimeValueList1 != undefined
          ? this.selectBoxTimeItemList.selectTimeValueList1
          : [], // selectBoxTime에 필요한 prop
      selectTimeValue2:
        this.selectBoxTimeItemList.selectTimeValue2 != undefined
          ? this.selectBoxTimeItemList.selectTimeValue2
          : null, // selectBoxTime에 필요한 prop
      selectTimeValueList2:
        this.selectBoxTimeItemList.selectTimeValueList2 != undefined
          ? this.selectBoxTimeItemList.selectTimeValueList2
          : [], // selectBoxTime에 필요한 prop
    };
  },
  computed: {
    ...mapState({
      searchParam(state) {
        return state.pageData[this.parentPrgmId];
      },
    }),
    myCmCycle() {
      return this.searchParam.cmCycle;
    },
    myOptions() {
      let returnObj = {};
      switch (this.myCmCycle) {
        case "CYC_YEAR":
          returnObj = {
            type: "year",
            viewFormat: "YYYY",
            pickerFormat: "YYYY",
            sendFormat: "YYYY",
          };
          break;

        case "CYC_MONTH":
          returnObj = {
            type: "month",
            viewFormat: "YYYY-MM",
            pickerFormat: "YYYY-MM",
            sendFormat: "YYYYMM",
          };
          break;

        case "CYC_DAY":
          returnObj = {
            type: "date",
            viewFormat: "YYYY-MM-DD",
            pickerFormat: "yyyy-MM-dd",
            sendFormat: "YYYYMMDD",
          };
          break;

        case "CYC_HOUR":
          returnObj = {
            type: "date",
            viewFormat: "YYYY-MM-DD" + (this.timePicker ? " HH:mm:ss" : ""),
            pickerFormat: "yyyy-MM-dd" + (this.timePicker ? " HH:mm A" : ""),
            sendFormat: this.timePicker ? "YYYY-MM-DD HH:mm:ss" : "YYYYMMDD",
          };
          // returnObj = { type: "day", format: "YYYY-MM-DD HH:mm:ss" };
          break;

        default:
          break;
      }
      return returnObj;
    },
    // maxDate() {
    //   return Utility.setFormatDate("today", this.myOptions.format);
    // },
    fromDtValue(val) {
      let selectVal = Utility.setFormatDate(
        this.searchParam.fromDt,
        this.myOptions.viewFormat
      );
      if (this.selectFromDtUntilTodayFg) {
        let today = Utility.setFormatDate(new Date(), "YYYY-MM-DD");
        let dayDiff = DateUtility.diff(selectVal, today, "days");
        if (dayDiff < 0) {
          alert("오늘 날짜까지 검색이 가능합니다.");
          selectVal = today;
          if (this.fromDtOldVal == today) {
            this.toDtValueChkRang(selectVal);
            this.startDatepickerInstance.setDate(new Date(selectVal));
          }
        }
      }
      if (this.fromDtOldVal == null) {
        this.fromDtOldVal = selectVal;
      }
      return selectVal;
      // console.log('fromDtValue!!!',);
      // return Utility.setFormatDate(
      // 	this.searchParam.fromDt,
      // 	this.myOptions.viewFormat,
      // );
    },
    toDtValue() {
      let selectVal = Utility.setFormatDate(
        this.searchParam.toDt,
        this.myOptions.viewFormat
      );
      if (this.selectToDtUntilTodayFg) {
        let today = Utility.setFormatDate(new Date(), "YYYY-MM-DD");
        let dayDiff = DateUtility.diff(selectVal, today, "days");
        if (dayDiff < 0) {
          alert("오늘 날짜까지 검색이 가능합니다.");
          selectVal = today;
          if (this.toDtOldVal == today) {
            this.fromDtValueChkRang(selectVal);
            this.endDatepickerInstance.setDate(new Date(selectVal));
          }
        }
      }
      if (this.toDtOldVal == null) {
        this.toDtOldVal = selectVal;
      }
      return selectVal;
      // return Utility.setFormatDate(
      // 	this.searchParam.toDt,
      // 	this.myOptions.viewFormat,
      // );
    },
    defaultRange() {
      return this.searchParam.defaultRange
        ? this.searchParam.defaultRange[this.myCmCycle]
        : null;
    },
    isRange() {
      return (
        (this.defaultRange !== null && this.defaultRange > 0 && this.isRangeOption) ||
        this.defaultRange === "no limite"
      );
    },
  },
  watch: {
    selectTimeValue1(val) {
      if (this.selectBoxTimeItemList.selectTimeValue2 != undefined) {
        this.setSelectTimeValue2(val);
      } else {
        this.setPageData({ isFind: true });
      }
    },
    selectTimeValue2(val) {
      this.setSelectTimeValue1(val);
      // this.setPageData({ isFind: true });
    },
    myCmCycle() {
      this.cmCycleFlag = false;
      this.startDatepickerInstance.setDate(new Date(this.fromDtValue));
      this.startDatepickerInstance.setType(this.myOptions.type);
      this.endDatepickerInstance.setType(this.myOptions.type);
    },
    fromDtValue(newVal, oldVal) {
      if (
        this.isRange &&
        this.defaultRange !== "no limite" &&
        newVal !== "Invalid Date" &&
        newVal !== oldVal
      ) {
        this.toDtValueChkRang(newVal);
        this.startDatepickerInstance.setDate(new Date(newVal));
        this.fromDtOldVal = newVal;
        this.setSelectTimeValue1(this.selectTimeValue2, "check");
        this.setSelectTimeValue2(this.selectTimeValue1, "check");
      } else {
        this.setPageData({ isFind: true });
      }
    },
    toDtValue(newVal, oldVal) {
      if (
        this.isRange &&
        this.defaultRange !== "no limite" &&
        newVal !== "Invalid Date" &&
        newVal !== oldVal
      ) {
        this.fromDtValueChkRang(newVal);
        this.endDatepickerInstance.setDate(new Date(newVal));
        this.toDtOldVal = newVal;
        this.setSelectTimeValue1(this.selectTimeValue2, "check");
        this.setSelectTimeValue2(this.selectTimeValue1, "check");
      }
    },
  },
  created() {
    if (this.timePicker) {
      this.setPageData({
        fromDt: Utility.setFormatDate(this.today, "YYYY-MM-DD") + " 00:00:00",
        toDt: Utility.setFormatDate(this.today, "YYYY-MM-DD") + " 23:59:59",
      });
    }
  },
  mounted() {
    const startContainer = document.getElementById("startpicker-container");
    const startTarget = document.getElementById("startpicker");
    const endContainer = document.getElementById("endpicker-container");
    const endTarget = document.getElementById("endpicker");

    // datepicker 생성
    this.startDatepickerInstance = new TuiDatepicker(startContainer, {
      date: this.today,
      language: "ko",
      type: this.myOptions.type, // "date", // type: date || month || year
      input: {
        element: startTarget,
        format: this.myOptions.pickerFormat, //"YYYY-MM-DD" //this.format
      },
      timePicker: this.timePicker,
      calendar: {
        showToday: false,
      },
    });
    // datepicker 생성
    this.endDatepickerInstance = new TuiDatepicker(endContainer, {
      date: this.today,
      language: "ko",
      type: this.myOptions.type, // "date", // type: date || month || year
      input: {
        element: endTarget,
        format: this.myOptions.pickerFormat, //"YYYY-MM-DD" //this.format
      },
      timePicker: this.timePicker,
      calendar: {
        showToday: false,
      },
    });
    // datepicker 생성 끝

    // datepicker 초기값 생성
    this.startDatepickerInstance.setDate(new Date(this.fromDtValue));
    // datepicker 초기값 생성 끝

    // datepicker 변경시 이벤트 추가
    this.startDatepickerInstance.on("change", () => this.getStartDt());
    this.endDatepickerInstance.on("change", () => this.getEndDt());
    // datepicker 이벤트는 mount 될때 추가 해주어야 한다.
  },
  methods: {
    ...mapMutations({ setPageData: "setPageData" }),
    getStartDt() {
      const dt = this.startDatepickerInstance.getDate();
      this.setPageData({
        fromDt: Utility.setFormatDate(dt, this.myOptions.sendFormat),
      });
    },
    getEndDt() {
      const dt = this.endDatepickerInstance.getDate();
      this.setPageData({
        toDt: Utility.setFormatDate(dt, this.myOptions.sendFormat),
      });
    },
    fromDtValueChkRang(newDt) {
      const defaultDt = this.$dayjs(this.fromDtValue);
      const compareDt = this.$dayjs(newDt);
      const newDefault = Utility.setNewDefaultRange(this.myCmCycle, this.defaultRange);
      const myRange = newDefault.range;
      const rangeKey = newDefault.key;
      const rangeGap = compareDt.diff(defaultDt, rangeKey);

      if (
        (myRange > rangeGap && compareDt.isAfter(defaultDt)) ||
        defaultDt.format(this.myOptions.sendFormat) ===
          compareDt.format(this.myOptions.sendFormat)
      ) {
        // if(this.cmCycleFlag){
        this.setPageData({ isFind: true });
        // }
        // this.cmCycleFlag = true;
      } else {
        this.setPageData({
          fromDt: Utility.setBeforetDate(
            this.searchParam,
            compareDt,
            this.myOptions.sendFormat
          ),
        });
      }
    },
    toDtValueChkRang(newDt) {
      const defaultDt = this.$dayjs(this.toDtValue);
      const compareDt = this.$dayjs(newDt);
      const newDefault = Utility.setNewDefaultRange(this.myCmCycle, this.defaultRange);
      const myRange = newDefault.range;
      const rangeKey = newDefault.key;
      const rangeGap = defaultDt.diff(compareDt, rangeKey);

      if (
        (myRange > rangeGap && defaultDt.isAfter(compareDt)) ||
        defaultDt.format(this.myOptions.sendFormat) ===
          compareDt.format(this.myOptions.sendFormat)
      ) {
        this.setPageData({ isFind: true });
      } else {
        this.setPageData({
          toDt: Utility.setAftertDate(
            this.searchParam,
            compareDt,
            this.myOptions.sendFormat
          ),
        });
      }
    },
    setSelectTimeValue2(val, type = "default") {
      this.setPageData({ selectTimeValue1: val });
      let toDt = this.toDtOldVal;
      let fromDt = this.fromDtOldVal;
      let dayDiff = DateUtility.diff(fromDt, toDt, "days");
      let selectTimeValueList2 = this.selectTimeValueList2.map((item) => {
        return item.value;
      });
      if (
        dayDiff <= 0 &&
        selectTimeValueList2.indexOf(this.selectTimeValue2) <
          selectTimeValueList2.indexOf(val)
      ) {
        // this.selectTimeValue2 = selectTimeValueList2[selectTimeValueList2.indexOf(val)];
        this.selectTimeValue2 = val;
        this.setPageData({ selectTimeValue2: val });
      } else {
        if (type == "default") {
          this.setPageData({ isFind: true });
        }
      }
    },
    setSelectTimeValue1(val, type = "default") {
      this.setPageData({ selectTimeValue2: val });
      let toDt = this.toDtOldVal;
      let fromDt = this.fromDtOldVal;
      let dayDiff = DateUtility.diff(fromDt, toDt, "days");
      let selectTimeValueList2 = this.selectTimeValueList2.map((item) => {
        return item.value;
      });
      if (
        dayDiff <= 0 &&
        selectTimeValueList2.indexOf(val) <
          selectTimeValueList2.indexOf(this.selectTimeValue1)
      ) {
        // this.selectTimeValue1 = selectTimeValueList2[selectTimeValueList2.indexOf(val)];
        this.selectTimeValue1 = val;
        // this.selectTimeValue1 = this.selectTimeValueList2[selectTimeValueList2.indexOf(val) + 1]
        this.setPageData({ selectTimeValue1: val });
      } else {
        if (type == "default") {
          this.setPageData({ isFind: true });
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/datepicker.scss";

::v-deep {
  .tui-timepicker-row {
    display: flex;
    justify-content: space-around;
    background-color: #edf4fc;
    .tui-timepicker-column.tui-timepicker-colon {
      color: #000 !important;
    }
  }
}
</style>
