<template>
  <popup :reverse="reverse" :height="height" v-model="showPopup" :id="popupId" @on-show="onPopupShow" @on-hide="onPopupHide" :mask="hasMask">
    <div class="iosSmallBox" v-if="isIos10 === false">
      <span class="iosSmallLeft" @click="cancelClick">取消</span>
      <span class="iosSmallRight" @click="confirmClick">确认</span>
    </div>
    <flexbox :gutter='0' v-else class="popup-picker-button-line">
      <flexbox-item :span="1/5" class="cancelText">
        <i-button :color="defaultColor" @click.native="cancelClick">{{cancelText}}</i-button>
      </flexbox-item>
      <flexbox-item :span="3/5" class="clearText">{{clearText}}</flexbox-item>
      <flexbox-item :span="1/5" class="confirmText">
        <i-button :color="defaultColor" @click.native="confirmClick">{{confirmText}}</i-button>
      </flexbox-item>
    </flexbox>
    <picker v-model="currentValue" :data="data" :columns="columns" :fixed-columns="fixedColumns" :column-width="columnWidth" @on-change="onPickerChange"></picker>
  </popup>
</template>
<script>
import Popup from '../../popup'
import Picker from '../../picker'
import Flexbox from '../../flexbox'
import FlexboxItem from '../../flexboxItem'
import IButton from '../../button'

export default {
  name: 'popupPicker',
  components: {
    Popup,
    Picker,
    Flexbox,
    FlexboxItem,
    IButton
  },
  props: {
    reverse: Boolean,
    height: String,
    value: Array,
    data: Array,
    columns: Number,
    fixedColumns: Number,
    columnWidth: Array,
    show: Boolean,
    confirmText: {
      type: String,
      default: '确认'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    clearText: {
      type: String
    },
    mask:{
      type:Boolean,
      default: false
    }
  },
  created() {
    let str = navigator.userAgent.toLowerCase();
    let ver = str.match(/cpu iphone os (.*?) like mac os/);
    if (ver) {
      let iphoneOs = ver[1].split('_')[0];
      if(iphoneOs* 1 < 10) {
        this.isIos10 = false;
      } else {
        this.isIos10 = true;
      }
    }
  },
  data() {
    return {
      uuid: Math.random().toString(36).substring(3, 8),
      showPopup: this.show,
      currentValue: this.value,
      initCurrentValue: JSON.parse(JSON.stringify(this.value)),
      defaultColor: 'default',
      currValue1: null,
      currValue2: null,
      isIos10:true,
      hasMask:this.mask
    }
  },
  methods: {
    onPickerChange(val1, val2) {
      this.currValue1 = val1
      this.currValue2 = val2
    },
    onPopupShow() {
      this.$emit('on-show',this.currentValue)
    },
    onPopupHide() {
      this.$emit('on-hide',this.currentValue)
    },
    cancelClick() {
      this.currentValue = JSON.parse(JSON.stringify(this.initCurrentValue))
      this.$nextTick(() => {
        this.showPopup = false
      })
    },
    confirmClick() {
      this.initCurrentValue = JSON.parse(JSON.stringify(this.currentValue))
      this.$nextTick(() => {
        this.showPopup = false
        this.$emit('on-change', this.currValue1, this.currValue2)
      })
    }
  },
  computed: {
    popupId() {
      return `popup-picker-${this.uuid}`
    }
  },
  watch: {
    show(val) {
      this.showPopup = val
    },
    value(val){
      this.currentValue = val
    },
    mask(val){
      this.hasMask = val
    }
  }
}
</script>
