<template>
  <div class="picker" :class="{ 'picker-3d': rotateEffect }">
    <div class="picker-toolbar" v-if="showToolbar"><slot></slot></div>
    <div class="picker-items">
      <picker-slot
        v-for="(slot, index) in slots"
        :key="index"
        :checkKey="checkKey"
        :valueKey="valueKey"
        :values="slot.values || []"
        :text-align="slot.textAlign || 'center'"
        :visible-item-count="visibleItemCount"
        :class-name="slot.className"
        :flex="slot.flex"
        v-model="values[slot.valueIndex]"
        :rotate-effect="rotateEffect"
        :divider="slot.divider"
        :content="slot.content"
        :highlightHeight="highlightHeight"
        :itemHeight="itemHeight"
        :default-index="slot.defaultIndex">
      </picker-slot>
      <div
        class="picker-center-highlight"
        :style="{ height: highlightHeight + 'PX', marginTop: -highlightHeight / 2 + 'PX' }">
      </div>
    </div>
  </div>
</template>

<script>
import create from '../utils/create'
import PickerSlot from './pickerSlot'
export default create({
  name: 'picker',

  componentName: 'picker',

  props: {
    slots: {
      type: Array
    },
    showToolbar: {
      type: Boolean,
      default: false
    },
    visibleItemCount: {
      type: Number,
      default: 5
    },
    valueKey: String,
    checkKey: {
      type: String,
      default: 'value'
    },
    rotateEffect: {
      type: Boolean,
      default: false
    },
    itemHeight: {
      type: Number,
      default: 36
    },
    highlightHeight: {
      type: Number,
      default: 50
    }
  },

  created() {
    this.renderUpdated()
  },

  methods: {
    renderUpdated () {
      this.$on('slotValueChange', this.slotValueChange);
      var slots = this.slots || [];
      this.values = [];
      var values = this.values;
      var valueIndexCount = 0;
      slots.forEach(slot => {
        if (!slot.divider) {
          slot.valueIndex = valueIndexCount++;
          values[slot.valueIndex] = (slot.values || [])[slot.defaultIndex || 0];
          this.slotValueChange();
        }
      })
    },

    slotValueChange() {
      this.$emit('change', this, this.values);
    },

    getSlot(slotIndex) {
      var slots = this.slots || [];
      var count = 0;
      var target;
      var children = this.$children.filter(child => child.$options.name === 'drip-picker-slot');
      slots.forEach(function(slot, index) {
        if (!slot.divider) {
          if (slotIndex === count) {
            target = children[index];
          }
          count++;
        }
      });

      return target;
    },
    getSlotValue(index) {
      var slot = this.getSlot(index);
      if (slot) {
        return slot.value;
      }
      return null;
    },
    setSlotValue(index, value) {
      var slot = this.getSlot(index);
      if (slot) {
        slot.currentValue = value;
      }
    },
    getSlotValues(index) {
      var slot = this.getSlot(index);
      if (slot) {
        return slot.mutatingValues;
      }
      return null;
    },
    setSlotValues(index, values) {
      var slot = this.getSlot(index);
      if (slot) {
        slot.mutatingValues = values;
      }
    },
    getValues() {
      return this.values;
    },
    setValues(values) {
      var slotCount = this.slotCount;
      values = values || [];
      if (slotCount !== values.length) {
        throw new Error('values length is not equal slot count.');
      }
      values.forEach((value, index) => {
        this.setSlotValue(index, value);
      });
    }
  },

  computed: {
    values: {
      get() {
        var slots = this.slots || [];
        var values = [];
        slots.forEach(function(slot) {
          if (!slot.divider) values.push(slot.value);
        });

        return values;
      },
      set(values) {
        var slots = this.slots || [];
        var valueIndexCount = 0;
        slots.forEach(function(slot) {
          if (!slot.divider) {
            slots.value = values[valueIndexCount];
            valueIndexCount = valueIndexCount + 1;
          }
        });
      }
    },
    slotCount() {
      var slots = this.slots || [];
      var result = 0;
      slots.forEach(function(slot) {
        if (!slot.divider) result++;
      });
      return result;
    }
  },

  components: {
    PickerSlot
  }
});
</script>
