<template>
  <div class="clear-fix">
    <div class="select mui-flex aic fl"
         @click="tapShowPicker">
      <div class="select__text txt-ovh">{{text}}</div>
      <!-- 右指向图标 -->
      <div class="icon icon--arrow-1"
           v-if="icon==='arrow-1'"></div>
      <!-- 三角形图标 -->
      <i class="icon icon--arrow-2"
         v-if="icon==='arrow-2'"></i>
      <!-- 向下三角形 -->
      <div class="icon icon--arrow-3"
           v-if="icon==='arrow-3'"></div>
    </div>
  </div>
</template>
<script>
import Picker from 'better-picker';
const STATUS_LOADING = 'STATUS_LOADING';
export default {
  name: 'Select',
  model: {
    prop: 'text',
    event: 'my-change'
  },
  props: {
    icon: {
      type: String,
      default: 'arrow-1'
    },
    title: {
      type: String,
      default: ''
    },
    confirmColor: {
      type: String,
      default: '#fdd535'
    },
    list: {
      type: Array,
      default() {
        return [];
      }
    },
    // v-modal 需要的值
    text: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      picker: null
    };
  },
  watch: {
    list: {
      handler(val, oldVal) {
        this.init();
      },
      immediate: true
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    init() {
      if (this.picker) {
        // 替换数据
        if (this.picker.wheels) {
          this.picker.refillColumn(0, this.list);
          this.picker.scrollColumn(0, this.getIndexByText(this.list, this.text) || 0);
        }
        return;
      }
      let { list, title } = this;
      list = this.loadingStatus(list);
      const picker = this.picker = new Picker({
        data: [list],
        selectedIndex: [0],
        title
      });
      let $item;
      for (let i = 0, len = picker.wheelEl.length; i < len; i++) {
        $item = picker.wheelEl[i];
        $item.style.fontSize = '16px';
      }
      picker.confirmEl.style.color = this.confirmColor;
      picker.maskEl.addEventListener('click', () => {
        picker.hide();
      });

      picker.on('picker.select', (selectedVal, selectedIndex) => {
        if (selectedVal[0] === STATUS_LOADING) {
          return;
        }
        const obj = this.getItemByIndex(this.list, selectedIndex[0]);
        this.$emit('on-confirm', obj);
        this.$emit('my-change', obj.text);
      });
      /**
       * @desc 改变picker的时候触发
       */
      picker.on('picker.change', (index, selectedIndex) => {

      });
      picker.on('picker.valuechange', (selectedVal, selectedIndex) => {
        if (selectedVal[0] === STATUS_LOADING) {
          return;
        }
        const obj = this.getItemByIndex(this.list, selectedIndex[0]);
        this.$emit('on-select', obj);
        // this.$emit('my-change', obj.text);
      });
    },
    /**
     * @desc 没有数据的时候显示正在加载中...字样
     */
    loadingStatus(list) {
      return list && list.length === 0 ? [{ text: '数据正在加载中...', value: STATUS_LOADING }] : list;
    },
    /**
     * @desc 根据Text获取Index
     */
    getIndexByText(arr, text) {
      let i = arr.length;
      while (i--) {
        if (arr[i].text === text) {
          return i;
        }
      }
    },
    /**
     * @desc 根据Index获取item
     */
    getItemByIndex(arr, index) {
      let i = arr.length;
      while (i--) {
        if (i === index) {
          return arr[i];
        }
      }
    },

    tapShowPicker() {
      if (this.disabled) return;
      this.picker.show(() => {
        // 判断浏览器的y是否为0
        const st = window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop ||
          0;
        if (st <= 0) {
          window.scrollTo(0, 1);
        }
        this.picker.refillColumn(0, this.loadingStatus(this.list));
        this.picker.scrollColumn(0, this.getIndexByText(this.list, this.text) || 0);
      });
    },
    destroy() {
      const $el = this.picker.pickerEl;
      $el.parentNode && $el.parentNode.removeChild($el);
    }
  },
  destroyed() {
    this.destroy();
  },
  deactivated() {
    // 隐藏而不是销毁
    this.picker.pickerEl.style.display === 'block' && this.picker.hide();
  }
};
</script>

<style>

</style>

<style lang="less" scoped>

</style>
