<template>
  <div :class="['label-select', prefixCls]">
    <span
      :class="[`${prefixCls}-label`]"
      v-if="labelIsShow"
      :style="labelStyles"
      >{{ label }}</span
    >
    <ul :class="[`${prefixCls}-options`]" :style="optionsStyles">
      <li
        :class="{
          [`${prefixCls}-selected`]: !selectedIds.length
        }"
        @click="selectAll"
        v-if="showAllOptionTag"
      >
        全部
      </li>
      <li
        v-for="(item, index) in optionList"
        :key="index"
        :class="{
          [`${prefixCls}-selected`]: item.selected,
          [`${prefixCls}-disabled`]: item.disabled
        }"
        @click="select(item)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
const prefixCls = "cc-labels";

export default {
  name: "label-select",
  props: {
    value: {
      type: [String, Number, Array]
    },
    label: {
      type: String
    },
    labelWidth: {
      type: Number
    },
    labelIsShow: {
      type: Boolean,
      default: true
    },
    showAllOptionTag: {
      type: Boolean,
      default: true
    },
    multiple: {
      type: Boolean,
      default: false
    },
    optionKey: {
      type: String,
      default: "id"
    },
    options: {
      type: Array,
      default() {
        return [];
      }
    },
    costom: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      prefixCls,
      selectedIds: [],
      optionList: []
    };
  },
  computed: {
    labelStyles() {
      const width =
        this.labelWidth || this.labelWidth === 0 ? this.labelWidth : 60;

      return {
        width: `${width}px`
      };
    },
    optionsStyles() {
      const width =
        this.labelWidth || this.labelWidth === 0 ? this.labelWidth : 60;

      return {
        marginLeft: `${width}px`
      };
    }
  },
  watch: {
    options: {
      immediate: true,
      handler(val) {
        this.optionList = val.map(item => {
          return {
            ...item,
            selected: this.selectedIds.indexOf(item[this.optionKey]) !== -1
          };
        });
      }
    },
    value: {
      immediate: true,
      handler(val) {
        if (this.multiple) {
          this.selectedIds = val ? [...val] : [];
        } else {
          this.selectedIds = val ? [val] : [];
        }
        this.actOptions();
      }
    }
  },
  methods: {
    select(option) {
      const optkey = option[this.optionKey];
      if (this.multiple) {
        option.selected = !option.selected;
        const optPoz = this.selectedIds.indexOf(optkey);
        if (optPoz === -1) {
          this.selectedIds.push(optkey);
        } else {
          this.selectedIds.splice(optPoz, 1);
        }
      } else {
        this.optionList.map(item => {
          item.selected = optkey === item[this.optionKey];
        });
        this.selectedIds = [optkey];
      }
      this.emitSelect();
    },
    actOptions() {
      this.optionList.map(item => {
        item.selected = this.selectedIds.indexOf(item[this.optionKey]) !== -1;
      });
    },
    selectAll() {
      this.optionList.map(item => (item.selected = false));
      this.selectedIds = [];
      this.emitSelect();
    },
    emitSelect() {
      const selectOptions = this.optionList.filter(
        item => this.selectedIds.indexOf(item[this.optionKey]) !== -1
      );
      this.$emit(
        "input",
        this.multiple ? this.selectedIds : this.selectedIds[0]
      );
      this.$emit("on-change", selectOptions);
    }
  }
};
</script>

<style lang="css">
.label-select {
  margin-bottom: 8px;
}
.label-label {
  display: block;
  float: left;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  padding-right: 20px;
  font-weight: 600;
}
.label-options {
  margin-left: 60px;
}
.label-options li {
  display: inline-block;
  vertical-align: top;
  margin: 0 5px 5px 0;
  height: 24px;
  line-height: 24px;
  padding: 0 10px;
  border-radius: 3px;
  cursor: pointer;
}
.label-options li:hover {
  color: #409eff;
}
.label-options li.label-selected {
  background: #409eff;
  color: #fff;
}
.label-options li.label-disabled {
  color: #909399;
  cursor: not-allowed;
}
</style>
