<template>
  <div class="picker" :class="{ 'picker-3d': rotateEffect }">
    <div class="fdc-choose__header" v-if="showToolbar">
      <slot></slot>
    </div>
    <div class="picker-items">
      <picker-slot v-for="(slot,index) in slots"
        :key="index" 
        :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" 
        :default-index="slot.defaultIndex"></picker-slot>
        <div class="picker-item-highlight-box">
          <div v-for="item in visibleItemCount" :key="item" class="picker-item-highlight" :style="{ height: itemHeight + 'rem'}"></div>
        </div> 
    </div>
  </div>
</template>

<style lang="scss">
//选择弹出样式
.fdc-choose {
  &__wrapper {
    width: 100%;
  }
  &__header {
    height: 90px;
    line-height: 90px;
    display: flex;
    justify-content: space-between;
  }
  &__action {
    text-align: center;
    padding: 0 60px;
    font-weight: bold;
    font-size: 36px;
    /*px*/
  }
  &__cancel {
    @extend .fdc-choose__action;
    color: #666666;
  }
  &__confirm {
    @extend .fdc-choose__action;
    color: #1b6bd2;
  }
}
.picker {
  overflow: hidden;
}

.picker-toolbar {
  height: 90px;
}

.picker-items {
  display: flex;
  justify-content: center;
  padding: 0;
  text-align: right;
  font-size: 48px;
  position: relative;
}
.picker-item-highlight-box{
  width:100%;
  position: absolute;
  top:0;
  left:0;
  z-index:-1;
}
.picker-item-highlight {
  // box-sizing: border-box;
  position: relative;
  // left: 0;
  width: 100%;
  // top: 50%;
  // margin-top: -36px;
  pointer-events: none;
  height: 72px;
  line-height: 72px;
  // &:last-child{
  //   &:before{
  //     height: 0;
  //   }
  // }
}
// .picker-center-highlight {
//     box-sizing: border-box;
//     position: absolute;
//     left: 0;
//     width: 100%;
//     top: 50%;
//     margin-top: -18px;
//     pointer-events: none
//   }

.picker-item-highlight:before {
  content: " ";
  position: absolute;
  height: 1px;/*no*/
  width: 100%;
  background-color: #eaeaea;
  display: block;
  z-index: 15;
  transform: scaleY(0.5);
}

.picker-item-highlight:before {
  left: 0;
  top: 0;
  bottom: auto;
  right: auto;
}

// .picker-center-highlight:after {
//   left: 0;
//   bottom: 0;
//   right: auto;
//   top: auto;
// }
</style>

<script type="text/babel">
export default {
  name: 'mt-picker',

  componentName: 'picker',

  props: {
    slots: {
      type: Array
    },
    showToolbar: {
      type: Boolean,
      default: false
    },
    visibleItemCount: {
      type: Number,
      default: 5
    },
    valueKey: String,
    rotateEffect: {
      type: Boolean,
      default: false
    },
    itemHeight: {
      type: Number,
      default: 1.2
    }
  },

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

  methods: {
    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 === '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() {
      var slots = this.slots || [];
      var values = [];
      slots.forEach(function(slot) {
        // console.log(slot, '=========');
        if (!slot.divider) values.push(slot.values[slot.defaultIndex]);
      });

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

  components: {
    PickerSlot: require('./picker-slot.vue')
  }
};
</script>
