<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"
          x-small
          :color="required ? '#fb8200' : 'primary'"
          class="mr-1"
          >mdi-record-circle</v-icon
        >
        {{ label }}
      </label>
    </v-col>
    <v-col :cols="label ? timeCols : ''">
      <v-select
        v-model="timeInnerValue"
        :items="itemList"
        item-text="text"
        item-value="value"
        solo
        outlined
        :menu-props="{ top: false, offsetY: true }"
        :hide-details="true"
        :class="['v-select__custom', customClass]"
        :disabled="disabled"
        :readonly="readonly"
        @click="setDatepickerHide"
        style="min-width: 170px;"
      >
        <template v-slot:append>
          <a-icon
            class="v-icon"
            type="clock-circle"
            style="width: 14px; height: 14px; color: #00000073"
          />
        </template>
      </v-select>
      <!-- @change="updateBlocCode($event)" -->
    </v-col>
  </v-row>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";

export default {
  components: {},
  props: {
    parentPrgmId: {
      type: String,
      require: true,
    },
    autoLoad: {
      type: Boolean,
      require: false,
      default: true,
    },
    label: {
      type: String,
      require: false,
      default: null,
    },
    timeCols: {
      type: Number,
      require: false,
      default: 1,
    },
    labelCols: {
      type: Number,
      require: false,
      default: 4,
    },
    itemList: {
      type: Array,
      require: true,
      default: () => [],
    },
    propsValue: {
      type: String,
      require: true,
      //데이터 형태: '00 : 00'
    },
    required: {
      type: Boolean,
      require: false,
      default: false,
    },
    iconShow: {
      type: Boolean,
      require: false,
      default: true,
    },
    disabled: {
      type: Boolean,
      require: false,
      default: false,
    },
    readonly: {
      type: Boolean,
      require: false,
      default: false,
    },
    minInterval: {
      type: Number,
      require: false,
      default: 1,
    },
    customClass: {
      type: String,
      require: false,
    },
  },
  emits: ["update:propsValue"],
  data() {
    return {};
  },
  computed: {
    ...mapState({
      searchParam: (state) => state.pageData,
    }),
    timeInnerValue: {
      get() {
        return this.propsValue;
      },
      set(value) {
        // console.log('value[setValue] : ', value)
        this.$emit("update:propsValue", value);
      },
    },
  },
  created() {
    this.getTimeList();
    // console.log('created SelectBox')
    // console.log('timeList : ', this.timeList);
    // console.log('propsValue : ', this.propsValue);
  },
  methods: {
    ...mapMutations({ setPageData: "setPageData" }),
    ...mapActions({}),
    getTimeList() {
      for (var i = 0; i < 24; i++) {
        let hour = i.toString().padStart(2, "0");
        for (var j = 0; j < 60; j++) {
          if (j % this.minInterval === 0) {
            let min = j.toString().padStart(2, "0");
            this.itemList.push({
              text: hour + " : " + min,
              value: hour + " : " + min,
            });
          }
        }
      }
      this.propsValue = this.itemList[0].value;
    },
    setDatepickerHide(e) {
      // datepicker 선택 중 시간 selectBox를 고를 경우 datepicker를 hidden 시키는 기능
      if (document.querySelector("#startpicker-container > div") != undefined) {
        let datepicker1 = document.querySelector("#startpicker-container > div");
        datepicker1.classList.add("tui-hidden");
      }
      if (document.querySelector("#endpicker-container > div") != undefined) {
        let datepicker2 = document.querySelector("#endpicker-container > div");
        datepicker2.classList.add("tui-hidden");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// .v-select__custom {
// 	&.time {
// 		width: calc(50%);
// 	}
// }
</style>
