<template>
  <ItemBox :title="$t('dashboard.stationTopo')" style="min-height: 560px;">
    <div ref="svgLine" class="center-box">
      <div v-loading="loading">
        <svg
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xml:space="preserve"
          class="circle-load-rect-svg"
          viewBox="0 0 800 500"
        >
          <defs>
            <defs>
              <radialGradient id="RadialGradient1">
                <stop offset="0%" stop-color="#fff" />
                <stop offset="30%" stop-color="#0171c1" />
                <stop offset="50%" stop-color="#035088" />
                <stop offset="100%" stop-color="#02395a" />
              </radialGradient>
            </defs>
            <marker
              id="markerCircle"
              markerWidth="15"
              markerHeight="15"
              refX="5"
              refY="5"
            >
              <circle
                cx="5"
                cy="5"
                r="5"
                style="stroke: none; fill: url(#RadialGradient1)"
              />
            </marker>

            <marker
              id="markerArrow"
              markerWidth="13"
              markerHeight="13"
              refX="2"
              refY="6"
              orient="auto"
            >
              <path d="M2,2 L2,11 L10,6 L2,2" style="fill: black" />
            </marker>
          </defs>
          <!-- //线条 -->
          <!-- top -->
          <polyline
            points="154,80 600,80"
            fill="none"
            class="g-rect-path"
            stroke="#0094FF"
            stroke-dasharray="3 3"
          />
          <!-- center -->
          <polyline
            points="385,80 385,363"
            fill="none"
            class="g-rect-path"
            stroke="#0094FF"
            stroke-dasharray="3 3"
          />

          <polyline
            points="385,160 460,160"
            fill="none"
            class="g-rect-path"
            stroke="#0094FF"
            stroke-dasharray="3 3"
          />

          <!-- bottom -->
          <polyline
            points="104,363 655,363"
            fill="none"
            class="g-rect-path"
            stroke="#0094FF"
            stroke-dasharray="3 3"
          />

          <!-- top -->
          <circle
            cx="154"
            cy="80"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          />
          <circle
            cx="600"
            cy="80"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          />

          <!-- 动点 -->
          <circle
            cx="154"
            cy="80"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          >
            <animateMotion
              repeatCount="indefinite"
              dur="4s"
              begin="0s"
              :path="dotData.lineTop"
            />
          </circle>

          <circle
            cx="460"
            cy="160"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          >
            <!-- <animateMotion
                  repeatCount="indefinite"
                  dur="4s"
                  begin="0s"
                  :path="dotData.lineTop"
                /> -->
          </circle>

          <!-- bottom -->
          <circle
            cx="104"
            cy="363"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          />
          <circle
            cx="385"
            cy="363"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          />
          <circle
            cx="655"
            cy="363"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          />

          <circle
            cx="104"
            cy="363"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          >
            <animateMotion
              repeatCount="indefinite"
              dur="4s"
              begin="2s"
              :path="dotData.lineBottomLeft"
            />
          </circle>

          <circle
            cx="655"
            cy="363"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          >
            <animateMotion
              repeatCount="indefinite"
              dur="4s"
              begin="2s"
              :path="dotData.lineBottomRight"
            />
          </circle>

          <circle
            cx="385"
            cy="363"
            r="8"
            style="stroke: none; fill: url(#RadialGradient1)"
          >
            <animateMotion
              repeatCount="indefinite"
              dur="4s"
              begin="2s"
              :path="dotData.lineCenter"
            />
          </circle>

          <!-- 图片和文字 -->

          <!-- 市电 -->
          <image
            :xlink:href="configData.grid"
            x="70"
            y="30"
            width="90"
            height="117"
          />

          <!--  {{ $t("dashboard.load") }} -->
          <image
            :xlink:href="configData.house"
            x="610"
            y="30"
            width="90"
            height="117"
          />
          <text x="645" y="160" fill="#ffffff" font-size="14"> {{ $t("dashboard.load") }}</text>

          <!-- 1#PCS -->
          <image
            :xlink:href="configData.pcs2"
            x="95"
            y="383"
            width="90"
            height="90"
          />
          <text x="116" y="490" fill="#ffffff" font-size="14">
            1#{{ $t("dashboard.cabinet") }}
          </text>

          <image
            :xlink:href="configData.pcs2"
            x="335"
            y="383"
            width="90"
            height="90"
          />
          <text x="360" y="490" fill="#ffffff" font-size="14">
            2#{{ $t("dashboard.cabinet") }}
          </text>

          <image
            :xlink:href="configData.pcs2"
            x="574"
            y="383"
            width="90"
            height="90"
          />
          <text x="604" y="490" fill="#ffffff" font-size="14">
            3#{{ $t("dashboard.cabinet") }}
          </text>

          <!-- 变压器 -->
          <image
            :xlink:href="configData.gui"
            x="320"
            y="193"
            width="140"
            height="105"
          />

          <!-- {{ $t("dashboard.ammeter") }} -->
          <image
            :xlink:href="ammeterImg"
            x="455"
            y="130"
            width="100"
            height="60"
          />
          <!-- 瞬时总有功 -->
          <text x="435" y="220" fill="#ffffff" font-size="14">
            {{ $t("dashboard.totalP") }}(kW)：
          </text>
          <text x="545" y="220" fill="#ffb800" font-size="14">
            {{ activePowerTotal.activePower }}
          </text>

          <!-- 左侧 -->
          <!-- 1#PCS -->
          <text x="85" y="280" fill="#ffffff" font-size="14">SOC(%)：</text>
          <text x="155" y="280" fill="#ffb800" font-size="14">
            {{ partList.length > 0 ? partList[0].soc : 0 }}
          </text>
          <text x="85" y="300" fill="#ffffff" font-size="14">SOH(%)：</text>
          <text x="155" y="300" fill="#ffb800" font-size="14">
            {{ partList.length > 0 ? partList[0].soh : 0 }}
          </text>

          <text x="85" y="320" fill="#ffffff" font-size="14">
            {{ $t("dashboard.workStatus") }}：
          </text>
          <text x="175" y="320" fill="#ffb800" font-size="14">
            {{ workStatus(partList[0].activePowerPCS, 0) }}
          </text>
          <text x="85" y="340" fill="#ffffff" font-size="14">
            {{ $t("dashboard.activePower") }}({{
              partList.length > 0
                ? partList[0].activePowerPCS
                : 0 | kwUnitFormat
            }})：
          </text>
          <text x="185" y="340" fill="#ffb800" font-size="14">
            {{
              partList.length > 0
                ? partList[0].activePowerPCS
                : 0 | kWFormat(2)
            }}
          </text>
          <!-- 中间 2PCS -->

          <text x="420" y="280" fill="#ffffff" font-size="14">
            SOC(%)：
          </text>
          <text x="492" y="280" fill="#ffb800" font-size="14">
            {{ partList.length > 0 ? partList[1].soc : 0 }}
          </text>
          <text x="420" y="300" fill="#ffffff" font-size="14">
            SOH(%)：
          </text>
          <text x="492" y="300" fill="#ffb800" font-size="14">
            {{ partList.length > 0 ? partList[1].soh : 0 }}
          </text>
          <text x="420" y="320" fill="#ffffff" font-size="14">
            {{ $t("dashboard.workStatus") }}：
          </text>
          <text x="512" y="320" fill="#ffb800" font-size="14">
            {{ workStatus(partList[1].activePowerPCS, 1) }}
          </text>
          <text x="420" y="340" fill="#ffffff" font-size="14">
            {{ $t("dashboard.activePower") }}({{
              partList.length > 0
                ? partList[1].activePowerPCS
                : 0 | kwUnitFormat
            }})：
          </text>
          <text x="520" y="340" fill="#ffb800" font-size="14">
            {{
              partList.length > 0
                ? partList[1].activePowerPCS
                : 0 | kWFormat(2)
            }}
          </text>

          <!-- 右侧 -->

          <text x="602" y="280" fill="#ffffff" font-size="14">
            SOC(%)：
          </text>
          <text x="672" y="280" fill="#ffb800" font-size="14">
            {{ partList.length > 0 ? partList[2].soc : 0 }}
          </text>
          <text x="602" y="300" fill="#ffffff" font-size="14">
            SOH(%)：
          </text>
          <text x="672" y="300" fill="#ffb800" font-size="14">
            {{ partList.length > 0 ? partList[2].soh : 0 }}
          </text>
          <text x="602" y="320" fill="#ffffff" font-size="14">
            {{ $t("dashboard.workStatus") }}：
          </text>
          <text x="692" y="320" fill="#ffb800" font-size="14">
            {{ workStatus(partList[2].activePowerPCS, 2) }}
          </text>
          <text x="602" y="340" fill="#ffffff" font-size="14">
            {{ $t("dashboard.activePower") }}({{
              partList.length > 0
                ? partList[2].activePowerPCS
                : 0 | kwUnitFormat
            }})：
          </text>
          <text x="702" y="340" fill="#ffb800" font-size="14">
            {{
              partList.length > 0
                ? partList[2].activePowerPCS
                : 0 | kWFormat(2)
            }}
          </text>
        </svg>
      </div>
    </div>
  </ItemBox>
