<template>
  <v-row class="search-box" align="center" no-gutters>
    <v-col v-if="location == 'front'" :cols="labelCols">
      <label for="" class="search-box-label">
        <v-icon v-if="icon" x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
          >mdi-record-circle</v-icon
        >
        {{ label }}
      </label>
    </v-col>
    <v-col :cols="textCols" @click="modifyValue">
      <v-checkbox
        v-model="chkValue"
        :disabled="disabledFlag"
        :readonly="readonly || false"
        :required="required || false"
        :false-value="false"
        @change="modifyValue"
        :class="isDarkMode ? 'checkbox-dark' : 'checkbox-light'"
      ></v-checkbox>
    </v-col>
    <v-col
      style="margin-left: 5px; margin-top: 5px"
      v-if="location == 'rear'"
      :cols="labelCols"
    >
      <label for="" class="search-box-label">
        <v-icon v-if="icon" x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
          >mdi-record-circle</v-icon
        >
        {{ label }}
      </label>
    </v-col>
  </v-row>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  props: {
    parentPrgmId: {
      type: String,
      require: true,
    },
    label: {
      type: String,
      require: false,
    },
    isDarkMode: {
      type: Boolean,
      require: false,
      default: false,
    },
    required: {
      type: Boolean,
      require: false,
      default: false,
    },
    readonly: {
      type: Boolean,
      require: false,
      default: false,
    },
    valueNm: {
      type: String,
      require: true,
    },
    labelCols: {
      type: Number,
      require: false,
      default: 4,
    },
    textCols: {
      type: Number,
      require: false,
      default: 7,
    },
    icon: {
      type: Boolean,
      require: false,
      default: true,
    },
    location: {
      type: String,
      require: false,
      default: "front",
    },
    disabledCheckOption: {
      type: String,
      require: false,
    },
  },
  data() {
    return {
      chkValue: false,
      testData: false,
      disabledFlag: false,
    };
  },

  computed: {
    ...mapState({
      searchParam: (state) => state.pageData,
      myBindingData(state) {
        return state.pageData[this.parentPrgmId][this.valueNm];
      },
      bindingDisabledCheckOption(state) {
        if (state.pageData[this.parentPrgmId][this.disabledCheckOption] != undefined) {
          return state.pageData[this.parentPrgmId][this.disabledCheckOption];
        }
      },
    }),
  },
  watch: {
    myBindingData: {
      deep: true,
      handler(val) {
        this.chkValue = val;
      },
    },
    bindingDisabledCheckOption(val) {
      this.disabledFlag = val;
    },
  },
  created() {
    this.chkValue = this.searchParam[this.parentPrgmId][this.valueNm];
    if (this.searchParam[this.parentPrgmId][this.disabledCheckOption] != undefined) {
      this.disabledFlag = this.searchParam[this.parentPrgmId][this.disabledCheckOption];
    }
  },
  methods: {
    ...mapMutations({ setPageData: "setPageData" }),
    modifyValue(e) {
      if (this.disabledFlag == true && e.target != undefined) {
        alert("기간이 한 시간 이내일 경우만 선택할 수 있습니다.");
      } else {
        if (e.target == undefined) {
          return this.setPageData({ [this.valueNm]: e });
        }
      }
    },
  },
};
</script>

<style></style>
