import WPickerColumn from "./WPickerColumn"; // Mixins

import { factory as ToaaleableFactory } from "../../../es5/mixins/toggleable"; // Utils

import mixins from "../../../es5/utils/mixins";
import cloneDeep from 'lodash/cloneDeep'; // height of th option item

var ITEM_HEIGHT = 34;
export default mixins(ToaaleableFactory('visible', 'update:visible')).extend({
  name: 'w-picker',
  props: {
    confirmText: {
      type: String,
      default: '确定'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    closeOnClickMask: {
      type: Boolean,
      default: true
    },
    columns: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    valueKey: String,
    visibleItemCount: {
      type: Number,
      default: 7,
      validator: function validator(val) {
        return [3, 5, 7].includes(val);
      }
    },
    value: {
      type: Array,
      default: function _default() {
        return [];
      }
    }
  },
  data: function data() {
    return {
      children: []
    };
  },
  computed: {
    pickerBodyStyle: function pickerBodyStyle() {
      return {
        height: this.visibleItemCount * ITEM_HEIGHT + 'px'
      };
    },
    simple: function simple() {
      return this.columns.length > 0 && !this.columns[0].options;
    }
  },
  watch: {
    columns: function columns(val) {
      this.setColumns(val);
    },
    value: function value(val) {
      this.setValues(val);
    }
  },
  mounted: function mounted() {
    this.setValues(this.value);
  },
  methods: {
    open: function open() {
      this.isActive = true;
    },
    close: function close() {
      this.isActive = false;
    },
    setColumns: function setColumns(columns) {
      var _this = this;

      columns.forEach(function (column, index) {
        _this.setColumnOptions(index, cloneDeep(column.options));
      });
    },
    columnValueChange: function columnValueChange(columnIndex) {
      if (this.simple) {
        this.$emit('change', this, this.getColumnOptions(0), this.getColumnIndex(0));
      } else {
        this.$emit('change', this, this.getValues(), columnIndex);
      }
    },
    // get column instance
    getColumn: function getColumn(columnIndex) {
      var children = this.children;
      return children.find(function (child, index) {
        return child.$options.name === 'w-picker-column' && index === columnIndex;
      });
    },
    // get column value by index
    getColumnValue: function getColumnValue(columnIndex) {
      var column = this.getColumn(columnIndex);
      return column && column.getValue();
    },
    // set column value by index
    setColumnValue: function setColumnValue(columnIndex, value) {
      var column = this.getColumn(columnIndex);
      column && column.setValue(value);
    },
    // set options of column by index
    setColumnOptions: function setColumnOptions(columnIndex, options) {
      var column = this.columns[columnIndex];

      if (column) {
        ;
        column.options = options;
      }
    },
    // get options of column by index
    getColumnOptions: function getColumnOptions(columnIndex) {
      return this.columns[columnIndex].options;
    },
    // get values of all columns
    getValues: function getValues() {
      return this.children.map(function (child) {
        return child.getValue();
      });
    },
    // set values of all columns
    setValues: function setValues(values) {
      var _this2 = this;

      values.forEach(function (value, index) {
        _this2.setColumnValue(index, value);
      });
    },
    // get column option index by column index
    getColumnIndex: function getColumnIndex(columnIndex) {
      return this.getColumn(columnIndex).currentIndex;
    },
    // set column option index by column index
    setColumnIndex: function setColumnIndex(columnIndex, index) {
      var column = this.getColumn(columnIndex);
      column && column.setIndex(index);
    },
    // get indexes of all columns
    getIndexes: function getIndexes() {
      return this.children.map(function (child) {
        return child.currentIndex;
      });
    },
    // set indexes of all columns
    setIndexes: function setIndexes(indexes) {
      var _this3 = this;

      indexes.forEach(function (optionIndex, columnIndex) {
        _this3.setColumnIndex(columnIndex, optionIndex);
      });
    },
    onClickMask: function onClickMask() {
      if (!this.closeOnClickMask) return;
      this.onCancel();
    },
    onCancel: function onCancel() {
      this.$emit('cancel', this);
      this.isActive = false;
    },
    // confirm event handler
    onConfirm: function onConfirm() {
      this.$emit('input', this.getValues());
      this.$emit('confirm', this);
      this.isActive = false;
    }
  },
  render: function render() {
    var _this4 = this;

    var h = arguments[0];
    return h("div", [h("transition", {
      "attrs": {
        "enter-active-class": "weui-animate-fade-in",
        "leave-active-class": "weui-animate-fade-out"
      }
    }, [h("div", {
      "directives": [{
        name: "show",
        value: this.isActive
      }],
      "class": "weui-mask",
      "on": {
        "click": this.onClickMask
      }
    })]), h("transition", {
      "attrs": {
        "enter-active-class": "weui-animate-slide-up",
        "leave-active-class": "weui-animate-slide-down"
      }
    }, [h("div", {
      "directives": [{
        name: "show",
        value: this.isActive
      }],
      "class": "weui-picker"
    }, [h("div", {
      "class": "weui-picker__hd"
    }, [h("div", {
      "class": "weui-picker__action",
      "on": {
        "click": this.onCancel
      },
      "domProps": {
        "textContent": this.cancelText
      }
    }), h("div", {
      "class": "weui-picker__action",
      "on": {
        "click": this.onConfirm
      },
      "domProps": {
        "textContent": this.confirmText
      }
    })]), h("div", {
      "class": "weui-picker__bd",
      "style": this.pickerBodyStyle
    }, [(this.simple ? [this.columns] : this.columns).map(function (column, index) {
      return h(WPickerColumn, {
        "key": index,
        "attrs": {
          "options": _this4.simple ? column : column.options,
          "value-key": _this4.valueKey,
          "default-index": column.defaultIndex,
          "visible-item-count": _this4.visibleItemCount
        },
        "on": {
          "change": function change() {
            _this4.columnValueChange(index);
          }
        }
      });
    })])])])]);
  }
});
//# sourceMappingURL=WPicker.js.map