<template>
  <div class="go-text-box">
    <div class="content" >
      {{ option.dataset }}
    </div>
    <svg width="1920" height="94" class="svg" viewBox="0 0 1920 94" fill="none"
      style="position: absolute; top: 0; left: 0; z-index: 1;" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
      <g id="Group 251">
        <g id="Mask group">
          <mask id="mask0_28_208" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="1920"
            height="72">
            <rect id="Rectangle 84" width="1920" height="72" fill="#D9D9D9" />
          </mask>
          <g mask="url(#mask0_28_208)">
            <g id="Rectangle 83" opacity="0.5" filter="url(#filter0_f_28_208)">
              <rect x="-8" y="64" width="1935" height="38" fill="url(#paint0_linear_28_208)" />
            </g>
          </g>
        </g>
        <rect id="1" opacity="0.23" width="1920" height="73" fill="url(#paint1_linear_28_208)" />
        <g id="&#230;&#160;&#135;&#233;&#162;&#152;&#230;&#161;&#134;">
          <g id="Group 250">
            <path id="Rectangle 82" opacity="0.2" d="M703 0L741.5 0L679 73H640L703 0Z"
              fill="url(#paint2_linear_28_208)" />
            <path id="Rectangle 83_2" opacity="0.15" d="M763 0L801.5 0L739 73H700L763 0Z"
              fill="url(#paint3_linear_28_208)" />
            <path id="Rectangle 84_2" opacity="0.1" d="M822.5 0L861 0L798.5 73H759.5L822.5 0Z"
              fill="url(#paint4_linear_28_208)" />
            <path id="Rectangle 85" opacity="0.05" d="M882 0L920.5 0L858.5 73H819L882 0Z"
              fill="url(#paint5_linear_28_208)" />
          </g>
          <path id="Rectangle 81" d="M0 0H681L622.82 72H0V0Z" fill="url(#paint6_linear_28_208)" fill-opacity="0.2" />
          <g id="Vector" opacity="0.1">
            <path d="M25 0L63.5 0L1 73H-38L25 0Z" fill="url(#paint7_linear_28_208)" />
            <path d="M89 0L127.5 0L65 73H26L89 0Z" fill="url(#paint8_linear_28_208)" />
            <path d="M153 0L191.5 0L129 73H90L153 0Z" fill="url(#paint9_linear_28_208)" />
            <path d="M217 0L255.5 0L193 73H154L217 0Z" fill="url(#paint10_linear_28_208)" />
            <path d="M281 0L319.5 0L257 73H218L281 0Z" fill="url(#paint11_linear_28_208)" />
            <path d="M345 0L383.5 0L321 73H282L345 0Z" fill="url(#paint12_linear_28_208)" />
            <path d="M409 0L447.5 0L385 73H346L409 0Z" fill="url(#paint13_linear_28_208)" />
            <path d="M473 0L511.5 0L449 73H410L473 0Z" fill="url(#paint14_linear_28_208)" />
            <path d="M537 0L575.5 0L513 73H474L537 0Z" fill="url(#paint15_linear_28_208)" />
            <path d="M601 0L639.5 0L577 73H538L601 0Z" fill="url(#paint16_linear_28_208)" />
          </g>
        </g>
        <g id="Mask group_2">
          <mask id="mask1_28_208" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="4" y="-1" width="716"
            height="72">
            <path id="Rectangle 82_2" d="M4 -1H720L658.829 71H4V-1Z" fill="url(#paint17_linear_28_208)" />
          </mask>
          <g mask="url(#mask1_28_208)">
            <g id="Ellipse 252" filter="url(#filter1_f_28_208)">
              <ellipse cx="334.463" cy="45.9221" rx="89.9184" ry="37.643" fill="#57DBD3" />
            </g>
          </g>
        </g>
        <g id="&#232;&#137;&#178;&#229;&#157;&#151;&#232;&#163;&#133;&#233;&#165;&#176;">
          <foreignObject x="630.125" y="39.9" width="25.7529" height="21.2">
            <div xmlns="http://www.w3.org/1999/xhtml"
              style="backdrop-filter:blur(0px);clip-path:url(#bgblur_0_28_208_clip_path);height:100%;width:100%"></div>
          </foreignObject>
          <g id="Rectangle 86" filter="url(#filter2_d_28_208)" data-figma-bg-blur-radius="0">
            <path
              d="M643.388 46.0725C643.426 46.0266 643.483 46 643.542 46L649.577 46C649.746 46 649.839 46.1963 649.732 46.3269L642.675 54.9269C642.637 54.9732 642.581 55 642.521 55H636.425C636.256 55 636.163 54.8029 636.271 54.6725L643.388 46.0725Z"
              fill="url(#paint18_linear_28_208)" />
          </g>
          <foreignObject x="618.125" y="39.9" width="25.7529" height="21.2">
            <div xmlns="http://www.w3.org/1999/xhtml"
              style="backdrop-filter:blur(0px);clip-path:url(#bgblur_1_28_208_clip_path);height:100%;width:100%"></div>
          </foreignObject>
          <g id="Rectangle 87" filter="url(#filter3_d_28_208)" data-figma-bg-blur-radius="0">
            <path
              d="M631.388 46.0725C631.426 46.0266 631.483 46 631.542 46L637.577 46C637.746 46 637.839 46.1963 637.732 46.3269L630.675 54.9269C630.637 54.9732 630.581 55 630.521 55H624.425C624.256 55 624.163 54.8029 624.271 54.6725L631.388 46.0725Z"
              fill="url(#paint19_linear_28_208)" />
          </g>
          <foreignObject x="606.125" y="39.9" width="25.7529" height="21.2">
            <div xmlns="http://www.w3.org/1999/xhtml"
              style="backdrop-filter:blur(0px);clip-path:url(#bgblur_2_28_208_clip_path);height:100%;width:100%"></div>
          </foreignObject>
          <g id="Rectangle 88" filter="url(#filter4_d_28_208)" data-figma-bg-blur-radius="0">
            <path
              d="M619.388 46.0725C619.426 46.0266 619.483 46 619.542 46L625.577 46C625.746 46 625.839 46.1963 625.732 46.3269L618.675 54.9269C618.637 54.9732 618.581 55 618.521 55H612.425C612.256 55 612.163 54.8029 612.271 54.6725L619.388 46.0725Z"
              fill="url(#paint20_linear_28_208)" />
          </g>
        </g>
        <g id="&#229;&#133;&#137;&#230;&#149;&#136; 2" style="mix-blend-mode:screen" opacity="0.95">
          <rect x="48.5586" y="23" width="508" height="71" fill="url(#pattern0_28_208)" />
        </g>
      </g>
      <defs>
        <filter id="filter0_f_28_208" x="-62.5" y="9.5" width="2044" height="147" filterUnits="userSpaceOnUse"
          color-interpolation-filters="sRGB">
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
          <feGaussianBlur stdDeviation="27.25" result="effect1_foregroundBlur_28_208" />
        </filter>
        <filter id="filter1_f_28_208" x="163.044" y="-73.2209" width="342.837" height="238.286"
          filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
          <feGaussianBlur stdDeviation="40.75" result="effect1_foregroundBlur_28_208" />
        </filter>
        <filter id="filter2_d_28_208" x="630.125" y="39.9" width="25.7529" height="21.2" filterUnits="userSpaceOnUse"
          color-interpolation-filters="sRGB">
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            result="hardAlpha" />
          <feOffset />
          <feGaussianBlur stdDeviation="3.05" />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix type="matrix" values="0 0 0 0 0.105882 0 0 0 0 0.780392 0 0 0 0 0.537255 0 0 0 0.64 0" />
          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_28_208" />
          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_28_208" result="shape" />
        </filter>
        <clipPath id="bgblur_0_28_208_clip_path" transform="translate(-630.125 -39.9)">
          <path
            d="M643.388 46.0725C643.426 46.0266 643.483 46 643.542 46L649.577 46C649.746 46 649.839 46.1963 649.732 46.3269L642.675 54.9269C642.637 54.9732 642.581 55 642.521 55H636.425C636.256 55 636.163 54.8029 636.271 54.6725L643.388 46.0725Z" />
        </clipPath>
        <filter id="filter3_d_28_208" x="618.125" y="39.9" width="25.7529" height="21.2" filterUnits="userSpaceOnUse"
          color-interpolation-filters="sRGB">
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            result="hardAlpha" />
          <feOffset />
          <feGaussianBlur stdDeviation="3.05" />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix type="matrix" values="0 0 0 0 0.52549 0 0 0 0 0.788235 0 0 0 0 0.937255 0 0 0 0.64 0" />
          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_28_208" />
          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_28_208" result="shape" />
        </filter>
        <clipPath id="bgblur_1_28_208_clip_path" transform="translate(-618.125 -39.9)">
          <path
            d="M631.388 46.0725C631.426 46.0266 631.483 46 631.542 46L637.577 46C637.746 46 637.839 46.1963 637.732 46.3269L630.675 54.9269C630.637 54.9732 630.581 55 630.521 55H624.425C624.256 55 624.163 54.8029 624.271 54.6725L631.388 46.0725Z" />
        </clipPath>
        <filter id="filter4_d_28_208" x="606.125" y="39.9" width="25.7529" height="21.2" filterUnits="userSpaceOnUse"
          color-interpolation-filters="sRGB">
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            result="hardAlpha" />
          <feOffset />
          <feGaussianBlur stdDeviation="3.05" />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix type="matrix" values="0 0 0 0 0.181005 0 0 0 0 0.561925 0 0 0 0 0.918269 0 0 0 0.64 0" />
          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_28_208" />
          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_28_208" result="shape" />
        </filter>
        <clipPath id="bgblur_2_28_208_clip_path" transform="translate(-606.125 -39.9)">
          <path
            d="M619.388 46.0725C619.426 46.0266 619.483 46 619.542 46L625.577 46C625.746 46 625.839 46.1963 625.732 46.3269L618.675 54.9269C618.637 54.9732 618.581 55 618.521 55H612.425C612.256 55 612.163 54.8029 612.271 54.6725L619.388 46.0725Z" />
        </clipPath>
        <pattern id="pattern0_28_208" patternContentUnits="objectBoundingBox" width="1" height="1">
          <use xlink:href="#image0_28_208" transform="scale(0.0019685 0.0140845)" />
        </pattern>
        <linearGradient id="paint0_linear_28_208" x1="-5.5798" y1="102" x2="1924.73" y2="102"
          gradientUnits="userSpaceOnUse">
          <stop offset="0.713801" stop-color="#385980" />
          <stop offset="1" stop-color="#385980" stop-opacity="0" />
        </linearGradient>
        <linearGradient id="paint1_linear_28_208" x1="960" y1="0" x2="960" y2="73" gradientUnits="userSpaceOnUse">
          <stop stop-color="#28A6FF" />
          <stop offset="0.5" stop-color="#015397" />
          <stop offset="1" stop-color="#188FFE" stop-opacity="0" />
        </linearGradient>
        <linearGradient id="paint2_linear_28_208" x1="729.419" y1="-0.592366" x2="665.5" y2="74.5"
          gradientUnits="userSpaceOnUse">
          <stop stop-color="#78B4DB" />
          <stop offset="1" stop-color="#22618A" stop-opacity="0" />
        </linearGradient>
        <linearGradient id="paint3_linear_28_208" x1="789.419" y1="-0.592366" x2="725.5" y2="74.5"
          gradientUnits="userSpaceOnUse">
          <stop stop-color="#78B4DB" />
          <stop offset="1" stop-color="#22618A" stop-opacity="0" />
        </linearGradient>
        <linearGradient id="paint4_linear_28_208" x1="848.919" y1="-0.592366" x2="785" y2="74.5"
          gradientUnits="userSpaceOnUse">
          <stop stop-color="#78B4DB" />
          <stop offset="1" stop-color="#22618A" stop-opacity="0" />
        </linearGradient>
        <linearGradient id="paint5_linear_28_208" x1="908.419" y1="-0.592366" x2="844.5" y2="74.5"
          gradientUnits="userSpaceOnUse">
          <stop stop-color="#78B4DB" />
          <stop offset="1" stop-color="#22618A" stop-opacity="0" />
        </linearGradient>
        <linearGradient id="paint6_linear_28_208" x1="340.5" y1="0" x2="340.5" y2="72" gradientUnits="userSpaceOnUse">
          <stop stop-color="#28A6FF" />
          <stop offset="0.5" stop-color="#015397" />
          <stop offset="1" stop-color="#188FFE" stop-opacity="0" />
        </linearGradient>
        <linearGradient id="paint7_linear_28_208" x1="361" y1="-1.56596e-06" x2="363.5" y2="73"
          gradientUnits="userSpaceOnUse">
          <stop stop-color="#78B4DB" />
          <stop offset="1" stop-color="#22618A" stop-opacity="0" />
        </linearGradient>
        <linearGradient id="paint8_linear_28_208" x1="361" y1="-1.56596e-06" x2="363.5" y2="73"
          gradientUnits="userSpaceOnUse">
          <stop stop-color="#78B4DB" />
          <stop offset="1" stop-color="#22618A" stop-opacity="0" />
        </linearGradient>
        <linearGradient id="paint9_linear_28_208" x1="361" y1="-1.56596e-06" x2="363.5" y2="73"
          gradientUnits="userSpaceOnUse">
          <stop stop-color="#78B4DB" />
          <stop offset="1" stop-color="#22618A" stop-opacity="0" />
        </linearGradient>
        <linearGradient id="paint10_linear_28_208" x1="361" y1="-1.56596e-06" x2="363.5" y2="73"
          gradientUnits="userSpaceOnUse">
          <stop stop-color="#78B4DB" />
          <stop offset="1" stop-color="#22618A" stop-opacity="0" />
        </linearGradient>
        <linearGradient id="paint11_linear_28_208" x1="361" y1="-1.56596e-06" x2="363.5" y2="73"
          gradientUnits="userSpaceOnUse">
          <stop stop-color="#78B4DB" />
          <stop offset="1" stop-color="#22618A" stop-opacity="0" />
        </linearGradient>
        <linearGradient id="paint12_linear_28_208" x1="361" y1="-1.56596e-06" x2="363.5" y2="73"
          gradientUnits="userSpaceOnUse">
          <stop stop-color="#78B4DB" />
          <stop offset="1" stop-color="#22618A" stop-opacity="0" />
        </linearGradient>
        <linearGradient id="paint13_linear_28_208" x1="361" y1="-1.56596e-06" x2="363.5" y2="73"
          gradientUnits="userSpaceOnUse">
          <stop stop-color="#78B4DB" />
          <stop offset="1" stop-color="#22618A" stop-opacity="0" />
        </linearGradient>
        <linearGradient id="paint14_linear_28_208" x1="361" y1="-1.56596e-06" x2="363.5" y2="73"
          gradientUnits="userSpaceOnUse">
          <stop stop-color="#78B4DB" />
          <stop offset="1" stop-color="#22618A" stop-opacity="0" />
        </linearGradient>
        <linearGradient id="paint15_linear_28_208" x1="361" y1="-1.56596e-06" x2="363.5" y2="73"
          gradientUnits="userSpaceOnUse">
          <stop stop-color="#78B4DB" />
          <stop offset="1" stop-color="#22618A" stop-opacity="0" />
        </linearGradient>
        <linearGradient id="paint16_linear_28_208" x1="361" y1="-1.56596e-06" x2="363.5" y2="73"
          gradientUnits="userSpaceOnUse">
          <stop stop-color="#78B4DB" />
          <stop offset="1" stop-color="#22618A" stop-opacity="0" />
        </linearGradient>
        <linearGradient id="paint17_linear_28_208" x1="607.559" y1="-1" x2="21.4067" y2="-1"
          gradientUnits="userSpaceOnUse">
          <stop stop-color="#22618A" />
          <stop offset="1" stop-color="#22618A" stop-opacity="0" />
        </linearGradient>
        <linearGradient id="paint18_linear_28_208" x1="644" y1="55" x2="644" y2="46" gradientUnits="userSpaceOnUse">
          <stop stop-color="#29BE89" />
          <stop offset="1" stop-color="#25DB84" />
        </linearGradient>
        <linearGradient id="paint19_linear_28_208" x1="632" y1="55" x2="632" y2="46" gradientUnits="userSpaceOnUse">
          <stop stop-color="#3B9ED5" />
          <stop offset="1" stop-color="#86C9EF" />
        </linearGradient>
        <linearGradient id="paint20_linear_28_208" x1="619" y1="55" x2="619" y2="46" gradientUnits="userSpaceOnUse">
          <stop stop-color="#4C92FB" />
          <stop offset="0.990824" stop-color="#1CBADD" />
        </linearGradient>
        <image id="image0_28_208" data-name="&#229;&#133;&#137;&#230;&#149;&#136;.png" width="508" height="71"
          preserveAspectRatio="none"
          xlink:href="data:image/png;base64,[encoded data, 50944 characters]" />
      </defs>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { PropType, toRefs, shallowReactive, watch } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { option as configOption } from './config'
