import "./index.css";
import _Object$assign from "@babel/runtime-corejs2/core-js/object/assign";

/* script */
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
import Popper from '../Popover';
import Option from './Option';
import { createComponentName, componentMixin } from '../_utils/component.js';
const __vue_script__ = {
  name: createComponentName('select'),
  components: {
    Popper,
    Option
  },
  mixins: [componentMixin],
  model: {
    prop: 'value',
    event: 'change'
  },

  provide() {
    return {
      select: this
    };
  },

  props: {
    // 下拉菜单触发方式
    trigger: {
      //  'click' / 'hover' / null
      type: String,
      default: 'click',
      validator: value => ['click', 'hover', null].indexOf(value) > -1
    },

    /**
     * 浮层位置
     */
    placement: {
      // 'top-start' 'top' 'top-end' 'left-start' 'left' 'left-end' 'bottom-start' 'bottom' 'bottom-end'
      type: String,
      default: 'bottom'
    },
    // 选项
    options: {
      // {value: string; label: string, key?: string}[]
      type: Array,
      default: () => []
    },
    // 占位符, value 没有值时展示
    placeholder: {
      type: String
    },
    // 当前值 可用配合 v-model 使用
    value: {
      type: [String, Number, Array],
      default: ''
    },
    // 偏移位置
    offset: {
      type: String,
      default: '0,6,0,0'
    },
    // 默认值
    defaultValue: {
      type: String,
      default: ''
    },
    // 下拉菜单浮层样式
    popoverStyle: {
      type: Object,

      default() {
        return {};
      }

    },
    // 下拉菜单浮层class
    popoverClass: {
      type: String
    }
  },

  data() {
    let value = '';

    if (this.$hasProp('value')) {
      value = this.value;
    } else if (this.$hasProp('defaultValue')) {
      value = this.defaultValue;
    }

    return {
      innerValue: value,
      visible: false,
      label: ''
    };
  },

  computed: {
    currentValue() {
      if (this.$hasProp('value')) {
        return this.value;
      }

      return this.value || this.innerValue;
    },

    currentLabel() {
      const option = this.options.find(opt => opt.value === this.currentValue);
      return option ? option.label : '';
    }

  },
  methods: {
    setOption(value, label) {
      if (value === this.currentValue) return;
      this.innerValue = value;
      this.label = label;
      this.visible = false; // 修改选项值触发

      this.$emit('change', value);
    },

    getPopperStyle() {
      if (this.$refs.select && this.visible) {
        this.lastWidth = `${this.$refs.select.$el.clientWidth}px`;
      }

      return _Object$assign({
        width: this.lastWidth
      }, this.popoverStyle);
    }

  }
};
/* template */

var __vue_render__ = function () {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c("Popper", {
    ref: "select",
    class: _vm.bem(),
    attrs: {
      trigger: _vm.trigger,
      transitionName: "gd-fade",
      visible: _vm.visible,
      tag: "span",
      placement: _vm.placement,
      modifiers: {
        offset: {
          offset: _vm.offset
        }
      }
    },
    on: {
      "update:visible": function ($event) {
        _vm.visible = $event;
      }
    }
  }, [_vm.currentLabel ? _c("em", {
    class: _vm.bem("label")
  }, [_vm._v(_vm._s(_vm.currentLabel))]) : _c("em", {
    class: _vm.bem("placeholder")
  }, [_vm._v(_vm._s(_vm.placeholder))]), _vm._v(" "), _c("i", {
    class: _vm.bem("arrow")
  }), _vm._v(" "), _c("ul", {
    ref: "popup",
    class: [_vm.bem("popover"), _vm.popoverClass],
    style: _vm.getPopperStyle(),
    attrs: {
      slot: "popup"
    },
    slot: "popup"
  }, _vm._l(_vm.options, function (item) {
    return _c("li", {
      key: item.key || item.value
    }, [_c("Option", {
      attrs: {
        label: item.label,
        value: item.value
      }
    }, [_vm._t("default", null, {
      data: item
    })], 2)], 1);
  }), 0)]);
};

var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */

const __vue_inject_styles__ = undefined;
/* scoped */

const __vue_scope_id__ = undefined;
/* module identifier */

const __vue_module_identifier__ = undefined;
/* functional template */

const __vue_is_functional_template__ = false;
/* component normalizer */

import __vue_normalize__ from '../_utils/vue-normalize-component.js';
/* style inject */

/* style inject SSR */

export default __vue_normalize__({
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, undefined, undefined);