</template>

<script>
import gridImg from '@/assets/images/wxjd/grid.png'
import ammeterImg from '@/assets/images/wxjd/ammeter.png'
import cabinetImg from '@/assets/images/wxjd/pcs-energy.png'
import chargingPileImg from '@/assets/images/home-office.png'
import distributionCabinetImg from '@/assets/images/wxjd/guiImg.png'
import frameImg from '@/assets/images/wxjd/frame.png'
import cangImg from '@/assets/images/home-cang.png'
import config from './config'
import { changeTheme } from '@/utils/index'
import {
  GetOpenStationMiddle,
  GetOpenStationMiddlePart,
  GetTotalPower
} from '@/api/home-page/index'
export default {
  name: 'Index',
  props: {
    stationType: {
      type: Number,
      default: 0
    },
    stationId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      gridImg,
      ammeterImg,
      cabinetImg,
      chargingPileImg,
      distributionCabinetImg,
      cangImg,
      frameImg,
      dotData: {
        lineTop: 'M 0,0 0,0',
        lineBottomLeft: 'M 0,0 0,0 0,0',
        lineBottomRight: 'M 0,0 0,0 0,0',
        lineCenter: 'M 0,0 0,0 0,0'
      },

      partList: [
        { soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
        { soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 },
        { soc: 0, soh: 0, activePowerPCS: 0.0, reactivePowerPCS: 0.0 }
      ],
      loading: false,
      activePowerTotal: {},
      configData: {}
    }
  },
  computed: {},
  watch: {},
  created() {
    const result = changeTheme()
    this.configData = config[result]
  },
  mounted() {},
  methods: {
    workStatus(val, index) {
      if (this.partList[index].flowDirection === 1) {
        if (+val > +1) {
          return this.$t('dashboard.charging')
        }
        if (+val < -1) {
          return this.$t('dashboard.disCharging')
        }
        if (val < 1 || +val.abs < 1) {
          return this.$t('dashboard.standing')
        }
      } else {
        if (+val > +1) {
          return this.$t('dashboard.disCharging')
        }
        if (+val < -1) {
          return this.$t('dashboard.charging')
        }
        if (val < 1 || +val.abs < 1) {
          return this.$t('dashboard.standing')
        }
      }
    },
    getData() {
      this.GetMiddleActive()
      this.GetOpenStationMiddle()
      this.GetOpenStationMiddlePart()
    },
    async GetMiddleActive() {
      this.loading = true
      try {
        const params = {
          stationId: this.stationId
        }
        const res = await GetTotalPower(params)
        this.activePowerTotal = res.data
      } catch (error) {
        // console.log(error);
      } finally {
        this.loading = false
      }
    },
    flowDirection(data) {
      this.dotData.lineTop = 'M 0,0 412,0'
      if (data[0].flowDirection === 1) {
        if (data[0].activePowerPCS > 1) {
          this.dotData.lineBottomLeft = 'M 283,-280, 280, 0, 0 ,0'
        } else if (data[0].activePowerPCS < -1) {
          this.dotData.lineBottomLeft = 'M 0,0 281,0 281,-283'
        } else if (data[0].activePowerPCS === 0 || !data[0].activePowerPCS || (data[0].activePowerPCS > -1 && data[0].activePowerPCS < 1)) {
          this.dotData.lineBottomLeft = ''
        }
        if (data[1].activePowerPCS > 1) {
          this.dotData.lineCenter = 'M 0,-283,0,0,0,0'
        } else if (data[1].activePowerPCS < -1) {
          this.dotData.lineCenter = 'M 0,0,0,0,0,-283'
        } else if (data[1].activePowerPCS === 0 || !data[1].activePowerPCS || (data[1].activePowerPCS > -1 && data[1].activePowerPCS < 1)) {
          this.dotData.lineCenter = ''
        }
        if (data[2].activePowerPCS > 1) {
          this.dotData.lineBottomRight = 'M -271, -280 , -271 , 0 , 0 , 0'
        } else if (data[2].activePowerPCS < -1) {
          this.dotData.lineBottomRight = 'M 0,0 -271,0 -271,-283'
        } else if (data[2].activePowerPCS === 0 || !data[2].activePowerPCS || (data[2].activePowerPCS > -1 && data[2].activePowerPCS < 1)) {
          this.dotData.lineBottomRight = ''
        }
      } else {
        if (data[0].activePowerPCS > 1) {
          this.dotData.lineBottomLeft = 'M 0,0 281,0 281,-283'
        } else if (data[0].activePowerPCS < -1) {
          this.dotData.lineBottomLeft = 'M 283,-280, 280, 0, 0 ,0'
        } else if (data[0].activePowerPCS === 0 || !data[0].activePowerPCS || (data[0].activePowerPCS > -1 && data[0].activePowerPCS < 1)) {
          this.dotData.lineBottomLeft = ''
        }
        if (data[1].activePowerPCS > 1) {
          this.dotData.lineCenter = 'M 0,0,0,0,0,-283'
        } else if (data[1].activePowerPCS < -1) {
          this.dotData.lineCenter = 'M 0,-283,0,0,0,0'
        } else if (data[1].activePowerPCS === 0 || !data[1].activePowerPCS || (data[1].activePowerPCS > -1 && data[1].activePowerPCS < 1)) {
          this.dotData.lineCenter = ''
        }
        if (data[2].activePowerPCS > 1) {
          this.dotData.lineBottomRight = 'M 0,0 -271,0 -271,-283'
        } else if (data[2].activePowerPCS < -1) {
          this.dotData.lineBottomRight = 'M -271, -280 , -271 , 0 , 0 , 0'
        } else if (data[2].activePowerPCS === 0 || !data[2].activePowerPCS || (data[2].activePowerPCS > -1 && data[2].activePowerPCS < 1)) {
          this.dotData.lineBottomRight = ''
        }
      }
    },
    async GetOpenStationMiddlePart() {
      this.loading = true
      try {
        const params = {
          stationId: this.stationId
        }
        const res = await GetOpenStationMiddlePart(params)
        this.partList = res.data
        this.flowDirection(this.partList)
      } catch (error) {
        // console.log(error);
      } finally {
        this.loading = false
      }
    },
    async GetOpenStationMiddle() {
      this.loading = true
      try {
        const params = {
          stationId: this.stationId
        }
        await GetOpenStationMiddle(params)
      } catch (error) {
        // console.log(error);
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.center-box {
  width: 100%;
  height: 100%;
}

@mixin move-round($duration, $delay) {
  fill: none;
  stroke-width: 5;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 3, 900;
  stroke-dashoffset: 0;
  animation: lineMove $duration $delay cubic-bezier(0, 0, 0.74, 0.74) infinite;
}

@keyframes lineMove {
  0% {
    stroke-dashoffset: -850;
  }
  100% {
    stroke-dashoffset: -0;
  }
}
.g-rect-fill-two {
  @include move-round(3.5s, 1s);
}
</style>
