"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _vue = _interopRequireWildcard(require("vue"));

var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));

var _configProvider = require("../config-provider");

var _BaseMixin = _interopRequireDefault(require("../_util/BaseMixin"));

var _pickrEs = _interopRequireDefault(require("@simonwep/pickr/dist/pickr.es5.min"));

var _icon = _interopRequireDefault(require("../icon"));

var _LocaleReceiver = _interopRequireDefault(require("../locale-provider/LocaleReceiver"));

var _en_US = _interopRequireDefault(require("./locale/en_US"));

var _debounce = _interopRequireDefault(require("lodash/debounce"));

var _propsUtil = require("../_util/props-util");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var colors = '#194d33';
var _default2 = {
  name: 'AColorPicker',
  mixins: [_BaseMixin.default],
  model: {
    prop: 'value',
    event: 'change.value' //为了支持v-model直接返回颜色字符串 所以用了自定义的事件,与pickr自带change事件进行区分

  },
  props: {
    prefixCls: _vueTypes.default.string,
    defaultValue: _vueTypes.default.string,
    //默认值
    config: _vueTypes.default.object,
    //pickr配置
    value: _vueTypes.default.string,
    //颜色值
    locale: _vueTypes.default.object,
    //双语包
    colorRounded: _vueTypes.default.number,
    //颜色数值保留几位小数
    size: _vueTypes.default.oneOf(['default', 'small', 'large']).def('default'),
    //尺寸
    getPopupContainer: _vueTypes.default.func,
    //指定渲染容器
    disabled: _vueTypes.default.bool.def(false),
    //是否禁用
    format: _vueTypes.default.string,
    //颜色格式设置
    alpha: _vueTypes.default.bool.def(false),
    //是否开启透明通道
    hue: _vueTypes.default.bool.def(true) //是否开启色彩预选

  },
  inject: {
    configProvider: {
      default: function _default() {
        return _configProvider.ConfigConsumerProps;
      }
    }
  },
  data: function data() {
    return {
      colors: colors,
      myOpen: false,
      pickr: null,
      i18n: _en_US.default
    };
  },
  watch: {
    'configProvider.locale.ColorPicker': {
      handler: function handler(val) {
        if (this.locale) return;
        this.i18n = val;
        this.reInitialize();
      }
    },
    locale: function locale(val) {
      this.i18n = val.ColorPicker || val.lang;
      this.reInitialize();
    },
    value: function value(val) {
      this.setColor(val);
    },
    disabled: function disabled(val) {
      this.pickr[val ? 'disable' : 'enable']();
    },
    config: {
      handler: function handler() {
        this.reInitialize();
      },
      deep: true
    },
    format: function format(val) {
      var type = val.toLocaleUpperCase();
      var res = this.pickr.setColorRepresentation(type);

      if (res) {
        this.pickr.applyColor();
      } else {
        throw new TypeError('format was invalid');
      }
    }
  },
  mounted: function mounted() {
    if (this.locale) {
      this.i18n = this.locale.ColorPicker || this.locale.lang;
    }

    this.createPickr();
    this.eventsBinding();
  },
  destroyed: function destroyed() {
    this.pickr.destroyAndRemove();
  },
  methods: {
    reInitialize: function reInitialize() {
      this.pickr.destroyAndRemove();
      var dom = document.createElement('div');
      dom.id = 'color-picker' + this._uid;
      var box = (0, _propsUtil.findDOMNode)(this).querySelector('#color-picker-box' + this._uid);
      box.appendChild(dom);
      this.createPickr();
      this.eventsBinding();
    },
    setColor: (0, _debounce.default)(function (val) {
      this.pickr.setColor(val);
    }, 1000),
    eventsBinding: function eventsBinding() {
      var _this = this;

      var pickrEvents = ['init', 'hide', 'show', 'save', 'clear', 'change', 'changestop', 'cancel', 'swatchselect'];
      Object.keys(this.$listeners).forEach(function (event) {
        pickrEvents.includes(event) && _this.pickr.on(event, _this.$listeners[event]);
      });
    },
    createPickr: function createPickr() {
      var _this2 = this;

      var _getOptionProps = (0, _propsUtil.getOptionProps)(this),
          getPopupContainer = _getOptionProps.getPopupContainer;

      var getContextPopupContainer = this.configProvider.getPopupContainer;
      var container = getPopupContainer || getContextPopupContainer;
      this.pickr = _pickrEs.default.create(_extends({
        el: '#color-picker' + this._uid,
        container: container && container((0, _propsUtil.findDOMNode)(this)) || document.body,
        theme: 'monolith',
        // or 'monolith', or 'nano'
        default: this.value || this.defaultValue || null,
        // 有默认颜色pickr才可以获取到_representation
        components: {
          // Main components
          preview: true,
          opacity: this.alpha,
          hue: this.hue,
          // Input / output Options
          interaction: {
            hex: true,
            rgba: true,
            input: true,
            clear: true,
            save: true
          }
        }
      }, this.config, {
        i18n: this.i18n
      })).on('save', function (color, instance) {
        if (color) {
          var _representation = instance._representation || 'HEXA';

          color = color['to' + _representation]().toString(_this2.colorRounded || 0);
        }

        _this2.$emit('change.value', color || '');
      }).on('hide', function () {
        _this2.setState({
          myOpen: false
        });
      });
    },
    handleOpenChange: function handleOpenChange() {
      var open = !this.myOpen;
      this.setState({
        myOpen: open
      });
      this.pickr[open ? 'show' : 'hide']();
      this.$emit('openChange', open);
    },
    getDefaultLocale: function getDefaultLocale() {
      var result = _objectSpread(_objectSpread({}, _en_US.default), this.$props.locale);

      result.lang = _objectSpread(_objectSpread({}, result.lang), (this.$props.locale || {}).lang);
      return result;
    },
    renderColorPicker: function renderColorPicker() {
      var _classString;

      var customizePrefixCls = this.$props.prefixCls;
      var getPrefixCls = this.configProvider.getPrefixCls;
      var prefixCls = getPrefixCls('color-picker', customizePrefixCls);

      var _getOptionProps2 = (0, _propsUtil.getOptionProps)(this),
          disabled = _getOptionProps2.disabled;

      var classString = (_classString = {}, _defineProperty(_classString, prefixCls, true), _defineProperty(_classString, "".concat(prefixCls, "-open"), this.myOpen), _defineProperty(_classString, "".concat(prefixCls, "-lg"), this.size === 'large'), _defineProperty(_classString, "".concat(prefixCls, "-sm"), this.size === 'small'), _defineProperty(_classString, "".concat(prefixCls, "-disabled"), this.disabled), _classString);
      return _vue.createVNode("div", {
        "class": classString,
        "tabindex": disabled ? -1 : 0,
        "onClick": this.handleOpenChange
      }, [_vue.createVNode("div", {
        "class": "".concat(prefixCls, "-selection")
      }, [_vue.createVNode("div", {
        "id": 'color-picker-box' + this._uid
      }, [_vue.createVNode("div", {
        "id": 'color-picker' + this._uid
      }, null)]), _vue.createVNode(_icon.default, {
        "type": "down",
        "class": "".concat(prefixCls, "-icon")
      }, null)])]);
    }
  },
  render: function render() {
    return _vue.createVNode(_LocaleReceiver.default, {
      "componentName": "ColorPicker",
      "defaultLocale": this.getDefaultLocale,
      "scopedSlots": {
        default: this.renderColorPicker
      }
    }, null);
  }
};
exports.default = _default2;