<template>
  <b-dropdown
    multiple
    expanded
  >
    <button
      slot="trigger"
      class="button"
      type="button"
    >
      <div>
        {{ checkedList }}
      </div>
    </button>
    <b-dropdown-item>
      <span
        v-for="option in comboData"
        :key="option.description"
        :value="option.value"
        class="dropdown-item"
      >
        <b-checkbox
          v-model="dropdownCheck"
          :native-value="option.value"
          type="is-info"
          @input="dropdownSelect"
        >
          {{ option.description }}
        </b-checkbox>
      </span>
    </b-dropdown-item>
  </b-dropdown>
</template>

<script>
export default {
  props: {
    fieldName: String,
    serviceName: String,
    methodName: String,
  },
  data() {
    return {
      dropdownCheck: [],
      comboData: [],
    };
  },
  computed: {
    checkedList() {
      let tempStr = '';
      if (this.dropdownCheck.length > 0) {
        tempStr = this.dropdownCheck.join(', ');
      } else {
        tempStr = '전체';
      }
      return tempStr;
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const servicePath = `/${this.serviceName}/${this.methodName}`;
      const param = { where: this.fieldName };
      this.$service.read(servicePath, param).then(({ data }) => {
        this.comboData = data;
      });
    },
    dropdownSelect(e) {
      this.dropdownCheck = e;
      this.$emit('select', this.fieldName, e);
    },
  },
};
</script>

<style scoped>
a.dropdown-item.is-active,
a.dropdown-item:hover {
  background-color: white;
  color: #0a0a0a;
}
a.dropdown-item:focus {
  outline: none;
}
.dropdown-item > span > label {
  width: 100%;
}
span.dropdown-item {
  margin: 0.25em 0.25em 0 0.25em;
  padding: 0;
}
a.dropdown-item {
  padding: 0.25em;
}
.dropdown-trigger > button {
  height: 2rem;
  width: 100%;
  font-size: 0.8rem;
  overflow: hidden;
  justify-content: start;
}
</style>

<style>
.dropdown-menu {
  padding-top: 0;
}
.dropdown-content {
  padding: 0;
}
</style>
