<template>
  <div class="show-select-backdrop" :class="{'active': state == 1}" @click="returnItem(-1)">
    <h-content class="show-select-wrapper"
         :class="{'show-select-up': state == 1}">
      <div class="list">
        <popup-header
          :left-text="cancelText"
          :right-text="confirmText"
          @on-click-left="returnItem(-1)"
          @on-click-right="returnItem(1)"
          :title="popupTitle"></popup-header>
        <picker
          :data="list"
          v-model="tempValue"
          :columns="3"
          @on-change="onPickerChange"
          :key="index"
        ></picker>
      </div>
    </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;
    .weui-tab {
      width: 100%;
    }
    &.active {
      background-color: rgba(0, 0, 0, 0.3);
    }
    .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%;
      border-radius: 6px;
      left: 0;
      top: auto;
      padding-top: 0px;
      .list {
        border: none;
        //padding: 40px 0px 0px 0px;
        width: 100%;
        background-color: white;
        .vux-popup-header {
          border-bottom: 1px solid #ccc !important;
        }
      }
    }

    .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'

  export default {
    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';
          vm.object[code] = vm.value;
          vm.object[code_name] = vm.name;
          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;
        vum.forEach(list, function (date, index, array) {
          if (date.value === value) {
            vm.index = index;
            vm.name = date.name;
            return;
          }
        })
      },
      findChildIndex(list, value) {
        let vm = this;
        vum.forEach(list, function (date, index, array) {
          if (date.value === value) {
            vm.childs.index = index;
            vm.childs.name = date.name;
            return;
          }
        })
      },
      findChild2Index(list, value) {
        let vm = this;
        vum.forEach(list, function (date, index, array) {
          if (date.value === value) {
            vm.childs.child.index = index;
            vm.childs.child.name = date.name;
            return;
          }
        })
      },
      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>