黄尔冬 / net_iou

<template>
  <transition name="picker-fade">
    <div class="picker" v-show="state" @touchmove.prevent @click="cancel">
      <transition name="picker-move">
        <div class="picker-panel" v-show="state" @click.stop>
          <div class="picker-choose border-bottom-1px">
            <span class="cancel" @click="cancel">{{cancelTxt}}</span>
            <span class="confirm" @click="confirm">{{confirmTxt}}</span>
            <h1 class="picker-title">{{title}}</h1>
          </div>
          <div class="picker-content">
            <div class="mask-top border-bottom-1px"></div>
            <div class="mask-bottom border-top-1px"></div>
            <div class="wheel-wrapper" ref="wheelWrapper">
              <div class="wheel" v-for="(data, index) in pickerData" :key="index">
                <ul class="wheel-scroll">
                  <li v-for="(item, indexl) in data" class="wheel-item" :key="indexl">{{item.text}}</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="picker-footer"></div>
          <div id="FuckIphoneX"></div>
        </div>
      </transition>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll'
  const EVENT_SELECT = 'select'
  const EVENT_VALUE_CHANGE = 'valuechange'
  const EVENT_CANCEL = 'cancel'
  const EVENT_CHANGE = 'change'
  export default {
    name: 'Picker',
    data:() => ({
        state: false,
        data: [],
        pickerData: [],
        pickerSelectedIndex: '',
        pickerSelectedVal: [],
        pickerSelectedText: [],
        year: [],
        month: [{text:'01'}, {text:'02'}, {text:'03'}, {text:'04'}, {text:'05'}, {text:'06'}, {text:'07'}, {text:'08'}, {text:'09'}, {text:'10'},{text:'11'}, {text:'12'}],
        allDays: [{text:'01'}, {text:'02'}, {text:'03'}, {text:'04'}, {text:'05'}, {text:'06'}, {text:'07'},
          {text:'08'}, {text:'09'}, {text:'10'},{text:'11'}, {text:'12'}, {text:'13'}, {text:'14'}, {text:'15'}, 
          {text:'16'}, {text:'17'}, {text:'18'}, {text:'19'}, {text:'20'}, {text:'21'}, {text:'22'}, {text:'23'},
          {text:'24'}, {text:'25'}, {text:'26'}, {text:'27'}, {text:'28'}, {text:'29'}, {text:'30'}, {text:'31'}
        ]
    }),
    props: {
      title: {
        type: String
      },
      cancelTxt: {
        type: String,
        default: '取消'
      },
      confirmTxt: {
        type: String,
        default: '确认'
      },
      selectedIndex: {
        type: Array,
        default() {
          return []
        }
      },
      startDate: {
        type: Date
      },
      display: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      display: function (val, oldVal) {
        if (val) {
          this.show()
        }
      },
      state: function (val, oldVal) {
        if (!val) {
          this.$emit('pickerClose')
        }
      },
      data: function(val, oldVal) {
        this.setData(val)
      }
    },
    created() {
      if (this.startDate) {
        let date = this.startDate
        let year = parseInt(date.getFullYear())
        let month = parseInt(date.getMonth())
        let day = parseInt(date.getDate())
        let start = year
        for (let i = start; i < start + 21; i++) {
          this.year.push({text: i.toString()})
        }
        this.data = this.buildPickerData(year, month, day)
        this.pickerSelectedIndex = [[0], [month], [day - 1]]
        return
      }
      let date = new Date()
      let year = parseInt(date.getFullYear())
      let month = parseInt(date.getMonth())
      let day = parseInt(date.getDate())
      let start = year - 10
      for (let i = start; i < start + 21; i++) {
        this.year.push({text: i.toString()})
      }
      this.data = this.buildPickerData(year, month, day)
      this.pickerSelectedIndex = [[10], [month], [day - 1]]
    },
    methods: {
      buildPickerData(year, month, day) {
        let dayLength
        switch (month) {
          case 0:
          case 2:
          case 4:
          case 6:
          case 7:
          case 9: 
          case 11: 
            dayLength = 31
            break
          case 3: 
          case 5:
          case 8: 
          case 10: 
            dayLength = 30
            break
          case 1:
            if (year % 100 !== 0) {
              if (year % 4 === 0) {
                dayLength = 29
              } else {
                dayLength = 28
              }
            } else {
              if (year % 400 === 0) {
                dayLength = 29
              } else {
                dayLength = 28
              }
            }
            break
          default:
            dayLength = 31
        }
        return [this.year, this.month, this.allDays.slice(0, dayLength)]
      },
      confirm() {
        this.hide()        
        for (let i = 0; i < this.pickerData.length; i++) {
          let index = this.wheels[i].getSelectedIndex()
          this.pickerSelectedIndex[i] = index
        }
        let result = `${this.pickerData[0][this.pickerSelectedIndex[0]].text}-${this.pickerData[1][this.pickerSelectedIndex[1]].text}-${this.pickerData[2][this.pickerSelectedIndex[2]].text}`        
        this.$emit('input', result)
      },
      cancel() {
        this.hide()
        this.$emit(EVENT_CANCEL)
      },
      show() {
        if (this.state) {
          return
        }
        this.state = true
        if (!this.wheels || this.dirty) {
          this.$nextTick(() => {
            this.wheels = []
            let wheelWrapper = this.$refs.wheelWrapper
            for (let i = 0; i < this.pickerData.length; i++) {
              this._createWheel(wheelWrapper, i)
            }
            this.dirty = false
          })
        } else {
          for (let i = 0; i < this.pickerData.length; i++) {
            this.wheels[i].enable()
            this.wheels[i].wheelTo(this.pickerSelectedIndex[i])
          }
        }
      },
      hide() {
        this.state = false
        for (let i = 0; i < this.pickerData.length; i++) {
          this.wheels[i].disable()
        }
        this.$emit('close')
      },
      setData(data) {
        this.pickerData = data.slice()
        this.dirty = true
      },
      setSelectedIndex(index) {
        this.pickerSelectedIndex = index
      },
      refill(datas) {
        let ret = []
        if (!datas.length) {
          return ret
        }
        datas.forEach((data, index) => {
          ret[index] = this.refillColumn(index, data)
        })
        return ret
      },
      refillColumn(index, data) {
        if (!this.state) {
          console.error('can not use refillColumn when picker is not show')
          return
        }
        const wheelWrapper = this.$refs.wheelWrapper
        let scroll = wheelWrapper.children[index].querySelector('.wheel-scroll')
        let wheel = this.wheels[index]
        if (scroll && wheel) {
          let oldData = this.pickerData[index]
          this.$set(this.pickerData, index, data)
          let selectedIndex = wheel.getSelectedIndex()
          let dist = 0
          if (oldData.length) {
            let oldValue = oldData[selectedIndex].value
            for (let i = 0; i < data.length; i++) {
              if (data[i].value === oldValue) {
                dist = i
                break
              }
            }
          }
          this.pickerSelectedIndex[index] = dist
          this.$nextTick(() => {
            // recreate wheel so that the wrapperHeight will be correct.
            wheel = this._createWheel(wheelWrapper, index)
            wheel.wheelTo(dist)
          })
          return dist
        }
      },
      scrollTo(index, dist) {
        const wheel = this.wheels[index]
        this.pickerSelectedIndex[index] = dist
        wheel.wheelTo(dist)
      },
      refresh() {
        this.$nextTick(() => {
          this.wheels.forEach((wheel, index) => {
            wheel.refresh()
          })
        })
      },
      _createWheel(wheelWrapper, i) {
        if (!this.wheels[i]) {
          this.wheels[i] = new BScroll(wheelWrapper.children[i], {
            wheel: {
              selectedIndex: this.pickerSelectedIndex[i],
              /** 默认值就是下面配置的两个，为了展示二者的作用，这里再配置一下 */
              wheelWrapperClass: 'wheel-scroll',
              wheelItemClass: 'wheel-item'
            },
            probeType: 3
          })
          this.wheels[i].on('scrollEnd', () => {
            let year = parseInt(this.pickerData[0][this.wheels[0].getSelectedIndex()].text)         
            let month = parseInt(this.wheels[1].getSelectedIndex())         
            let day = parseInt(this.wheels[2].getSelectedIndex())
            this.data = this.buildPickerData(year, month, day)        
            this.$emit(EVENT_CHANGE, i, this.wheels[i].getSelectedIndex())
          })
        } else {
          this.wheels[i].refresh()
        }
        return this.wheels[i]
      },
      _canConfirm() {
        return this.wheels.every((wheel) => {
          return !wheel.isInTransition
        })
      }
    },
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~assets/css/mixin.styl"
  @import "~assets/css/variable.styl"
  .picker
    position: fixed
    left: 0
    top: 0
    z-index: 100
    width: 100%
    height: 100%
    overflow: hidden
    text-align: center
    font-size: $fontsize-medium
    background-color: $color-mask-bgc
    &.picker-fade-enter, &.picker-fade-leave-active
      opacity: 0
    &.picker-fade-enter-active, &.picker-fade-leave-active
      transition: all .3s ease-in-out
    .picker-panel
      position: absolute
      z-index: 600
      bottom: 0
      width: 100%
      height: 273px
      background: $color-white
      &.picker-move-enter, &.picker-move-leave-active
        transform: translate3d(0, 273px, 0)
      &.picker-move-enter-active, &.picker-move-leave-active
        transition: all .3s ease-in-out
      .picker-choose
        position: relative
        height: 60px
        color: $color-light-grey
        .picker-title
          margin: 0
          line-height: 60px
          font-weight: normal
          text-align: center
          font-size: $fontsize-large-x
          color: $color-dark-grey
        .confirm, .cancel
          position: absolute
          top: 6px
          padding: 16px
          font-size: $fontsize-medium
        .confirm
          right: 0
          color: #ffcc64
          &:active
            color: #dabb84
        .cancel
          left: 0
          &:active
            color: $color-active-light-gray-fe
      .picker-content
        position: relative
        top: 20px
        .mask-top, .mask-bottom
          z-index: 10
          width: 100%
          height: 68px
          pointer-events: none
          transform: translateZ(0)
        .mask-top
          position: absolute
          top: 0
          background: linear-gradient(to top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8))
        .mask-bottom
          position: absolute
          bottom: 1px
          background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8))
      .wheel-wrapper
        display: flex
        padding: 0 16px
        .wheel
          flex-fix()
          height: 173px
          overflow: hidden
          font-size: $fontsize-large-xx
          .wheel-scroll
            padding: 0
            margin-top: 68px
            line-height: 36px
            list-style: none
            .wheel-item
              list-style: none
              height: 36px
              overflow: hidden
              white-space: nowrap
              color: $color-dark-grey
    .picker-footer
      height: 20px
      margin-bottom: constant(safe-area-inset-bottom);
      margin-bottom: env(safe-area-inset-bottom);
    #FuckIphoneX
      position: fixed;
      bottom: 0;
      width: 100%;
      height: constant(safe-area-inset-bottom);
      height: env(safe-area-inset-bottom);
      background-color: #fff;
</style>