'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../hooks/index.js');
var initDefaultProps = require('../../_util/props-util/initDefaultProps.js');
var common = require('./common.js');
var types = require('./types.js');
var useRefs = require('../../hooks/useRefs.js');

var Line = /* @__PURE__ */ vue.defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "Line",
  props: initDefaultProps.default(types.propTypes, common.defaultProps),
  setup(props) {
    const percentList = vue.computed(() => {
      const {
        percent
      } = props;
      return Array.isArray(percent) ? percent : [percent];
    });
    const center = vue.computed(() => props.strokeWidth / 2);
    const right = vue.computed(() => 100 - props.strokeWidth / 2);
    const strokeColorList = vue.computed(() => {
      const {
        strokeColor
      } = props;
      return Array.isArray(strokeColor) ? strokeColor : [strokeColor];
    });
    const pathString = vue.computed(() => `M ${props.strokeLinecap === "round" ? center.value : 0},${center.value}
    L ${props.strokeLinecap === "round" ? right.value : 100},${center.value}`);
    const percentListProps = vue.computed(() => {
      const {
        prefixCls,
        strokeLinecap,
        strokeWidth,
        transition
      } = props;
      let stackPtg = 0;
      return percentList.value.map((ptg, index) => {
        let dashPercent = 1;
        switch (strokeLinecap) {
          case "round":
            dashPercent = 1 - strokeWidth / 100;
            break;
          case "square":
            dashPercent = 1 - strokeWidth / 2 / 100;
            break;
          default:
            dashPercent = 1;
            break;
        }
        const pathStyle = {
          strokeDasharray: `${ptg * dashPercent}px, 100px`,
          strokeDashoffset: `-${stackPtg}px`,
          transition: transition || "stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear"
        };
        const color = strokeColorList.value[index] || strokeColorList.value[strokeColorList.value.length - 1];
        stackPtg += ptg;
        const pathProps = {
          "key": index,
          "d": pathString.value,
          "stroke-linecap": strokeLinecap,
          "stroke": color,
          "stroke-width": strokeWidth,
          "fill-opacity": "0",
          "class": `${prefixCls}-line-path`,
          "style": pathStyle
        };
        return pathProps;
      });
    });
    const [setRef, paths] = useRefs.useRefs();
    common.useTransitionDuration(paths);
    const viewBoxString = vue.computed(() => `0 0 100 ${props.strokeWidth}`);
    const pathFirst = vue.computed(() => ({
      "d": pathString.value,
      "stroke-linecap": props.strokeLinecap,
      "stroke": props.trailColor,
      "stroke-width": props.trailWidth || props.strokeWidth,
      "fill-opacity": "0",
      "class": `${props.prefixCls}-line-trail`
    }));
    return () => {
      const {
        percent,
        prefixCls,
        strokeColor,
        strokeLinecap,
        strokeWidth,
        trailColor,
        trailWidth,
        transition,
        ...restProps
      } = props;
      delete restProps.gapPosition;
      return vue.createVNode("svg", vue.mergeProps({
        "class": `${prefixCls}-line`,
        "viewBox": viewBoxString.value,
        "preserveAspectRatio": "none"
      }, restProps), [vue.createVNode("path", pathFirst.value, null), percentListProps.value.map((pathProps, index) => {
        return vue.createVNode("path", vue.mergeProps({
          "ref": setRef(index)
        }, pathProps), null);
      })]);
    };
  }
});

exports.default = Line;
//# sourceMappingURL=Line.js.map
