<template>
  <div>
    <svg
      :height="props.dataStyle.titleHeight"
      :width="props.dataStyle.titleWidth"
      viewBox="0 0 181 30"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <defs>
        <linearGradient
          x1="100%"
          y1="50%"
          x2="2.30946189%"
          y2="50%"
          id="linearGradient-WuRenJiShiShiHuaMian-1"
        >
          <stop stop-color="#1F6B55" stop-opacity="0" offset="0%"></stop>
          <stop stop-color="#0A392A" offset="100%"></stop>
        </linearGradient>
      </defs>
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="林业防火-智感-无人机实时画面-切图版" transform="translate(-1512, -711)">
          <g id="可视化" transform="translate(-0.5, -1)">
            <g id="模块" transform="translate(46, 88)">
              <g id="标题模块--右侧1" transform="translate(1450, 285)">
                <g id="1" transform="translate(15.1305, 215.5427)">
                  <g id="编组-16" transform="translate(1.3695, 123.4573)">
                    <rect
                      id="矩形"
                      fill="url(#linearGradient-WuRenJiShiShiHuaMian-1)"
                      transform="translate(90.5, 15) scale(1, -1) translate(-90.5, -15)"
                      x="0"
                      y="0"
                      width="181"
                      height="30"
                    ></rect>
                    <rect
                      id="矩形"
                      fill="#00611A"
                      transform="translate(1.5, 15) scale(1, -1) translate(-1.5, -15)"
                      x="0"
                      y="0"
                      width="3"
                      height="30"
                    ></rect>
                    <rect
                      id="矩形"
                      fill="#00611A"
                      transform="translate(179.5, 15) scale(1, -1) translate(-179.5, -15)"
                      x="178"
                      y="0"
                      width="3"
                      height="30"
                    ></rect>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </g>
      </g>
      <image x="8" y="2" width="25" height="25" href="./wurenji.svg" />
      <text
        x="40"
        y="20"
        :fill="props.dataStyle.titleColor"
        :font-size="props.dataStyle.titleFontSize"
      >
        {{
          truncateText(
            props.item.title,
            props.dataStyle.titleWidth - 40,
            props.dataStyle.titleFontSize,
          )
        }}
      </text>
    </svg>
  </div>
</template>

<script setup lang="ts">
  import dayjs from 'dayjs';
  const props = defineProps(['item', 'dataStyle']);

  // 超过宽度的文字切换成...
  function truncateText(text, maxWidth, fontSize, fontFamily = 'Arial') {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    context.font = `${fontSize}px ${fontFamily}`;

    const metrics = context.measureText(text);
    if (metrics.width <= maxWidth) {
      return text;
    }

    let truncatedText = text;
    for (let i = text.length; i > 0; i--) {
      truncatedText = text.slice(0, i) + '...';
      const newMetrics = context.measureText(truncatedText);
      if (newMetrics.width <= maxWidth) {
        return truncatedText;
      }
    }
    return '';
  }
</script>

<style lang="scss" scoped></style>
