<template>
  <div :class="{'active': state == 1}" class="show-select-backdrop" @click.self="returnItem(-1)">
    <div
      ref="selectWrap"
      :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>
      <h-content :cal-content="false" :style="{'height':contentHeight}" :class="{'select-content':multiple}">
        <Picker
          v-if="!multiple"
          :data="list"
          v-model="tempValue"
          :columns="3"
          :key="index"
          @on-change="onPickerChange"
        />
        <list-item
          v-if="multiple" :item-height="35" @click.native.stop="stop">
          <item/>
          <input v-model="value" hidden>
          <item
            v-for="(item,index) in list" :key="index" :show-name="false" :class="{'selected':selectedIndex[index]}"
            @click.native="selected($event,index,item)">
            <div slot="content" class="select-item"><p>{{ item.name }}</p>
              <input v-model="item.value" hidden>
            </div>
          <!--<i slot="right-icon" :class="{'selected':selectedIndex[index]}" class="icon ion-android-done"/>-->
          </item>
          <item/>
        </list-item>
      </h-content>
    </div>
  </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: 0;
      background-color: #fff;

      .h-header {
        .h-header-left .h-header-btn {
          color: #828282;
        }
        .h-header-right .h-header-btn {
          color: #5d98f6;
        }
      }
      .content{
        background-color: #fff;
      }
      .select-content{
       // display: flex;
       // align-items: center;
      }
    }

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

    .hls-list-item{
      .hls-item{
        .add-content{
          .select-item{
            width: 100%;
            text-align: center;
          }
        }
      }
      .selected{
        .add-content{
          p{
            color: #5d98f6;
          }
        }
      }
    }
  }

  .modal-open [vum-show-select] {
    pointer-events: auto;
  }
</style>
<script>
// eslint-disable-next-line import/no-extraneous-dependencies
import assign from 'object-assign'

import { Picker } from 'vux'

export default {
  components: {
    Picker,
  },
  data () {
    return {
      defaultOptions: {
        code: '',
        list: [],
        object: {},
        index: 0,
        multiple: false,
      },
      contentHeight: '380px',
      multiple: false,
      popupTitle: '',
      cancelText: '取消',
      confirmText: '确定',
      code: '',
      value: [],
      name: [],
      list: [],
      object: {},
      state: 0,
      tempValue: [],
      index: '',
      selectedIndex: [],
      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 vm = this
      let _options = assign({}, this.defaultOptions, options)
      this.code = _options.code
      this.list = _options.list
      this.object = _options.object
      this.callBack = _options.callBack
      this.multiple = _options.multiple
      this.state = 1
      this.list.forEach((item, index, array) => {
        this.selectedIndex.push(0)
      })
      setTimeout(function () {
        vm.contentHeight = vm.$refs.selectWrap.clientHeight - 44 + 'px'
      }, 100)
    },

    returnItem (index) {
      let vm = this
      if (index > -1) {
        if (!vm.multiple) {
          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)
        } else {
          vm.callBack(vm.value, vm.name)
        }
      }
      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)
    },
    stop (e) {
    },
    selected (e, index, item) {
      this.selectedIndex[index] = !this.selectedIndex[index]
      this.value.includes(item.value) ? this.value = this.value.filter(n => n !== item.value) : this.value.push(item.value)
      this.name.includes(item.name) ? this.name = this.name.filter(n => n !== item.name) : this.name.push(item.name)
    },
  },
}
</script>
