<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 : ''">

      <v-checkbox
				v-model="chkValue"
				:disabled="disabledFlag"
				:readonly="readonly || false"
				:required="required || false"
				:false-value="false"
				:color="isDarkMode ? '#fff' : '#1890ff'"
				@change="modifyValue"
			></v-checkbox>
    </v-col>
  </v-row>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  props: {
    parentPrgmId: {
      type: String,
      require: true,
    },
    label: {
      type: String,
      require: true,
    },
    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,
    },
    iconShow: {
			type: Boolean,
			require: false,
			default: true
		},
  },
  data() {
    return {
      chkValue: false,
      testData: false,
      disabledFlag: false,
    };
  },

  computed: {
    ...mapState({
      searchParam: (state) => state.pageData,
      myBindingDara(state) {
        return state.pageData[this.parentPrgmId][this.valueNm];
      },
    }),
  },
  watch: {
    myBindingDara: {
      deep: true,
      handler(val) {
        this.chkValue = val;
      },
    },
  },
  created() {
    this.chkValue = this.searchParam[this.parentPrgmId][this.valueNm];
  },
  methods: {
    ...mapMutations({ setPageData: "setPageData" }),
    modifyValue(e) {
      return this.setPageData({ [this.valueNm]: e });
    },
  },
};
</script>

<style></style>
