"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _comp = require("../../ui/src/comp");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _ui = require("../../ui");
var _dom = require("../../ui/src/dom");
var _utils = require("../../ui/src/utils");
var _util = require("./util");
var _button = _interopRequireDefault(require("../../button"));
var _input = _interopRequireDefault(require("../../input"));
var _numberInput = _interopRequireDefault(require("../../number-input"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var WinEyeDropper = typeof window !== 'undefined' ? window.EyeDropper : null;
var typeList = [{
  label: 'HEX',
  value: 'hex'
}, {
  label: 'RGB',
  value: 'rgb'
}];
var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
  name: 'VxeColorPicker',
  mixins: [_ui.globalMixins.sizeMixin],
  model: {
    prop: 'value',
    event: 'modelValue'
  },
  props: {
    value: String,
    placeholder: String,
    clearable: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().colorPicker.clearable;
      }
    },
    type: {
      type: String,
      default: function _default() {
        return (0, _ui.getConfig)().colorPicker.type;
      }
    },
    size: {
      type: String,
      default: function _default() {
        return (0, _ui.getConfig)().colorPicker.size || (0, _ui.getConfig)().size;
      }
    },
    className: [String, Function],
    popupClassName: [String, Function],
    colors: {
      type: Array,
      default: function _default() {
        return _xeUtils.default.clone((0, _ui.getConfig)().colorPicker.colors, true) || [];
      }
    },
    showAlpha: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().colorPicker.showAlpha;
      }
    },
    showEyeDropper: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().colorPicker.showEyeDropper;
      }
    },
    showColorExtractor: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().colorPicker.showColorExtractor;
      }
    },
    showQuick: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().colorPicker.showQuick;
      }
    },
    readonly: {
      type: Boolean,
      default: null
    },
    disabled: {
      type: Boolean,
      default: null
    },
    clickToCopy: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().colorPicker.clickToCopy;
      }
    },
    placement: String,
    transfer: {
      type: Boolean,
      default: null
    },
    popupConfig: Object
  },
  inject: {
    $xeModal: {
      default: null
    },
    $xeDrawer: {
      default: null
    },
    $xeTable: {
      default: null
    },
    $xeForm: {
      default: null
    },
    formItemInfo: {
      from: 'xeFormItemInfo',
      default: null
    }
  },
  provide: function provide() {
    var $xeColorPicker = this;
    return {
      $xeColorPicker: $xeColorPicker
    };
  },
  data: function data() {
    var xID = _xeUtils.default.uniqueId();
    var reactData = {
      initialized: false,
      selectTyle: 'hex',
      selectColor: '',
      showTypePopup: false,
      panelColor: '',
      hexValue: '',
      rValue: 0,
      gValue: 0,
      bValue: 0,
      aValue: 0,
      panelIndex: 0,
      panelStyle: {},
      panelPlacement: null,
      visiblePanel: false,
      isAniVisible: false,
      isActivated: false
    };
    var internalData = {
      hpTimeout: undefined
    };
    return {
      xID: xID,
      reactData: reactData,
      internalData: internalData
    };
  },
  computed: Object.assign(Object.assign({}, {}), {
    computeFormReadonly: function computeFormReadonly() {
      var $xeColorPicker = this;
      var props = $xeColorPicker;
      var $xeForm = $xeColorPicker.$xeForm;
      var readonly = props.readonly;
      if (readonly === null) {
        if ($xeForm) {
          return $xeForm.readonly;
        }
        return false;
      }
      return readonly;
    },
    computeIsDisabled: function computeIsDisabled() {
      var $xeColorPicker = this;
      var props = $xeColorPicker;
      var $xeForm = $xeColorPicker.$xeForm;
      var disabled = props.disabled;
      if (disabled === null) {
        if ($xeForm) {
          return $xeForm.disabled;
        }
        return false;
      }
      return disabled;
    },
    computeBtnTransfer: function computeBtnTransfer() {
      var $xeColorPicker = this;
      var props = $xeColorPicker;
      var $xeTable = $xeColorPicker.$xeTable;
      var $xeModal = $xeColorPicker.$xeModal;
      var $xeDrawer = $xeColorPicker.$xeDrawer;
      var $xeForm = $xeColorPicker.$xeForm;
      var transfer = props.transfer;
      if (transfer === null) {
        var globalTransfer = (0, _ui.getConfig)().colorPicker.transfer;
        if (_xeUtils.default.isBoolean(globalTransfer)) {
          return globalTransfer;
        }
        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
          return true;
        }
      }
      return transfer;
    },
    computeColorList: function computeColorList() {
      var $xeColorPicker = this;
      var props = $xeColorPicker;
      var colors = props.colors;
      if (colors) {
        return colors.map(function (item) {
          if (_xeUtils.default.isString(item)) {
            return {
              label: item,
              value: item
            };
          }
          return {
            label: _xeUtils.default.eqNull(item.label) ? item.value : item.label,
            value: item.value
          };
        });
      }
      return [];
    },
    computePopupOpts: function computePopupOpts() {
      var $xeColorPicker = this;
      var props = $xeColorPicker;
      return Object.assign({}, (0, _ui.getConfig)().colorPicker.popupConfig, props.popupConfig);
    },
    computeIsRgb: function computeIsRgb() {
      var $xeColorPicker = this;
      var reactData = $xeColorPicker.reactData;
      var selectTyle = reactData.selectTyle;
      return selectTyle === 'rgb';
    },
    computeSelectTypeItem: function computeSelectTypeItem() {
      var $xeColorPicker = this;
      var reactData = $xeColorPicker.reactData;
      var selectTyle = reactData.selectTyle;
      return typeList.find(function (item) {
        return item.value === selectTyle;
      });
    }
  }),
  methods: {
    //
    // Method
    //
    dispatchEvent: function dispatchEvent(type, params, evnt) {
      var $xeColorPicker = this;
      $xeColorPicker.$emit(type, (0, _ui.createEvent)(evnt, {
        $colorPicker: $xeColorPicker
      }, params));
    },
    emitModel: function emitModel(value) {
      var $xeColorPicker = this;
      var _events = $xeColorPicker._events;
      if (_events && _events.modelValue) {
        $xeColorPicker.$emit('modelValue', value);
      } else {
        $xeColorPicker.$emit('model-value', value);
      }
    },
    updateMode: function updateMode() {
      var $xeColorPicker = this;
      var props = $xeColorPicker;
      var reactData = $xeColorPicker.reactData;
      var value = props.value;
      reactData.selectColor = _xeUtils.default.toValueString(value);
      $xeColorPicker.updateModelColor();
    },
    updateType: function updateType() {
      var $xeColorPicker = this;
      var props = $xeColorPicker;
      var reactData = $xeColorPicker.reactData;
      var type = props.type;
      var selectTyle = 'hex';
      if (type === 'rgb' || type === 'rgba') {
        selectTyle = 'rgb';
      }
      reactData.selectTyle = selectTyle;
      $xeColorPicker.updateMode();
    },
    updateModelColor: function updateModelColor() {
      var $xeColorPicker = this;
      var reactData = $xeColorPicker.reactData;
      var selectColor = reactData.selectColor,
        isAniVisible = reactData.isAniVisible;
      var isRgb = $xeColorPicker.computeIsRgb;
      var hueSliderEl = $xeColorPicker.$refs.refHueSliderElem;
      var alphaSliderEl = $xeColorPicker.$refs.refAlphaSliderElem;
      var colorRest = (0, _util.parseColor)(selectColor);
      reactData.hexValue = colorRest.hex;
      reactData.rValue = colorRest.r;
      reactData.gValue = colorRest.g;
      reactData.bValue = colorRest.b;
      reactData.aValue = colorRest.a;
      if (colorRest.value) {
        if (isRgb) {
          if (colorRest.type === 'hex') {
            var rgbRest = (0, _util.hexToRgb)(colorRest.hex);
            if (rgbRest) {
              reactData.rValue = rgbRest.r;
              reactData.gValue = rgbRest.g;
              reactData.bValue = rgbRest.b;
              reactData.aValue = rgbRest.a;
            }
          }
        } else {
          if (colorRest.type !== 'hex') {
            reactData.hexValue = (0, _util.rgbToHex)(colorRest);
          }
        }
      }
      if (isAniVisible) {
        var hsvRest = colorRest.type === 'hex' ? (0, _util.hexToHsv)(colorRest.hex) : (0, _util.rgbToHsv)(colorRest);
        var colorPanelEl = $xeColorPicker.$refs.refColorPanelElem;
        if (hsvRest) {
          if (colorPanelEl) {
            var offsetTop = colorPanelEl.clientHeight * (1 - hsvRest.v);
            var offsetLeft = colorPanelEl.clientWidth * hsvRest.s;
            $xeColorPicker.handlePanelColor(offsetLeft, offsetTop);
          }
          if (hueSliderEl) {
            $xeColorPicker.handleHueColor(_xeUtils.default.ceil((1 - hsvRest.h / 360) * hueSliderEl.clientWidth));
          }
        }
        if (alphaSliderEl) {
          $xeColorPicker.handleAlphaColor(alphaSliderEl.clientWidth * colorRest.a);
        }
      }
    },
    updateZindex: function updateZindex() {
      var $xeColorPicker = this;
      var reactData = $xeColorPicker.reactData;
      if (reactData.panelIndex < (0, _utils.getLastZIndex)()) {
        reactData.panelIndex = (0, _utils.nextZIndex)();
      }
    },
    updatePlacement: function updatePlacement() {
      var $xeColorPicker = this;
      var props = $xeColorPicker;
      var reactData = $xeColorPicker.reactData;
      var placement = props.placement;
      var panelIndex = reactData.panelIndex;
      var targetElem = $xeColorPicker.$refs.refElem;
      var panelElem = $xeColorPicker.$refs.refOptionPanel;
      var btnTransfer = $xeColorPicker.computeBtnTransfer;
      var popupOpts = $xeColorPicker.computePopupOpts;
      var handleStyle = function handleStyle() {
        var ppObj = (0, _dom.updatePanelPlacement)(targetElem, panelElem, {
          placement: popupOpts.placement || placement,
          defaultPlacement: popupOpts.defaultPlacement,
          teleportTo: btnTransfer
        });
        var panelStyle = Object.assign(ppObj.style, {
          zIndex: panelIndex
        });
        reactData.panelStyle = panelStyle;
        reactData.panelPlacement = ppObj.placement;
      };
      handleStyle();
      return $xeColorPicker.$nextTick().then(handleStyle);
    },
    showOptionPanel: function showOptionPanel() {
      var $xeColorPicker = this;
      var reactData = $xeColorPicker.reactData;
      var internalData = $xeColorPicker.internalData;
      var hpTimeout = internalData.hpTimeout;
      var isDisabled = $xeColorPicker.computeIsDisabled;
      if (!isDisabled) {
        if (hpTimeout) {
          clearTimeout(hpTimeout);
          internalData.hpTimeout = undefined;
        }
        var btnTransfer = $xeColorPicker.computeBtnTransfer;
        var panelElem = $xeColorPicker.$refs.refOptionPanel;
        if (!reactData.initialized) {
          reactData.initialized = true;
          if (btnTransfer) {
            if (panelElem) {
              document.body.appendChild(panelElem);
            }
          }
        }
        reactData.isActivated = true;
        reactData.isAniVisible = true;
        setTimeout(function () {
          $xeColorPicker.updateModelColor();
          reactData.visiblePanel = true;
        }, 10);
        $xeColorPicker.updateZindex();
        $xeColorPicker.updatePlacement();
      }
    },
    hideOptionPanel: function hideOptionPanel() {
      var $xeColorPicker = this;
      var reactData = $xeColorPicker.reactData;
      var internalData = $xeColorPicker.internalData;
      reactData.visiblePanel = false;
      internalData.hpTimeout = setTimeout(function () {
        reactData.isAniVisible = false;
      }, 350);
    },
    changeEvent: function changeEvent(evnt, value) {
      var $xeColorPicker = this;
      var props = $xeColorPicker;
      var reactData = $xeColorPicker.reactData;
      var $xeForm = $xeColorPicker.$xeForm;
      var formItemInfo = $xeColorPicker.formItemInfo;
      reactData.selectColor = value;
      if (value !== props.value) {
        $xeColorPicker.emitModel(value);
        $xeColorPicker.dispatchEvent('change', {
          value: value
        }, evnt);
        // 自动更新校验状态
        if ($xeForm && formItemInfo) {
          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
        }
      }
    },
    clearValueEvent: function clearValueEvent(evnt, selectValue) {
      var $xeColorPicker = this;
      $xeColorPicker.changeEvent(evnt, selectValue);
      $xeColorPicker.dispatchEvent('clear', {
        value: selectValue
      }, evnt);
    },
    focusEvent: function focusEvent() {
      var $xeColorPicker = this;
      var reactData = $xeColorPicker.reactData;
      var isDisabled = $xeColorPicker.computeIsDisabled;
      if (!isDisabled) {
        if (!reactData.visiblePanel) {
          $xeColorPicker.showOptionPanel();
        }
      }
    },
    blurEvent: function blurEvent() {
      var $xeColorPicker = this;
      var reactData = $xeColorPicker.reactData;
      reactData.isActivated = false;
    },
    clearEvent: function clearEvent(evnt) {
      var $xeColorPicker = this;
      $xeColorPicker.clearValueEvent(evnt, null);
      $xeColorPicker.hideOptionPanel();
    },
    confirmEvent: function confirmEvent(evnt) {
      var $xeColorPicker = this;
      var reactData = $xeColorPicker.reactData;
      var selectTyle = reactData.selectTyle,
        selectColor = reactData.selectColor,
        hexValue = reactData.hexValue;
      var value = selectTyle === 'hex' ? hexValue : selectColor;
      $xeColorPicker.changeEvent(evnt, value);
      $xeColorPicker.hideOptionPanel();
    },
    togglePanelEvent: function togglePanelEvent(evnt) {
      var $xeColorPicker = this;
      var reactData = $xeColorPicker.reactData;
      evnt.preventDefault();
      if (reactData.visiblePanel) {
        $xeColorPicker.hideOptionPanel();
      } else {
        $xeColorPicker.showOptionPanel();
      }
    },
    clickEvent: function clickEvent(evnt) {
      var $xeColorPicker = this;
      $xeColorPicker.togglePanelEvent(evnt);
      $xeColorPicker.dispatchEvent('click', {}, evnt);
    },
    handlePanelClickEvent: function handlePanelClickEvent() {
      var $xeColorPicker = this;
      var reactData = $xeColorPicker.reactData;
      reactData.showTypePopup = false;
    },
    toggleTypeVisibleEvent: function toggleTypeVisibleEvent(evnt) {
      var $xeColorPicker = this;
      var reactData = $xeColorPicker.reactData;
      evnt.stopPropagation();
      reactData.showTypePopup = !reactData.showTypePopup;
    },
    handleChangeType: function handleChangeType(type) {
      var $xeColorPicker = this;
      var reactData = $xeColorPicker.reactData;
      var selectTyle = reactData.selectTyle;
      if (type !== selectTyle) {
        reactData.selectTyle = type;
        $xeColorPicker.updateModelColor();
      }
      reactData.showTypePopup = false;
    },
    handleHueColor: function handleHueColor(offsetLeft) {
      var $xeColorPicker = this;
      var reactData = $xeColorPicker.reactData;
      var hueSliderEl = $xeColorPicker.$refs.refHueSliderElem;
      var hueSliderBtnEl = $xeColorPicker.$refs.refHueSliderBtnElem;
      if (hueSliderEl && hueSliderBtnEl) {
        if (offsetLeft < 0) {
          offsetLeft = 0;
        }
        var barWidth = _xeUtils.default.toInteger(hueSliderEl.clientWidth);
        var itemNum = 255;
        var countNum = itemNum * 6;
        var offsetX = _xeUtils.default.ceil(countNum / barWidth * offsetLeft);
        var offsetNum = offsetX % itemNum;
        var rNum = 0;
        var gNum = 0;
        var bNum = 0;
        switch (Math.ceil(offsetX / itemNum)) {
          case 1:
            rNum = itemNum;
            bNum = offsetNum;
            break;
          case 2:
            rNum = itemNum - offsetNum;
            bNum = itemNum;
            break;
          case 3:
            gNum = offsetNum;
            bNum = itemNum;
            break;
          case 4:
            gNum = itemNum;
            bNum = itemNum - offsetNum;
            break;
          case 5:
            rNum = offsetNum;
            gNum = itemNum;
            break;
          case 6:
            rNum = itemNum;
            gNum = itemNum - offsetNum;
            break;
        }
        reactData.panelColor = (0, _util.toRgb)(rNum, gNum, bNum);
        hueSliderBtnEl.style.left = (0, _dom.toCssUnit)(offsetLeft);
      }
    },
    handleHueBarEvent: function handleHueBarEvent(evnt) {
      var $xeColorPicker = this;
      var hueSliderEl = $xeColorPicker.$refs.refHueSliderElem;
      var hueSliderBtnEl = $xeColorPicker.$refs.refHueSliderBtnElem;
      if (hueSliderEl && hueSliderBtnEl) {
        var hueSliderRect = hueSliderEl.getBoundingClientRect();
        var barWidth = _xeUtils.default.toInteger(hueSliderEl.clientWidth);
        var offsetLeft = _xeUtils.default.ceil(Math.min(barWidth - 1, Math.max(1, evnt.clientX - hueSliderRect.x)));
        $xeColorPicker.handleHueColor(offsetLeft);
      }
    },
    handleHueSliderMousedownEvent: function handleHueSliderMousedownEvent(evnt) {
      var $xeColorPicker = this;
      evnt.preventDefault();
      document.onmousemove = function (evnt) {
        evnt.preventDefault();
        $xeColorPicker.handleHueBarEvent(evnt);
      };
      document.onmouseup = function (evnt) {
        document.onmousemove = null;
        document.onmouseup = null;
        $xeColorPicker.handleHueBarEvent(evnt);
      };
    },
    handleAlphaColor: function handleAlphaColor(offsetLeft) {
      var $xeColorPicker = this;
      var reactData = $xeColorPicker.reactData;
      var selectColor = reactData.selectColor;
      var alphaSliderEl = $xeColorPicker.$refs.refAlphaSliderElem;
      var alphaSliderBtnEl = $xeColorPicker.$refs.refAlphaSliderBtnElem;
      if (alphaSliderEl && alphaSliderBtnEl) {
        var alphaSliderRect = alphaSliderEl.getBoundingClientRect();
        var barWidth = alphaSliderRect.width;
        if (offsetLeft < 0) {
          offsetLeft = 0;
        }
        if (offsetLeft > barWidth) {
          offsetLeft = barWidth;
        }
        var alpha = _xeUtils.default.ceil(100 / barWidth * offsetLeft / 100, 2);
        reactData.aValue = alpha;
        alphaSliderBtnEl.style.left = (0, _dom.toCssUnit)(offsetLeft);
        reactData.selectColor = (0, _util.updateColorAlpha)(selectColor, alpha);
      }
    },
    handleAlphaBarEvent: function handleAlphaBarEvent(evnt) {
      var $xeColorPicker = this;
      var alphaSliderEl = $xeColorPicker.$refs.refAlphaSliderElem;
      var alphaSliderBtnEl = $xeColorPicker.$refs.refAlphaSliderBtnElem;
      if (alphaSliderEl && alphaSliderBtnEl) {
        var alphaSliderRect = alphaSliderEl.getBoundingClientRect();
        var barWidth = alphaSliderRect.width;
        var offsetLeft = Math.min(barWidth, Math.max(0, evnt.clientX - alphaSliderRect.x));
        $xeColorPicker.handleAlphaColor(offsetLeft);
        $xeColorPicker.updateModelColor();
      }
    },
    handleAlphaSliderMousedownEvent: function handleAlphaSliderMousedownEvent(evnt) {
      var $xeColorPicker = this;
      evnt.preventDefault();
      document.onmousemove = function (evnt) {
        evnt.preventDefault();
        $xeColorPicker.handleAlphaBarEvent(evnt);
      };
      document.onmouseup = function (evnt) {
        document.onmousemove = null;
        document.onmouseup = null;
        $xeColorPicker.handleAlphaBarEvent(evnt);
      };
    },
    handleInputRgbEvent: function handleInputRgbEvent() {
      var $xeColorPicker = this;
      var reactData = $xeColorPicker.reactData;
      var rValue = reactData.rValue,
        gValue = reactData.gValue,
        bValue = reactData.bValue,
        aValue = reactData.aValue;
      reactData.selectColor = (0, _util.toRgb)(rValue, gValue, bValue, aValue);
      $xeColorPicker.updateModelColor();
    },
    handleInputAlphaEvent: function handleInputAlphaEvent() {
      var $xeColorPicker = this;
      var reactData = $xeColorPicker.reactData;
      var aValue = reactData.aValue;
      var alphaSliderEl = $xeColorPicker.$refs.refAlphaSliderElem;
      var alphaSliderBtnEl = $xeColorPicker.$refs.refAlphaSliderBtnElem;
      if (alphaSliderEl && alphaSliderBtnEl) {
        var alphaSliderRect = alphaSliderEl.getBoundingClientRect();
        var barWidth = alphaSliderRect.width;
        var offsetLeft = barWidth * aValue;
        $xeColorPicker.handleAlphaColor(offsetLeft);
      }
    },
    handleQuickEvent: function handleQuickEvent(evnt, item) {
      var $xeColorPicker = this;
      var reactData = $xeColorPicker.reactData;
      var value = item.value;
      reactData.selectColor = value;
      $xeColorPicker.updateModelColor();
    },
    handlePanelColor: function handlePanelColor(offsetLeft, offsetTop) {
      var $xeColorPicker = this;
      var colorActiveEl = $xeColorPicker.$refs.refColorActiveElem;
      if (colorActiveEl) {
        colorActiveEl.style.top = (0, _dom.toCssUnit)(offsetTop);
        colorActiveEl.style.left = (0, _dom.toCssUnit)(offsetLeft);
      }
    },
    handleEyeDropperEvent: function handleEyeDropperEvent() {
      var $xeColorPicker = this;
      var reactData = $xeColorPicker.reactData;
      if (WinEyeDropper) {
        try {
          var eyeDropper = new WinEyeDropper();
          eyeDropper.open().then(function (rest) {
            if (rest && rest.sRGBHex) {
              reactData.selectColor = rest.sRGBHex;
              $xeColorPicker.updateModelColor();
            }
          }).catch(function () {});
        } catch (e) {}
      }
    },
    handleSelectColorByXY: function handleSelectColorByXY(clientX, clientY) {
      var $xeColorPicker = this;
      var props = $xeColorPicker;
      var reactData = $xeColorPicker.reactData;
      var showAlpha = props.showAlpha;
      var panelColor = reactData.panelColor,
        aValue = reactData.aValue;
      var colorPanelEl = $xeColorPicker.$refs.refColorPanelElem;
      var colorActiveEl = $xeColorPicker.$refs.refColorActiveElem;
      if (colorPanelEl && colorActiveEl) {
        var clientWidth = colorPanelEl.clientWidth,
          clientHeight = colorPanelEl.clientHeight;
        var colorPanelRect = colorPanelEl.getBoundingClientRect();
        var offsetTop = Math.min(clientHeight, Math.max(0, clientY - colorPanelRect.y));
        var offsetLeft = Math.min(clientWidth, Math.max(0, clientX - colorPanelRect.x));
        var colorRest = (0, _util.parseColor)(panelColor);
        if (colorRest) {
          var hsvRest = colorRest.type === 'hex' ? (0, _util.hexToHsv)(colorRest.hex) : (0, _util.rgbToHsv)(colorRest);
          if (hsvRest) {
            var ragRest = (0, _util.hsvToRgb)(hsvRest.h, offsetLeft / clientWidth, 1 - offsetTop / clientHeight);
            reactData.selectColor = (0, _util.toRgb)(ragRest.r, ragRest.g, ragRest.b, showAlpha ? aValue : null);
            $xeColorPicker.handlePanelColor(offsetLeft, offsetTop);
          }
        }
        $xeColorPicker.updateModelColor();
      }
    },
    handleSelectColorMousedownEvent: function handleSelectColorMousedownEvent(evnt) {
      var $xeColorPicker = this;
      evnt.stopPropagation();
      evnt.preventDefault();
      $xeColorPicker.handleSelectColorByXY(evnt.clientX, evnt.clientY);
      document.onmousemove = function (evnt) {
        $xeColorPicker.handleSelectColorByXY(evnt.clientX, evnt.clientY);
      };
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
    handleCopyColorEvent: function handleCopyColorEvent() {
      var $xeColorPicker = this;
      var reactData = $xeColorPicker.reactData;
      var selectColor = reactData.selectColor;
      if (selectColor) {
        if (_ui.VxeUI.clipboard.copy(selectColor)) {
          if (_ui.VxeUI.modal) {
            _ui.VxeUI.modal.message({
              content: (0, _ui.getI18n)('vxe.colorPicker.copySuccess', [selectColor]),
              status: 'success'
            });
          }
        }
      }
    },
    handleGlobalMousewheelEvent: function handleGlobalMousewheelEvent(evnt) {
      var $xeColorPicker = this;
      var reactData = $xeColorPicker.reactData;
      var visiblePanel = reactData.visiblePanel;
      var isDisabled = $xeColorPicker.computeIsDisabled;
      if (!isDisabled) {
        if (visiblePanel) {
          var panelElem = $xeColorPicker.$refs.refOptionPanel;
          if ((0, _dom.getEventTargetNode)(evnt, panelElem).flag) {
            $xeColorPicker.updatePlacement();
          } else {
            $xeColorPicker.hideOptionPanel();
          }
        }
      }
    },
    handleGlobalMousedownEvent: function handleGlobalMousedownEvent(evnt) {
      var $xeColorPicker = this;
      var reactData = $xeColorPicker.reactData;
      var visiblePanel = reactData.visiblePanel;
      var isDisabled = $xeColorPicker.computeIsDisabled;
      if (!isDisabled) {
        var el = $xeColorPicker.$refs.refElem;
        var panelElem = $xeColorPicker.$refs.refOptionPanel;
        reactData.isActivated = (0, _dom.getEventTargetNode)(evnt, el).flag || (0, _dom.getEventTargetNode)(evnt, panelElem).flag;
        if (visiblePanel && !reactData.isActivated) {
          $xeColorPicker.hideOptionPanel();
        }
      }
    },
    handleGlobalBlurEvent: function handleGlobalBlurEvent() {
      var $xeColorPicker = this;
      var reactData = $xeColorPicker.reactData;
      var visiblePanel = reactData.visiblePanel,
        isActivated = reactData.isActivated;
      if (visiblePanel) {
        $xeColorPicker.hideOptionPanel();
      }
      if (isActivated) {
        reactData.isActivated = false;
      }
      if (visiblePanel || isActivated) {
        var targetElem = $xeColorPicker.$refs.refInputTarget;
        if (targetElem) {
          targetElem.blur();
        }
      }
    },
    handleGlobalResizeEvent: function handleGlobalResizeEvent() {
      var $xeColorPicker = this;
      var reactData = $xeColorPicker.reactData;
      var visiblePanel = reactData.visiblePanel;
      if (visiblePanel) {
        $xeColorPicker.updatePlacement();
      }
    },
    //
    // Render
    //
    renderColorWrapper: function renderColorWrapper(h) {
      var $xeColorPicker = this;
      var props = $xeColorPicker;
      var reactData = $xeColorPicker.reactData;
      var showColorExtractor = props.showColorExtractor;
      var panelColor = reactData.panelColor;
      if (showColorExtractor) {
        return h('div', {
          ref: 'refColorPanelElem',
          class: 'vxe-color-picker--color-wrapper',
          on: {
            mousedown: $xeColorPicker.handleSelectColorMousedownEvent
          }
        }, [h('div', {
          class: 'vxe-color-picker--color-bg',
          style: {
            backgroundColor: panelColor
          }
        }), h('div', {
          class: 'vxe-color-picker--white-bg'
        }), h('div', {
          class: 'vxe-color-picker--black-bg'
        }), h('div', {
          ref: 'refColorActiveElem',
          class: 'vxe-color-picker--color-active'
        })]);
      }
      return (0, _ui.renderEmptyElement)($xeColorPicker);
    },
    renderColorBar: function renderColorBar(h) {
      var $xeColorPicker = this;
      var props = $xeColorPicker;
      var reactData = $xeColorPicker.reactData;
      var showAlpha = props.showAlpha,
        clickToCopy = props.clickToCopy,
        showEyeDropper = props.showEyeDropper;
      var selectTyle = reactData.selectTyle,
        showTypePopup = reactData.showTypePopup,
        hexValue = reactData.hexValue,
        rValue = reactData.rValue,
        gValue = reactData.gValue,
        bValue = reactData.bValue,
        aValue = reactData.aValue,
        selectColor = reactData.selectColor,
        panelColor = reactData.panelColor;
      var isRgb = $xeColorPicker.computeIsRgb;
      var selectTypeItem = $xeColorPicker.computeSelectTypeItem;
      return h('div', {
        class: 'vxe-color-picker--bar-wrapper'
      }, [h('div', {
        class: 'vxe-color-picker--slider-wrapper'
      }, [showEyeDropper && WinEyeDropper ? h('div', {
        class: 'vxe-color-picker--color-dropper'
      }, [h('span', {
        class: 'vxe-color-picker--color-dropper-btn',
        on: {
          click: $xeColorPicker.handleEyeDropperEvent
        }
      }, [h('i', {
        class: (0, _ui.getIcon)().COLOR_PICKER_EYE_DROPPER
      })])]) : (0, _ui.renderEmptyElement)($xeColorPicker), h('div', {
        class: 'vxe-color-picker--slider-preview'
      }, [h('div', {
        class: 'vxe-color-picker--preview-btn'
      }, [h('div', {
        class: 'vxe-color-picker--preview-color',
        style: {
          backgroundColor: selectColor
        }
      }, clickToCopy ? [h('span', {
        class: 'vxe-color-picker--preview-copy-btn',
        on: {
          click: $xeColorPicker.handleCopyColorEvent
        }
      }, [h('i', {
        class: (0, _ui.getIcon)().COLOR_PICKER_COLOR_COPY
      })])] : [])])]), h('div', {
        class: 'vxe-color-picker--slider-handle'
      }, [h('div', {
        ref: 'refHueSliderElem',
        class: 'vxe-color-picker--bar-hue-slider',
        on: {
          click: $xeColorPicker.handleHueBarEvent
        }
      }, [h('div', {
        ref: 'refHueSliderBtnElem',
        class: 'vxe-color-picker--bar-hue-btn',
        on: {
          mousedown: $xeColorPicker.handleHueSliderMousedownEvent
        }
      })]), showAlpha ? h('div', {
        ref: 'refAlphaSliderElem',
        class: 'vxe-color-picker--bar-alpha-slider',
        on: {
          click: $xeColorPicker.handleAlphaBarEvent
        }
      }, [h('div', {
        class: 'vxe-color-picker--bar-alpha-bg',
        style: {
          background: "linear-gradient(to right, rgba(0, 0, 0, 0), ".concat(panelColor, ")")
        }
      }), h('div', {
        ref: 'refAlphaSliderBtnElem',
        class: 'vxe-color-picker--bar-alpha-btn',
        on: {
          mousedown: $xeColorPicker.handleAlphaSliderMousedownEvent
        }
      })]) : (0, _ui.renderEmptyElement)($xeColorPicker)])]), h('div', {
        class: 'vxe-color-picker--custom-wrapper'
      }, [h('div', {
        class: 'vxe-color-picker--type-switch'
      }, [h('div', {
        class: 'vxe-color-picker--type-label',
        on: {
          click: $xeColorPicker.toggleTypeVisibleEvent
        }
      }, [h('span', "".concat(selectTypeItem ? selectTypeItem.label : selectTyle)), h('span', {
        class: 'vxe-color-picker--type-icon'
      }, [h('i', {
        class: showTypePopup ? (0, _ui.getIcon)().COLOR_PICKER_TPTY_OPEN : (0, _ui.getIcon)().COLOR_PICKER_TPTY_CLOSE
      })])]), h('div', {
        class: ['vxe-color-picker--type-popup', {
          'is--visible': showTypePopup
        }]
      }, typeList.map(function (item) {
        return h('div', {
          class: 'vxe-color-picker--type-item',
          on: {
            click: function click(evnt) {
              evnt.stopPropagation();
              $xeColorPicker.handleChangeType(item.value);
            }
          }
        }, item.label);
      }))]), h('div', {
        class: "vxe-color-picker--".concat(selectTyle, "-wrapper")
      }, isRgb ? [h('div', {
        class: 'vxe-color-picker--input-wrapper'
      }, [h(_numberInput.default, {
        props: {
          type: 'integer',
          size: 'mini',
          align: 'center',
          min: 0,
          max: 255,
          maxLength: 3,
          placeholder: '',
          value: rValue,
          controlConfig: {
            showButton: false
          }
        },
        on: {
          'modelValue': function modelValue(val) {
            reactData.rValue = val;
          },
          change: $xeColorPicker.handleInputRgbEvent
        }
      }), h(_numberInput.default, {
        props: {
          type: 'integer',
          size: 'mini',
          align: 'center',
          min: 0,
          max: 255,
          maxLength: 3,
          placeholder: '',
          value: gValue,
          controlConfig: {
            showButton: false
          }
        },
        on: {
          'modelValue': function modelValue(val) {
            reactData.gValue = val;
          },
          change: $xeColorPicker.handleInputRgbEvent
        }
      }), h(_numberInput.default, {
        props: {
          type: 'integer',
          size: 'mini',
          align: 'center',
          min: 0,
          max: 255,
          maxLength: 3,
          placeholder: '',
          value: bValue,
          controlConfig: {
            showButton: false
          }
        },
        on: {
          'modelValue': function modelValue(val) {
            reactData.bValue = val;
          },
          change: $xeColorPicker.handleInputRgbEvent
        }
      }), h(_numberInput.default, {
        props: {
          type: 'number',
          size: 'mini',
          align: 'center',
          min: 0,
          max: 1,
          step: 0.01,
          maxLength: 4,
          placeholder: '',
          value: aValue,
          controlConfig: {
            showButton: false
          }
        },
        on: {
          'modelValue': function modelValue(val) {
            reactData.aValue = val;
          },
          change: $xeColorPicker.handleInputAlphaEvent
        }
      })]), h('div', {
        class: 'vxe-color-picker--input-title'
      }, [h('span', 'R'), h('span', 'G'), h('span', 'B'), h('span', 'A')])] : [h('div', {
        class: 'vxe-color-picker--input-wrapper'
      }, [h(_input.default, {
        props: {
          type: 'text',
          size: 'mini',
          align: 'center',
          maxLength: 9,
          placeholder: '',
          value: hexValue
        },
        on: {
          'modelValue': function modelValue(val) {
            reactData.hexValue = val;
          },
          change: function change() {
            var colorRest = (0, _util.parseColor)(reactData.hexValue);
            if (colorRest) {
              if (colorRest.value) {
                reactData.selectColor = colorRest.value;
                $xeColorPicker.updateModelColor();
              }
            }
          }
        }
      })]), h('div', {
        class: 'vxe-color-picker--input-title'
      }, (0, _ui.getI18n)('vxe.colorPicker.hex'))])])]);
    },
    renderQuickWrapper: function renderQuickWrapper(h) {
      var $xeColorPicker = this;
      var props = $xeColorPicker;
      var showQuick = props.showQuick;
      var colorList = $xeColorPicker.computeColorList;
      if (showQuick && colorList.length) {
        return h('div', {
          class: 'vxe-color-picker--quick-wrapper'
        }, colorList.map(function (item, i) {
          return h('div', {
            key: i,
            class: 'vxe-color-picker--quick-item',
            attrs: {
              title: item.label || ''
            },
            style: {
              backgroundColor: item.value
            },
            on: {
              click: function click(evnt) {
                $xeColorPicker.handleQuickEvent(evnt, item);
              }
            }
          });
        }));
      }
      return (0, _ui.renderEmptyElement)($xeColorPicker);
    },
    renderVN: function renderVN(h) {
      var $xeColorPicker = this;
      var props = $xeColorPicker;
      var reactData = $xeColorPicker.reactData;
      var className = props.className,
        popupClassName = props.popupClassName,
        clearable = props.clearable,
        value = props.value;
      var initialized = reactData.initialized,
        isActivated = reactData.isActivated,
        isAniVisible = reactData.isAniVisible,
        visiblePanel = reactData.visiblePanel;
      var vSize = $xeColorPicker.computeSize;
      var isDisabled = $xeColorPicker.computeIsDisabled;
      var btnTransfer = $xeColorPicker.computeBtnTransfer;
      var formReadonly = $xeColorPicker.computeFormReadonly;
      if (formReadonly) {
        return h('div', {
          ref: 'refElem',
          class: ['vxe-color-picker--readonly', className]
        }, [h('div', {
          class: 'vxe-color-picker--readonly-color',
          style: {
            backgroundColor: value
          }
        })]);
      }
      return h('div', {
        ref: 'refElem',
        class: ['vxe-color-picker', className ? _xeUtils.default.isFunction(className) ? className({
          $colorPicker: $xeColorPicker
        }) : className : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--selected', !!value), 'is--visible', visiblePanel), 'is--disabled', isDisabled), 'is--active', isActivated)]
      }, [h('input', {
        ref: 'refInputTarget',
        class: 'vxe-color-picker--input',
        on: {
          focus: $xeColorPicker.focusEvent,
          blur: $xeColorPicker.blurEvent
        }
      }), h('div', {
        class: 'vxe-color-picker--inner',
        on: {
          click: $xeColorPicker.clickEvent
        }
      }, [h('div', {
        class: 'vxe-color-picker--inner-color',
        style: {
          backgroundColor: value
        }
      })]), h('div', {
        ref: 'refOptionPanel',
        class: ['vxe-table--ignore-clear vxe-color-picker--panel', popupClassName ? _xeUtils.default.isFunction(popupClassName) ? popupClassName({
          $colorPicker: $xeColorPicker
        }) : popupClassName : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--transfer', btnTransfer), 'ani--leave', isAniVisible), 'ani--enter', visiblePanel)],
        attrs: {
          placement: reactData.panelPlacement
        },
        style: reactData.panelStyle
      }, [initialized && (visiblePanel || isAniVisible) ? h('div', {
        class: 'vxe-color-picker--panel-wrapper',
        on: {
          click: $xeColorPicker.handlePanelClickEvent
        }
      }, [$xeColorPicker.renderColorWrapper(h), $xeColorPicker.renderColorBar(h), $xeColorPicker.renderQuickWrapper(h), h('div', {
        class: 'vxe-color-picker--footer-wrapper'
      }, [clearable ? h(_button.default, {
        props: {
          content: (0, _ui.getI18n)('vxe.colorPicker.clear'),
          size: 'mini'
        },
        on: {
          click: $xeColorPicker.clearEvent
        }
      }) : (0, _ui.renderEmptyElement)($xeColorPicker), h(_button.default, {
        props: {
          content: (0, _ui.getI18n)('vxe.colorPicker.confirm'),
          size: 'mini',
          status: 'primary'
        },
        on: {
          click: $xeColorPicker.confirmEvent
        }
      })])]) : (0, _ui.renderEmptyElement)($xeColorPicker)])]);
    }
  },
  watch: {
    value: function value() {
      var $xeColorPicker = this;
      $xeColorPicker.updateMode();
    },
    type: function type() {
      var $xeColorPicker = this;
      $xeColorPicker.updateType();
    }
  },
  created: function created() {
    var $xeColorPicker = this;
    var props = $xeColorPicker;
    var reactData = $xeColorPicker.reactData;
    reactData.selectColor = "".concat(props.value || '');
    $xeColorPicker.updateType();
    _ui.globalEvents.on($xeColorPicker, 'mousewheel', $xeColorPicker.handleGlobalMousewheelEvent);
    _ui.globalEvents.on($xeColorPicker, 'mousedown', $xeColorPicker.handleGlobalMousedownEvent);
    _ui.globalEvents.on($xeColorPicker, 'blur', $xeColorPicker.handleGlobalBlurEvent);
    _ui.globalEvents.on($xeColorPicker, 'resize', $xeColorPicker.handleGlobalResizeEvent);
  },
  beforeDestroy: function beforeDestroy() {
    var $xeColorPicker = this;
    var panelElem = $xeColorPicker.$refs.refOptionPanel;
    if (panelElem && panelElem.parentNode) {
      panelElem.parentNode.removeChild(panelElem);
    }
    _ui.globalEvents.off($xeColorPicker, 'mousewheel');
    _ui.globalEvents.off($xeColorPicker, 'mousedown');
    _ui.globalEvents.off($xeColorPicker, 'blur');
    _ui.globalEvents.off($xeColorPicker, 'resize');
  },
  render: function render(h) {
    return this.renderVN(h);
  }
});
/* define-vxe-component end */