<template>
  <div
    class="l-card-grid"
    :class="{ empty: !cards, mismatched: message }"
    :style="style"
    :message="message"
  >
    <div
      v-for="card in cards"
      :key="card.key"
      class="o-receiving-card"
      :class="card.status"
      :style="card.style"
      :status="card.text"
    >
      <div class="o-receiving-card__status">
        {{ card.tip }}
      </div>
      <i
        v-if="card.dirc"
        class="o-receiving-card__arrow"
        :class="card.dirc"
      />
    </div>
  </div>
</template>

<script>
import { getReceivingCardTopology } from '@/api/external'
import {
  addListener/* ,
  removeListener */
} from '@/views/device/detail/monitor'

export default {
  name: 'ReceivingCardTopology',
  props: {
    info: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      style: null,
      cards: null,
      message: ''
    }
  },
  watch: {
    info: {
      handler () {
        this.setDefaults(this.info?.topology?.screenList)
      },
      immediate: true
    }
  },
  // activated () {
  //   this.check()
  // },
  // deactivated () {
  //   removeListener('topology', this.onUpdate)
  // },
  methods: {
    setDefaults (screenList) {
      let maxRow = 0
      let maxCol = 0
      if (screenList) {
        const cards = []
        const status = this.info.status
        screenList.forEach(({ outCardList }) => {
          outCardList.forEach(({ sendCardList }) => {
            sendCardList.forEach(({ rxcList }) => {
              rxcList && rxcList.sort((a, b) => {
                if (a.port === b.port) {
                  return a.sub - b.sub
                }
                return a.port - b.port
              }).forEach(({ port, sub, row_index, col_index }, index) => {
                maxRow = Math.max(maxRow, row_index)
                maxCol = Math.max(maxCol, col_index)
                let tip = sub === 1 ? 'S' : ''
                let dirc = ''
                const next = rxcList[index + 1]
                if (next) {
                  if (port === next.port) {
                    if (row_index > next.row_index) {
                      dirc = 'top'
                    } else if (row_index < next.row_index) {
                      dirc = 'bottom'
                    } else {
                      dirc = col_index < next.col_index ? 'right' : 'left'
                    }
                  } else {
                    tip = 'E'
                  }
                } else if (!tip) {
                  tip = 'E'
                }
                const card = {
                  key: `${port}-${sub}`,
                  style: {
                    gridRow: row_index,
                    gridColumn: col_index
                  },
                  tip, dirc
                }
                this.setStatus(card, status)
                cards.push(card)
              })
            })
          })
        })
        this.cards = cards
      } else {
        this.cards = null
      }
      this.message = null
      this.$runtime = false
      this.style = {
        gridTemplateRows: `repeat(${maxRow}, 96px)`,
        gridTemplateColumns: `repeat(${maxCol}, 96px)`
      }
      // this.check()
    },
    check () {
      if (!this._inactive && this.cards?.length) {
        addListener('topology', this.onUpdate)
      }
    },
    onUpdate (data) {
      if (data) {
        const map = {}
        data.screenList.forEach(({ outCardList }) => {
          outCardList.forEach(({ sendCardList }) => {
            sendCardList.forEach(({ rxcList }) => {
              rxcList.forEach(({ port, sub }) => {
                map[`${port}-${sub}`] = 1
              })
            })
          })
        })
        this.cards.forEach(card => {
          this.setStatus(card, map[card.key] ? 1 : 0)
        })
        this.message = null
      } else if (!this.$runtime) {
        this.getRuntime()
      }
    },
    getRuntime () {
      getReceivingCardTopology(this.$route.params.id, { custom: true }).then(({ data }) => {
        this.$runtime = true
        this.onUpdate(data)
      })
    },
    setStatus (card, status) {
      card.status = this.online ? ['error', 'online', 'error'][status] : 'unknown'
      card.text = this.online ? ['离线', '在线', '异常'][status] : '未知'
    }
  }
}
</script>

<style lang="scss" scoped>
.l-card-grid {
  display: grid;
  position: relative;
  overflow: auto;

  &.empty {
    background: url("~@/assets/screen.png") 0 0 / 96px 96px repeat;

    &::after {
      content: "未录入";
      display: inline-flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 200px;
      height: 64px;
      color: #fff;
      font-size: 18px;
      letter-spacing: 6px;
      background-color: rgba($info--dark, 0.8);
      transform: translate(-50%, -50%);
    }
  }

  &.mismatched::before {
    content: attr(message);
    position: absolute;
    top: 0;
    left: 0;
    padding: 4px 6px;
    color: #fff;
    font-size: 18px;
    background-color: rgba($info--dark, 0.8);
    z-index: 99;
  }
}

.o-receiving-card {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: $info;
  background: url("~@/assets/screen.png") 0 0 / 100% 100% no-repeat;

  &.online,
  &.error {
    color: $success--dark;
  }

  &::after {
    content: attr(status);
    position: absolute;
    top: 0;
    right: 0;
    min-width: 40px;
    padding: 4px 6px;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    background-color: $info;
    transform-origin: top right;
    transform: scale(0.8);
  }

  &.online::after {
    background-color: $black;
  }

  &.error::after {
    background-color: $error;
  }

  &__status {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    padding-bottom: 4px;
    color: $black;
    font-size: 14px;
    font-weight: bold;
    background: url("~@/assets/icon_card_unknown.png") 0 0 / 100% 100% no-repeat;
  }

  &.online {
    .o-receiving-card__status {
      color: $error;
      background-image: url("~@/assets/icon_card_normal.png");
    }
  }

  &.error {
    .o-receiving-card__status {
      background-image: url("~@/assets/icon_card_abnormal.png");
    }
  }

  &__arrow {
    position: absolute;
    z-index: 1;

    &.left {
      transform: rotate(-90deg);
    }

    &.right {
      transform: rotate(90deg);
    }

    &.bottom {
      transform: rotate(180deg);
    }

    &::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 20px;
      width: 6px;
      height: 46px;
      background-color: currentColor;
      transform: translateX(-50%);
    }

    &::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 66px;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid currentColor;
      transform: translateX(-50%);
    }
  }
}
</style>
