<template>
  <div :class="{'active': state == 1}" class="show-select-backdrop" @click="returnItem(-1)">
    <h-content
      :class="{'show-select-up': state == 1}"
      class="show-select-wrapper">
      <!-- <popup-header
        :left-text="cancelText"
        :right-text="confirmText"
        :title="popupTitle"
        @on-click-left="returnItem(-1)"
        @on-click-right="returnItem(1)"/>-->
      <h-header style="padding-top: 0">
        <div slot="left" class="h-header-btn" @click="returnItem(-1)">
          {{ cancelText }}
        </div>
        <div slot="center">{{ popupTitle }}</div>
        <div slot="right" class="h-header-btn" @click="returnItem(1)">
          {{ confirmText }}
        </div>
      </h-header>
      <Picker
        :data="list"
        v-model="tempValue"
        :columns="3"
        :key="index"
        @on-change="onPickerChange"
      />
    </h-content>
  </div>
</template>
<style lang="less" scoped>
  .show-select-backdrop {
    -webkit-transition: background-color 150ms ease-in-out;
    transition: background-color 150ms ease-in-out;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background-color: transparent;

    &.active {
      background-color: rgba(0, 0, 0, 0.2);
    }

    .show-select-wrapper {
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
      -webkit-transition: all cubic-bezier(0.36, 0.66, 0.04, 1) 500ms;
      transition: all cubic-bezier(0.36, 0.66, 0.04, 1) 500ms;
      bottom: 0 !important;
      position: absolute !important;
      max-height: 50% !important;
      width: 100%;
      left: 0;
      top: auto;
      padding-top: 0px;
      background-color: #fff;

      .h-header {
        .h-header-left .h-header-btn {
          color: #828282;
        }
        .h-header-right .h-header-btn {
          color: #5D98F6;
        }
      }
    }

    .show-select-up {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }

  .modal-open [vum-show-select] {
    pointer-events: auto;
  }
</style>
<script>
import assign from 'object-assign'

import { Picker } from 'vux'

export default {
  components: {
    Picker
  },
  data () {
    return {
      defaultOptions: {
        code: '',
        list: [],
        object: {},
        index: 0,
      },
      popupTitle: '',
      cancelText: '取消',
      confirmText: '确定',
      code: '',
      value: '',
      name: '',
      list: [],
      object: {},
      state: 0,
      tempValue: [],
      index: '',
      callBack: null,
      childs: {
        index: '',
        value: '',
        name: '',
        child: {
          index: '',
          value: '',
          name: '',
        },
      },
    }
  },
  mounted () {
    this.$el.setAttribute('vum-show-select', '')
  },

  destroyed () {
    document.body.removeChild(this.$el)
  },

  methods: {
    show (options) {
      let _options = assign({}, this.defaultOptions, options)
      this.code = _options.code
      this.list = _options.list
      this.object = _options.object
      this.callBack = _options.callBack
      this.state = 1
    },

    returnItem (index) {
      let vm = this
      if (index > -1) {
        let code = vm.code
          let code_name = vm.code + '_n' // eslint-disable-line
        vm.object[code] = vm.value
          vm.object[code_name] = vm.name // eslint-disable-line
        vm.callBack(vm.index, vm.object, vm.childs)
      }
      this.state = 0
      let wrapper = document.querySelector('[vum-show-select]')
      wrapper.addEventListener('webkitTransitionEnd', () => {
        this.$destroy()
      }, false)
    },
    findIndex (list, value) {
      let vm = this
      list.forEach((date, index, array) => {
        if (date.value.toString() === value) {
          vm.index = index
          vm.name = date.name
        }
      })
    },
    findChildIndex (list, value) {
      let vm = this
      list.forEach((date, index, array) => {
        if (date.value.toString() === value) {
          vm.childs.index = index
          vm.childs.name = date.name
        }
      })
    },
    findChild2Index (list, value) {
      let vm = this
      list.forEach((date, index, array) => {
        if (date.value.toString() === value) {
          vm.childs.child.index = index
          vm.childs.child.name = date.name
        }
      })
    },
    onPickerChange (val) {
      let vm = this
      // 联动时
      if (val.length === 2) {
        vm.childs.value = val[1]
        this.findChildIndex(vm.list, val[1])
        vm.childs.child = {}
      }
      if (val.length === 3) {
        vm.childs.value = val[1]
        this.findChildIndex(vm.list, val[1])

        vm.childs.child.value = val[2]
        this.findChild2Index(vm.list, val[2])
      }
      if (val.length === 1) {
        vm.childs = {}
      }
      vm.value = val[0]
      this.findIndex(vm.list, vm.value)
    },
  },
}
</script>
