<template>
  <itemBox
    :title="title"
    :title-id="titleId"
    style="min-height: 560px"
    @handleSaveTitle="saveDynamicConfigTitle"
  >
    <div slot="header">
      <div class="header-right-box">
        <el-dropdown @command="commandKey">
          <span class="el-dropdown-link">
            {{ `${(selectKey - 1) * 15 + 1}-${selectKey * 15}储能柜` }}<i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">1-15储能柜</el-dropdown-item>
            <el-dropdown-item command="2">16-30储能柜</el-dropdown-item>
            <el-dropdown-item command="3">31-45储能柜</el-dropdown-item>
            <el-dropdown-item command="4">46-60储能柜</el-dropdown-item>
            <el-dropdown-item command="5">61-75储能柜</el-dropdown-item>
            <el-dropdown-item command="6">76-90储能柜</el-dropdown-item>
            <el-dropdown-item command="7">91-105储能柜</el-dropdown-item>
            <el-dropdown-item command="8">106-120储能柜</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </div>
    </div>
    <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 1080 598"
        >
          <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>
          <g transform="scale(0.75 0.8) translate(0,-30)">
            <image :xlink:href="gridImg" x="20" y="40" width="70" height="70" />
            <text x="40" y="120" fill="#ffffff" font-size="12">电网</text>

            <polyline
              points="85,55 300,55 300,200 400,200 400,55 1400,55"
              fill="none"
              class="g-rect-path"
              stroke-width="2"
              stroke="#0094FF"
            />
            <polyline
              points="85,55 310,55"
              fill="none"
              class="g-rect-path"
              stroke-width="2"
              stroke="#0094FF"
            />
            <polyline
              points="300,200 300,55"
              fill="none"
              class="g-rect-path"
              stroke-width="1"
              stroke="#0094FF"
            />
            <polyline
              points="400,200 400,55"
              fill="none"
              class="g-rect-path"
              stroke-width="1"
              stroke="#0094FF"
            />
            <polyline
              points="300,200 400,200"
              fill="none"
              class="g-rect-path"
              stroke-width="1"
              stroke="#0094FF"
            />
            <polyline
              points="390,55 1300,55"
              fill="none"
              class="g-rect-path"
              stroke-width="2"
              stroke="#0094FF"
            />

            <polyline
              points="200,115 300,115"
              fill="none"
              class="g-rect-path"
              stroke="#0094FF"
              stroke-dasharray="3 3"
            />
            <image
              :xlink:href="ammeterImg"
              x="140"
              y="90"
              width="70"
              height="50"
              style="cursor: pointer"
              @click="lookDeviceDetail(`${selectKey}-120Tuopu-4-ammeter`)"
            />
            <text x="145" y="160" fill="#ffffff" font-size="14">防逆流电表</text>
            <g v-for="(item, index) in ammeter_4" :key="item.id">
              <text x="140" :y="175 + 20 * index" fill="#fff" font-size="14">
                {{ item.name }}
              </text>
              <text
                :x="countChineseAndEnglishCharacters(item.name, 140)"
                :y="175 + 20 * index"
                fill="#FFB800"
                font-size="14"
              >
                {{ item.value }}
              </text>
            </g>
            <image :xlink:href="AY" x="895" y="180" width="70" height="50" />

            <polyline
              points="930,230 930,510"
              fill="none"
              class="g-rect-path"
              stroke="#0094FF"
              stroke-width="1"
            />
            <polyline
              points="930,55 930,180"
              fill="none"
              class="g-rect-path"
              stroke="#0094FF"
              stroke-width="1"
            />

            <rect
              x="60"
              y="510"
              width="1375"
              height="140"
              rx="3"
              :style="{ fill: 'transparent', stroke: '#FFFFFF' }"
            />

            <polyline
              points="930,260 1060,260"
              fill="none"
              class="g-rect-path"
              stroke="#0094FF"
              stroke-dasharray="3 3"
            />

            <image
              :xlink:href="ammeterImg"
              x="1020"
              y="240"
              width="70"
              height="50"
              style="cursor: pointer;"
              @click="lookDeviceDetail(`${selectKey}-120Tuopu-3-ammeter`)"
            />
            <text x="1020" y="305" fill="#ffffff" font-size="14">计量电表</text>
            <g v-for="(item,index) in ammeter_3" :key="item.id">
              <text x="1110" :y="220 + ( 20 * index)" fill="#ffffff" font-size="14">
                {{ item.name }}
              </text>
              <text :x="countChineseAndEnglishCharacters(item.name,1110)" :y="220 + ( 20 * index)" fill="#FFB800" font-size="14">
                {{ item.value }}
              </text>
            </g>

            <rect
              x="395"
              y="140"
              width="12"
              height="22"
              :style="{
                fill: break_1.length ? getBreakColor(break_1[0].value) : '#888888',
                stroke: 'transparent',
                cursor: 'pointer',
              }"
              @click="lookDeviceDetail(`${selectKey}-120Tuopu-1-break`)"
            />

            <g transform="translate(0,110)">
              <text x="10" y="565" fill="#ffffff" font-size="14">工作状态</text>
              <text x="10" y="590" fill="#ffffff" font-size="14">有功功率(kW)</text>
              <text x="10" y="615" fill="#ffffff" font-size="14">
                SOC(%)
              </text>
              <text x="10" y="640" fill="#ffffff" font-size="14">SOH(%)</text>

              <g transform="translate(50,90)">
                <g v-for="item in 15" :key="item">
                  <text :x="55 + (item - 1) * 90" y="368" fill="#ffffff" font-size="14">{{ (selectKey - 1) * 15 + item }}储能柜</text>
                  <image
                    :xlink:href="cabinetImg"
                    :x="55 + (item - 1) * 90"
                    y="383"
                    width="60"
                    height="60"
                    style="cursor: pointer"
                    @click="lookDeviceDetail(`${selectKey}-120Tuopu-${item}-pcs`)"
                  />
                  <text :x="65 + (item - 1) * 90" y="475" fill="#FFB800" font-size="14">
                    {{ getPcsDataValue(item, 0) }}
                  </text>
                  <text :x="65 + (item - 1) * 90" y="500" fill="#FFB800" font-size="14">
                    {{ getPcsDataValue(item, 1) }}
                  </text>
                  <text :x="65 + (item - 1) * 90" y="525" fill="#FFB800" font-size="14">
                    {{ getPcsDataValue(item, 2) }}
                  </text>
                  <text :x="65 + (item - 1) * 90" y="550" fill="#FFB800" font-size="14">
                    {{ getPcsDataValue(item, 3) }}
                  </text>
                </g>

              </g>
            </g>
          </g>
        </svg>

      </div>
    </div>
    <dispositionPointDialog
      is-topology
      :show-div-location="true"
      :max-length="12"
      :page-location="pageLocation"
      :visible="show_point_dispostion"
      @close="closePoint"
      @getData="getDynamicPointData"
    />
  </itemBox>
