import WPickerColumn from './WPickerColumn' ; import { PropValidator } from 'vue/types/options' ; import { VNode } from 'vue' ; import { factory as ToaaleableFactory } from '@/mixins/toggleable' ; import mixins from '@/utils/mixins' ; import cloneDeep from 'lodash/cloneDeep' ; const ITEM_HEIGHT = 34 ; type WPickerColumnInstance = InstanceType < typeof WPickerColumn > ; type Column = { options : any [ ] ; [ key ] : any ; } ; type simpleColumns = Array < string | number | object > ; type Columns = Array < Array < string | number | Column > > ; 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 : ( ) => [ ] , } as PropValidator < Columns | simpleColumns > , valueKey : String , visibleItemCount : { type : Number , default : 7 , validator : ( val ) => { return [ 3 , 5 , 7 ] . includes ( val ) ; } , } , value : { type : Array , default : ( ) => [ ] , } as PropValidator < any > , } , data ( ) { return { children : [ ] as WPickerColumnInstance [ ] , } ; } , computed : { pickerBodyStyle ( ) { return { height : this . visibleItemCount * ITEM_HEIGHT + 'px' , } ; } , simple ( ) { return this . columns . length > 0 && ! ( this . columns [ 0 ] as Column ) . options ; } , } , watch : { columns ( val ) { this . setColumns ( val ) ; } , value ( val ) { this . setValues ( val ) ; } , } , mounted ( ) { this . setValues ( this . value ) ; } , methods : { open ( ) { this . isActive = true ; } , close ( ) { this . isActive = false ; } , setColumns ( columns ) { columns . forEach ( ( column , index ) => { this . setColumnOptions ( index , cloneDeep ( ( column as Column ) . options ) ) ; } ) ; } , columnValueChange ( columnIndex ) { if ( this . simple ) { this . $emit ( 'change' , this , this . getColumnOptions ( 0 ) , this . getColumnIndex ( 0 ) ) ; } else { this . $emit ( 'change' , this , this . getValues ( ) , columnIndex ) ; } } , getColumn ( columnIndex ) { const { children } = this ; return children . find ( ( child , index ) => { return child . $options . name === 'w-picker-column' && index === columnIndex ; } ) ; } , getColumnValue ( columnIndex ) { const column = this . getColumn ( columnIndex ) ; return column && column . getValue ( ) ; } , setColumnValue ( columnIndex , value ) { const column = this . getColumn ( columnIndex ) ; column && column . setValue ( value ) ; } , setColumnOptions ( columnIndex , options ) { const column = this . columns [ columnIndex ] ; if ( column ) { ; ( column as Column ) . options = options ; } } , getColumnOptions ( columnIndex ) { return ( this . columns [ columnIndex ] as Column ) . options ; } , getValues ( ) { return this . children . map ( child => child . getValue ( ) ) ; } , setValues ( values ) { values . forEach ( ( value , index ) => { this . setColumnValue ( index , value ) ; } ) ; } , getColumnIndex ( columnIndex ) { return this . getColumn ( columnIndex ) ! . currentIndex ; } , setColumnIndex ( columnIndex , index ) { const column = this . getColumn ( columnIndex ) ; column && column . setIndex ( index ) ; } , getIndexes ( ) { return this . children . map ( child => child . currentIndex ) ; } , setIndexes ( indexes ) { indexes . forEach ( ( optionIndex , columnIndex ) => { this . setColumnIndex ( columnIndex , optionIndex ) ; } ) ; } , onClickMask ( ) { if ( ! this . closeOnClickMask ) return ; this . onCancel ( ) ; } , onCancel ( ) { this . $emit ( 'cancel' , this ) ; this . isActive = false ; } , onConfirm ( ) { this . $emit ( 'input' , this . getValues ( ) ) ; this . $emit ( 'confirm' , this ) ; this . isActive = false ; } , } , render ( ) { return ( < div > < transition enter - active - class = "weui-animate-fade-in" leave - active - class = "weui-animate-fade-out" > < div vShow = { this . isActive } class = "weui-mask" onClick = { this . onClickMask } / > < /transition> < transition enter - active - class = "weui-animate-slide-up" leave - active - class = "weui-animate-slide-down" > < div vShow = { this . isActive } class = "weui-picker" > < div class = "weui-picker__hd" > < div class = "weui-picker__action" onClick = { this . onCancel } domPropsTextContent = { this . cancelText } / > < div class = "weui-picker__action" onClick = { this . onConfirm } domPropsTextContent = { this . confirmText } / > < /div> < div class = "weui-picker__bd" style = { this . pickerBodyStyle } > { ( this . simple ? [ this . columns ] : this . columns ) . map ( ( column , index ) => ( < WPickerColumn key = { index } options = { this . simple ? column : ( column as any ) . options } valueKey = { this . valueKey } defaultIndex = { ( column as any ) . defaultIndex } visibleItemCount = { this . visibleItemCount } onChange = { ( ) => { this . columnValueChange ( index ) ; } } />))} < /div> < /div> < /transition> < /div>); } , } ) ;