<template>
  <div class="wrap" :style="wrapStyle">
    <div v-if="mode=='selector'">
      <picker :list-array="listArray" :label="label&&label.length>0?label[0]:''" 
        :item-index="itemIndex?itemIndex[0]:0" 
        raduis-type="all" @onChange="singleChangeValue" 
      ></picker>
    </div>
    <div v-if="mode=='two-column'" class="tColumn" >
      <picker v-for="i in listArray.length" :key="i" 
          :wrap-width="710*(wrapWidth[i-1]/multiLen)"  
          :list-array="listArray[i-1]" 
          :label="label[i-1]" 
          :item-index="itemIndex[i-1]" 
          :raduis-type="selectAreaType(i-1)"
          @onChange="changeValue($event, i-1)" ></picker>
    </div>
    <div v-if="mode=='time'" class="tColumn" >
      <picker v-for="i in timeArr.length" :key="i" 
          :wrap-width="355"  
          :list-array="timeArr[i-1]" 
          :label="timelabelArr[i-1]" 
          :item-index="timeItemIndexArr[i-1]" 
          :raduis-type="timeRadiusArr[i-1]"
          @onChange="changeTimeValue($event, i-1)" ></picker>
    </div>
  </div>
</template>
<script>
const dom = weex.requireModule('dom');
const modal = weex.requireModule('modal');
const animation = weex.requireModule('animation')
import { Core } from '../../index';
import picker from './picker.vue';

export default {
  components:{
    picker
  },
  props: {
    // mode:String,
    mode: {
      type: String,
      default: 'selector' //picker类型 'selector'/'multiselector'
    },
    listArray: {
      type: Array,
      default: function () {
        return [];
      }
    },
    wrapWidth: {
      type: Array,
      default: []
    },
    itemIndex: {
      type: Array,
      // default: [0]
      default: function(){
        return new Array(this.listArray.length).fill(0)
      }
    },
    label: {
      type: Array,
      default: []
    },
    labelOffset: {
      type: Number,
      default: null
    },
    align: {
      type: String,
      default: 'center' // 'center'/'left'
    }
  },
  data() {
    return {
      indexArr:[],   //picker索引集合
      timeArr:[],
      timelabelArr:['时', '分'],
      timeRadiusArr:['left','right'],
      timeItemIndexArr:[10,30]
    };
  },

  created(){
    const { mode } = this
    if (mode == 'time') {
      let hourList = [], minutesList = []
      for (let index = 0; index < 24; index++) {
        hourList.push({ index: index, value: index });
      }
      for (let index = 0; index < 60; index++) {
        minutesList.push({ index: index, value: index });
      }
      this.timeArr = [hourList, minutesList]
    }
  },

  mounted(){
    const { mode } = this
    mode == 'time'? this.currentTime():''
  },

  computed: {
    multiLen(){
      let { wrapWidth } = this
      let sum = 0;
      wrapWidth.forEach(item =>{
          sum = sum + item
      })
      console.log("sum", sum)
      return sum
    },

    
  },
  
  watch: {
    itemIndex:{
      handler(newVal){
        this.indexArr = newVal
      },
      immediate:true
    }
  },
  methods: {
    selectAreaType(index){
      const { listArray } = this
      if (index==0) { return 'left' }
      if (0 < index < listArray.length-1 ) { return 'mid' }
      if (index == listArray.length-1) { return 'right' }
    },

    currentTime(){
      let hour, minutes,curTime = new Date()
      hour = curTime.getHours();       //获取当前小时数(0-23)
      minutes = curTime.getMinutes();     //获取当前分钟数(0-59)
      console.log(`hour:${hour}, minutes:${minutes}`)
    },

    // 单列选择
    singleChangeValue(event){
      const { listArray } = this
      // Core.toast(`column:${0}, event.index${event.index}`)
      let selectData = {index:event.index, value:listArray[event.index].value}
      this.$emit('onChange', selectData);
    },

    changeValue(event, columnIndex){
      let { listArray } = this
      // Core.toast(`column:${columnIndex}, event.index${event.index}`)
      this.indexArr[columnIndex] = event.index
      let selectData = []
      for (let index = 0; index < listArray.length; index++) {
        selectData.push({ index:this.indexArr[index], value:listArray[index][this.indexArr[index]].value})
      }
      // this.$emit('onChange', this.listArray[event.index]);
      this.$emit('onChange', selectData);
    },

    // 时间picker事件
    changeTimeValue(event, columnIndex){
      let { mode, timeItemIndexArr } = this
      // Core.toast(`column:${columnIndex}, event.index${event.index}`)
      this.timeItemIndexArr[columnIndex] = event.index
      let selectData = []
      for (let index = 0; index < 2; index++) {
        selectData.push({ index:index, value:timeItemIndexArr[index]})
      }
      this.$emit('onChange', selectData);
    }
  },
  mounted() {
  
  }
};
</script>

<style>
.wrap{
  width: 710px;
  height: 408px;
}

.tColumn{
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
}
</style>