</template>
<script>
import itemBox from '../itemBox/position.vue'
import { DynamicConfigPoint } from '@/api/home-page/index'
import cabinetImg from '@/assets/images/wxjd/cabinet.png'
import chargingPileImg from '@/assets/images/home-office.png'
import gridImg from '@/assets/images/wxjd/grid.png'
import AY from '@/assets/images/wxjd/AY.png'
import ammeterImg from '@/assets/images/wxjd/ammeter.png'
import FrameImg from '@/assets/images/wxjd/frame.png'
import {
  QueryDynamicConfigTitle,
  AddDynamicConfigTitle
} from '@/api/test-management/index'
export default {
  components: { itemBox },
  props: {
    stationId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      pageLocation: 'top',
      permissionId: null,
      loading: false,
      moveX: 0,
      moveY: 0,
      tabPosition: 1,
      show_point_dispostion: false,
      title: '站点拓扑',
      titleId: null,
      gridImg,
      ammeterImg,
      AY,
      FrameImg,
      cabinetImg,
      chargingPileImg,
      allData: [],
      pcsData_1: [],
      pcsData_2: [],
      pcsData_3: [],
      pcsData_4: [],
      pcsData_5: [],
      pcsData_6: [],
      pcsData_7: [],
      pcsData_8: [],
      pcsData_9: [],
      pcsData_10: [],
      pcsData_11: [],
      pcsData_12: [],
      pcsData_13: [],
      pcsData_14: [],
      pcsData_15: [],
      ammeter_1: [],
      ammeter_2: [],
      ammeter_3: [],
      ammeter_4: [],
      break_1: [],
      selectKey: '1'
    }
  },
  computed: {
    currentStation() {
      return this.$store.getters.currentStation || undefined
    }
  },
  watch: {

    currentStation: {
      handler(val) {
        if (val && val.id) {
          if (this.$store.getters.menuList.length) {
            this.permissionId = this.$store.getters.menuList.find((item) => {
              return item.url === this.$route.path
            }).id
          }
          this.queryDynamicConfigTitle()
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    if (this.$store.getters.menuList.length) {
      this.permissionId = this.$store.getters.menuList.find((item) => {
        return item.url === this.$route.path
      }).id
    }
    this.queryDynamicConfigTitle()
  },
  methods: {
    commandKey(item) {
      this.selectKey = item
      this.getPcsData()
      // console.log(item)
    },
    async saveDynamicConfigTitle(title, id) {
      await AddDynamicConfigTitle({
        name: title,
        id: id,
        stationId: this.stationId,
        pageLocation: '120_topCenter_title',
        permissionId: this.permissionId
      })
      this.queryDynamicConfigTitle()
    },
    async queryDynamicConfigTitle() {
      const { data } = await QueryDynamicConfigTitle({
        stationId: this.stationId,
        pageLocation: '120_topCenter_title',
        permissionId: this.permissionId
      })
      this.title = data.length ? data[0].name : '站点拓扑'
      this.titleId = data.length ? data[0].id : undefined
    },
    changeTab(val) {
      this.tabPosition = val
      this.$nextTick(() => {
        this.getData()
      })
    },
    oScale() {
      this.$emit('scale')
    },
    getBreakColor(val) {
      if (+val === 1) {
        return '#00FF1A'
      } else {
        return '#FF0000'
      }
    },
    countChineseAndEnglishCharacters(str, x) {
      var chineseCount = str.match(/[\u4e00-\u9fa5]/g)
        ? str.match(/[\u4e00-\u9fa5]/g).length
        : 0
      var englishCount = str.match(/[a-zA-Z]/g)
        ? str.match(/[a-zA-Z]/g).length
        : 0
      var otherCount = str.length - chineseCount - englishCount
      const obj = {
        otherCount: otherCount,
        chineseCount: chineseCount,
        englishCount: englishCount
      }
      return (
        obj.englishCount * 8 + obj.chineseCount * 16 + obj.otherCount * 6 + x
      )
    },
    lookDeviceDetail(val) {
      // 查看设备详情
      this.pageLocation = val
      this.show_point_dispostion = true
    },
    closePoint() {
      this.show_point_dispostion = false
    },

    getDynamicPointData() {
      this.getData()
    },
    handleSetting() {
      this.$emit('handleSetting')
    },
    toScale() {
      this.$emit('toScale')
    },
    async getpoint() {
      await DynamicConfigPoint({
        pageLocation: this.pageLocation,
        permissionId: this.permissionId,
        stationId: this.stationId
      })
    },
    async getData() {
      this.getPcsData()
    },
    async getPcsData() {
      this.loading = true
      try {
        const res = await DynamicConfigPoint({
          permissionId: this.permissionId,
          stationId: this.stationId
        })
        this.pcsData_1 = []
        this.pcsData_2 = []
        this.pcsData_3 = []
        this.pcsData_4 = []
        this.pcsData_5 = []
        this.pcsData_6 = []
        this.pcsData_7 = []
        this.pcsData_8 = []
        this.pcsData_9 = []
        this.pcsData_10 = []
        this.pcsData_11 = []
        this.pcsData_12 = []
        this.pcsData_13 = []
        this.pcsData_14 = []
        this.pcsData_15 = []
        this.ammeter_1 = []
        this.ammeter_2 = []
        this.ammeter_3 = []
        this.ammeter_4 = []
        this.break_1 = []
        if (res.data.length) {
          res.data.forEach((item) => {
            if (item.pageLocation === `${this.selectKey}-120Tuopu-1-pcs`) {
              this.pcsData_1.push(item)
            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-2-pcs`) {
              this.pcsData_2.push(item)
            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-3-pcs`) {
              this.pcsData_3.push(item)
            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-4-pcs`) {
              this.pcsData_4.push(item)
            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-5-pcs`) {
              this.pcsData_5.push(item)
            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-6-pcs`) {
              this.pcsData_6.push(item)
            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-7-pcs`) {
              this.pcsData_7.push(item)
            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-8-pcs`) {
              this.pcsData_8.push(item)
            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-9-pcs`) {
              this.pcsData_9.push(item)
            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-10-pcs`) {
              this.pcsData_10.push(item)
            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-11-pcs`) {
              this.pcsData_11.push(item)
            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-12-pcs`) {
              this.pcsData_12.push(item)
            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-13-pcs`) {
              this.pcsData_13.push(item)
            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-14-pcs`) {
              this.pcsData_14.push(item)
            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-15-pcs`) {
              this.pcsData_15.push(item)
            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-1-ammeter`) {
              this.ammeter_1.push(item)
            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-2-ammeter`) {
              this.ammeter_2.push(item)
            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-3-ammeter`) {
              this.ammeter_3.push(item)
            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-4-ammeter`) {
              this.ammeter_4.push(item)
            } else if (item.pageLocation === `${this.selectKey}-120Tuopu-1-break`) {
              this.break_1.push(item)
            }
          })
        }
        // this.allData = res.data
      } catch (error) {
        // console.log(error);
      } finally {
        this.loading = false
      }
    },
    getPcsDataValue(item, index) {
      const dataKey = `pcsData_${item}`
      console.log(this[dataKey], dataKey)

      return this[dataKey] && this[dataKey].length > index ? this[dataKey][index].value : ''
    }
  }
}
</script>
<style lang="scss" scoped>
.center-box {
  width: 100%;
  height: 100%;
}
.scale-icon {
  color: #fff;
}
@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);
}
.header-right-box {
  display: flex;
  flex-direction: row;
  align-items: center;

  .header-title {
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0em;
    color: rgba(206, 235, 255, 0.5);
    padding: 0 10px;
    cursor: pointer;
    font-family: HYQY;

    &.active {
      color: #ffffff;
      background: linear-gradient(
        90deg,
        rgba(0, 148, 255, 0) 0%,
        rgba(0, 148, 255, 0.43) 51%,
        rgba(0, 148, 255, 0) 99%
      );
    }
  }
}
.el-dropdown-link {
    cursor: pointer;
     color: #ffffff;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0em;
    color: #ffffff;
    padding: 0 10px;
    cursor: pointer;
    font-family: HYQY;
    // background: linear-gradient(
    //     90deg,
    //     rgba(0, 148, 255, 0) 0%,
    //     rgba(0, 148, 255, 0.43) 51%,
    //     rgba(0, 148, 255, 0) 99%
    //   );
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