const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
    required: true,
  },
})

// const { w, h } = toRefs(props.chartConfig.attr)

const { fontColor,
  fontSize,
  letterSpacing,
  paddingY,
  paddingX,
  textAlign,
  writingMode,
  backgroundColor,
  fontWeight,
  fontStyle, fontShadowColor } = toRefs(props.chartConfig.option)

const option = shallowReactive({
  dataset: configOption.dataset
})
// 手动更新
watch(
  () => props.chartConfig.option.dataset,
  (newData: any) => {
    option.dataset = newData
  },
  {
    immediate: true,
    deep: false
  }
)
// 预览更新
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
  option.dataset = newData
})
</script>
<style lang="scss" scoped>
@include go('text-box') {

  display: flex;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: v-bind('textAlign');
  color: v-bind('fontColor');
  padding: v-bind('`${paddingY}px ${paddingX}px`');
  font-size: v-bind('fontSize + "px"');
  letter-spacing: v-bind('letterSpacing + "px"');
  writing-mode: v-bind('writingMode');
  font-weight: v-bind('fontWeight');
  font-style: v-bind('fontStyle');
  background-color: v-bind('backgroundColor');
  text-shadow: 0px 4px 3px  v-bind('fontShadowColor');
}

.go-text-box .svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
</style>
