import "../../../src/scss/checklist.scss";
import Vue from 'vue';
export default Vue.extend().extend({
  name: 'w-checklist',
  props: {
    max: {
      type: Number,
      validator: function validator(val) {
        return val >= 0;
      }
    },
    title: String,
    align: {
      type: String,
      default: 'left',
      validator: function validator(val) {
        return val === 'left' || val === 'right';
      }
    },
    options: {
      type: Array,
      required: true
    },
    value: {
      type: Array,
      default: function _default() {
        return [];
      }
    }
  },
  computed: {
    currentValue: {
      get: function get() {
        return this.value;
      },
      set: function set(val) {
        if (this.max && val.length > this.max) {
          val = val.slice(0, this.max);
        }

        this.$emit('input', val);
      }
    }
  },
  methods: {
    onClick: function onClick(option) {
      if (option.disabled) {
        return;
      }

      var value = typeof option === 'string' ? option : option.value;

      if (this.currentValue.includes(value)) {
        this.currentValue = this.currentValue.filter(function (val) {
          return val !== value;
        });
      } else {
        this.currentValue.push(value);
      }
    },
    isChecked: function isChecked(option) {
      var value = typeof option === 'string' ? option : option.value;
      return this.currentValue.includes(value);
    }
  },
  created: function created() {
    this.currentValue = this.value;
  },
  watch: {
    value: function value(val, oldValue) {
      if (JSON.stringify(val) !== JSON.stringify(oldValue)) {
        this.$emit('change', val);
      }
    }
  },
  render: function render() {
    var _this = this;

    var h = arguments[0];
    return h("div", [this.title && h("div", {
      "class": "weui-cells__title",
      "domProps": {
        "innerHTML": this.title
      }
    }), h("div", {
      "class": "weui-cells weui-cells_checkbox"
    }, [this.options.map(function (option) {
      return h("label", {
        "key": option.label || option,
        "class": {
          'weui-cell': true,
          'weui-check__label': true,
          'weui-check__label-disabled': option.disabled
        },
        "on": {
          "click": function click() {
            _this.onClick(option);
          }
        }
      }, [_this.align === 'left' && h("div", {
        "class": "weui-cell__hd"
      }, [h("i", {
        "class": {
          'weui-icon-checked': true,
          'checked': _this.isChecked(option)
        }
      })]), h("div", {
        "class": "weui-cell__bd"
      }, [h("p", {
        "domProps": {
          "textContent": option.label || option
        }
      })]), _this.align === 'right' && h("div", {
        "class": "weui-cell__hd"
      }, [h("i", {
        "attrs": {
          "className": {
            'weui-icon-checked': true,
            'checked': _this.isChecked(option)
          }
        }
      })])]);
    })])]);
  }
});
//# sourceMappingURL=WChecklist.js.map