<template>
  <div>
    <svg
      v-if="props.item.mouseFlag"
      :width="props.dataStyle.listWidth"
      :height="props.dataStyle.listHeight"
      viewBox="0 0 363 28"
      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="-60.5860633%" y2="50%" id="MeiRiShangBao-true-1">
          <stop stop-color="#172600" stop-opacity="0.4" offset="0.0191215035%"></stop>
          <stop stop-color="#3D6644" stop-opacity="0.8" offset="62.775896%"></stop>
          <stop stop-color="#80FF95" stop-opacity="0.9" offset="100%"></stop>
        </linearGradient>
        <linearGradient
          x1="100%"
          y1="100%"
          x2="1.71863581e-15%"
          y2="100%"
          id="MeiRiShangBao-true-2"
        >
          <stop stop-color="#295233" offset="0.0191215035%"></stop>
          <stop stop-color="#386644" offset="31.280489%"></stop>
          <stop stop-color="#AAF2C8" offset="100%"></stop>
        </linearGradient>
      </defs>
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="林业防火-智感-火情线索-切图版" transform="translate(-1512, -850)">
          <g id="可视化" transform="translate(-8, -1)">
            <g id="模块" transform="translate(53, 92)">
              <g id="标题模块--右侧1" transform="translate(1450.5, 703)">
                <g id="编组-47" transform="translate(16.9878, 56)">
                  <rect
                    id="矩形"
                    fill="url(#MeiRiShangBao-true-1)"
                    x="0"
                    y="0"
                    width="362"
                    height="28"
                  ></rect>
                  <rect
                    id="矩形"
                    fill="url(#MeiRiShangBao-true-2)"
                    x="0"
                    y="26"
                    width="362"
                    height="2"
                  ></rect>
                  <rect
                    id="矩形"
                    stroke="#FBC636"
                    fill-opacity="0.5"
                    fill="#1B2026"
                    transform="translate(3.5122, 1) scale(-1, 1) translate(-3.5122, -1)"
                    x="0.51221881"
                    y="0.5"
                    width="6"
                    height="1"
                  ></rect>
                </g>
              </g>
            </g>
          </g>
        </g>
      </g>
      <image
        v-if="['01', '02', '03'].includes(props.item.key)"
        x="4%"
        y="0"
        width="25"
        height="25"
        :href="`/src/assets/images/chart/tables/${props.item.key}.png`"
      />
      <text
        v-else
        x="5%"
        y="20"
        :fill="props.dataStyle.titleColor"
        :font-size="props.dataStyle.titleFontSize"
      >
        {{ props.item.key }}
      </text>
      <text
        x="15%"
        y="20"
        :fill="props.dataStyle.titleColor"
        :font-size="props.dataStyle.titleFontSize"
      >
        {{ props.item.title }}
      </text>
      <text
        x="37%"
        y="20"
        :fill="props.dataStyle.timeColor"
        :font-size="props.dataStyle.timeFontSize"
      >
        {{ dayjs(props.item.time, 'HH:mm:ss').hour() }} 小时
        {{ dayjs(props.item.time, 'HH:mm:ss').minute() }} 分钟
        {{ dayjs(props.item.time, 'HH:mm:ss').second() }} 秒
      </text>
      <text
        x="85%"
        y="20"
        :fill="props.dataStyle.numColor"
        :font-size="props.dataStyle.numFontSize"
      >
        {{ props.item.num }}
      </text>
    </svg>
    <svg
      v-if="!props.item.mouseFlag"
      :width="props.dataStyle.listWidth"
      :height="props.dataStyle.listHeight"
      viewBox="0 0 363 28"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <defs>
        <linearGradient
          x1="165.142669%"
          y1="47.3445949%"
          x2="21.2210522%"
          y2="52.5564913%"
          id="MeiRiShangBao-false-1"
        >
          <stop stop-color="#172600" stop-opacity="0.4" offset="0.0191215035%"></stop>
          <stop stop-color="#3D6644" stop-opacity="0.8" offset="62.775896%"></stop>
          <stop stop-color="#31BD49" stop-opacity="0.9" offset="100%"></stop>
        </linearGradient>
        <linearGradient
          x1="100%"
          y1="100%"
          x2="1.71863581e-15%"
          y2="100%"
          id="MeiRiShangBao-false-2"
        >
          <stop stop-color="#295233" offset="0.0191215035%"></stop>
          <stop stop-color="#386644" offset="31.280489%"></stop>
          <stop stop-color="#AAF2C8" offset="100%"></stop>
        </linearGradient>
      </defs>
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="林业防火-智感-火情线索-切图版" transform="translate(-1512, -928)">
          <g id="可视化" transform="translate(-8, -1)">
            <g id="模块" transform="translate(53, 92)">
              <g id="标题模块--右侧1" transform="translate(1450.5, 703)">
                <g id="编组-54" transform="translate(16.9878, 134)">
                  <rect
                    id="矩形"
                    fill="url(#MeiRiShangBao-false-1)"
                    x="0"
                    y="0"
                    width="362"
                    height="28"
                  ></rect>
                  <rect
                    id="矩形"
                    fill="url(#MeiRiShangBao-false-2)"
                    x="0"
                    y="26"
                    width="362"
                    height="2"
                  ></rect>
                  <rect
                    id="矩形"
                    stroke="#FBC636"
                    fill-opacity="0.5"
                    fill="#1B2026"
                    transform="translate(3.5122, 1) scale(-1, 1) translate(-3.5122, -1)"
                    x="0.51221881"
                    y="0.5"
                    width="6"
                    height="1"
                  ></rect>
                </g>
              </g>
            </g>
          </g>
        </g>
      </g>
      <image
        v-if="['01', '02', '03'].includes(props.item.key)"
        x="4%"
        y="0"
        width="25"
        height="25"
        :href="`/src/assets/images/chart/zhigan/component/MeiRiShangBao${props.item.key}.png`"
      />
      <text
        v-else
        x="5%"
        y="20"
        :fill="props.dataStyle.titleColor"
        :font-size="props.dataStyle.titleFontSize"
      >
        {{ props.item.key }}
      </text>
      <text
        x="15%"
        y="20"
        :fill="props.dataStyle.titleColor"
        :font-size="props.dataStyle.titleFontSize"
      >
        {{ props.item.title }}
      </text>
      <text
        x="37%"
        y="20"
        :fill="props.dataStyle.timeColor"
        :font-size="props.dataStyle.timeFontSize"
      >
        {{ dayjs(props.item.time, 'HH:mm:ss').hour() }} 小时
        {{ dayjs(props.item.time, 'HH:mm:ss').minute() }} 分钟
        {{ dayjs(props.item.time, 'HH:mm:ss').second() }} 秒
      </text>
      <text
        x="85%"
        y="20"
        :fill="props.dataStyle.numColor"
        :font-size="props.dataStyle.numFontSize"
      >
        {{ props.item.num }}
      </text>
    </svg>
  </div>
</template>

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