<template>
  <div
    v-loading="loading"
    class="l-flex--col u-overflow-y--auto"
  >
    <template v-if="!loading">
      <warning
        v-if="error"
        @click="getGateway"
      />
      <template v-else>
        <div class="c-sibling-item--v c-info">
          <div class="l-flex--row has-bottom-padding u-bold">网关信息</div>
          <div class="l-flex--row c-info__block">
            <div class="l-flex--row l-flex__fill c-info__item">
              <div class="l-flex__none c-info__title">名称</div>
              <auto-text
                class="l-flex__fill c-info__value"
                :text="gateway.name"
              />
            </div>
            <div class="l-flex--row l-flex__fill c-info__item">
              <div class="l-flex__none c-info__title">地址</div>
              <div class="l-flex__fill c-info__value">{{ gateway.ip }}</div>
            </div>
          </div>
        </div>
        <div class="c-sibling-item--v far c-info">
          <div class="l-flex--row has-bottom-padding u-bold">PLC信息</div>
          <div
            v-if="plcs.length === 0"
            class="u-color--info"
          >
            暂未绑定
          </div>
          <div
            v-for="plc in plcs"
            :key="plc.id"
            class="l-flex--row c-info__block"
          >
            <div class="l-flex--row l-flex__fill c-info__item">
              <auto-text
                class="l-flex__fill c-info__value"
                :text="plc.thirdPartyDevice.name"
              />
            </div>
            <div class="l-flex--row l-flex__fill c-info__item">
              <div class="l-flex__none c-info__title">地址</div>
              <div class="l-flex__fill c-info__value">{{ plc.thirdPartyDevice.identifier }}</div>
            </div>
          </div>
        </div>
      </template>
    </template>
  </div>
</template>

<script>
import {
  getGateway,
  getBoundPLCs
} from '@/api/external'

export default {
  name: 'DeviceGateway',
  props: {
    device: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      loading: false,
      error: false,
      info: null
    }
  },
  computed: {
    gateway () {
      return this.info?.gateway?.thirdPartyDevice
    },
    plcs () {
      return this.info?.plcs || []
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    getInfo (type) {
      if (this.loading) {
        return
      }
      this.loading = true
      this.error = false

      let arr
      if (this.info && type) {
        switch (type) {
          case 'PLC':
            arr = [Promise.resolve(this.info.gateway), this.getBoundPLCs()]
            break
          default:
            arr = [this.getGateway(), Promise.resolve(this.info.plcs)]
            break
        }
      } else {
        arr = [this.getGateway(), this.getBoundPLCs()]
      }

      this.info = null
      Promise.all(arr).then(
        data => {
          this.info = {
            gateway: data[0],
            plcs: data[1]
          }
        },
        () => {
          this.error = false
        }
      ).finally(() => {
        this.loading = false
      })
    },
    getGateway () {
      return getGateway(this.device.id)
    },
    getBoundPLCs () {
      return getBoundPLCs(this.device.id)
    }
  }
}
</script>
