<template>
  <zgh-actionsheet class="bottom" v-model="currentActive.activeShow">
    <div slot="content" class="h100 bgf">
      <div class="picker-btn borderB">
        <button class="pd15" @click="cancelHandle">取消</button>
        <button class="r pd15" @click="confirmHandle">确认</button>
      </div>
      <div class="clearfix picker">
        <span class="before"></span>
        <div class="add-select" :class="'col-xs-'+12/pickerData.length" v-for="(item,index) in pickerData" :key="index">
          <swiper class="h100 " :options="swiperAddrOpt" ref="mySwipers">
            <swiper-slide class="textC " v-for="(area,index) in item" :key="index">
              <div class="middle h100 middle_before">
                <div class="middle">{{area[keyName]}}</div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
    </div>
  </zgh-actionsheet>

</template>

<script>
  import ActionSheet from '../ActionSheet/main'
  import {
    swiper,
    swiperSlide
  } from 'vue-awesome-swiper'

  export default {
    name: 'ZghPicker',
    components: {
     "zgh-actionsheet": ActionSheet,
      swiper,
      swiperSlide
    },
    props: {
      value: {
        default() {
          return false;
        }
      },
      keyName:{
        type:String,
        default:'name'
      },
      keyValue:{
        type:String,
        default:'value'
      },
      pickerData: {
        default() {
          return [[{
            value: 1,
            name: '广州'
          }], [{
            value: 1,
            name: '广州'
          }], [{
            value: 1,
            name: '广州'
          }]]
        }
      },
      swiperOpt: {
        default() {
          return {
            freeMode: true
          }
        }
      }
    },
    data() {
      let self = this;
      return {
        currentActive: this.value,
        selectAttrs: Object.assign([], this.value.selectValue),
        activeIndex: 0,
        swiperAddrOpt: Object.assign({
          direction: 'vertical',
          slidesPerView: 5,
          freeMode: true,
          freeModeSticky: true,
          // spaceBetween: 4,
          centeredSlides: true,
          onClick(swiper) {
            swiper.slideTo(swiper.clickedIndex, 100, false);
            self.selectAddrHandle(swiper)
          },
          // onSlideChangeEnd: this.selectAddrHandle,
          onTransitionEnd:this.selectAddrHandle
        }, this.swiperOpt)
      }
    },
    computed: {},
    watch: {
      currentActive(val) {
        this.$emit('input', val);
      },
      value() {
        this.currentActive = this.value;
      }
    },
    mounted() {

    },
    methods: {
      //swiper切换   同时调取父组件changeSlide方法，把当前切换选中的数据 和 索引 作为参数
      selectAddrHandle(swiper) {
        this.$refs.mySwipers.forEach((val, index) => {
          if (swiper == val.swiper) {
            this.activeIndex = index;
          }
        })
        console.log(this.activeIndex, 1111)
        // switch (swiper) {
        //   case this.swiper0:
        //     this.activeIndex = 0
        //     break;
        //   case this.swiper1:
        //     this.activeIndex = 1
        //     break;
        //   case this.swiper2:
        //     this.activeIndex = 2
        //     break;
        // }
        let i = this.activeIndex + 1;
        console.log(swiper)
        // this.$set(this.selectAttrs, this.activeIndex, this.pickerData[this.activeIndex][swiper.activeIndex])
        //当前选中的值
        this.$emit('changeSlide', i, this.pickerData[this.activeIndex][swiper.activeIndex])

        // if(i<this.pickerData.length){
        //   console.log(this.$refs.mySwipers[2],'sssss')
        //   this.selectAddrHandle(this.$refs.mySwipers[i].swiper);
        //
        // }

      },
      //确认选中
      confirmHandle() {
        this.currentActive.activeShow = false;
        this.pickerData.forEach((val, index) => {
          if (val.length>0) {
            this.selectAttrs[index] = this.pickerData[index][this.$refs.mySwipers[index].swiper.activeIndex]
          }else{
            this.selectAttrs[index]={name:'',value:''}
          }
        })
        let attrs= Object.assign([], this.selectAttrs)
        this.currentActive.selectValue = attrs;
        this.$emit('sureHandle');
      },
      //取消选中
      cancelHandle() {
        this.currentActive.activeShow = false;
        let attrs = Object.assign([], this.value.selectValue)
        this.selectAttrs = attrs;
        this.initialSlide(false);
        setTimeout(()=>{
          this.$emit('changeSlide', 1, this.selectAttrs[0])
        }, 500);

      },
      //初始化到选中
      initialSlide(state=true) {
        setTimeout(() => {
          this.pickerData.forEach((val, index) => {
            if(!this.currentActive.selectValue[index].value) this.selectAttrs[index] = this.pickerData[index][0]
          })
          this.selectAttrs.forEach((val, index) => {
            if(this.pickerData[index].length>0){
              this.pickerData[index].forEach((val2, index2) => {
                if (val.value == val2.value) {
                  this.$refs.mySwipers[index].swiper.slideTo(index2, 0, false);
                  if(state){
                    this.$set(this.currentActive.selectValue,index,val2)
                  }
                }
              })
            }

          })
          console.log( this.currentActive.selectValue,1231231231)
        }, 500)
      }
    }
  }
</script>

<style lang="less" scoped>
  @import url("../../assets/config.less");

  @common_color: 'red';
  .picker {
    position: relative;
    height:100%;
    /*background: #eee;*/
    .before {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 20%;
      transform: translate(-50%, -50%);
      background: #eee;
      z-index: -1;
    }

  }

  .picker-btn {
    button {
      color: @common_cl;
    }
  }


  .add-select {
    .m-h(500);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    color: #888;
    .swiper-slide-active {
      color: #000;
      font-weight: bold;
      /*background: #fff;*/
    }

  }

</style>
