<script setup lang="tsx">
import { useI18n } from 'vue-i18n'
import { useTheme } from 'vuetify'
import { openExternal } from '@/renderer/utils'
import { useCounterStore } from '@/renderer/store/counter'
import { storeToRefs } from 'pinia'
import { onMounted, ref } from 'vue'
import axios from 'axios'

const { locale, availableLocales } = useI18n()
const { counterIncrease } = useCounterStore()
const { counter } = storeToRefs(useCounterStore())
const theme = useTheme()
const languages = ref(['en'])
const appVersion = ref('Unknown')

const httpServerPort = ref<number | null>(null)

onMounted(() => {
  window.mainApi.send('msgRequestGetServerPort')

  window.mainApi.receive('msgReceivedServerPort', (event, port) => {
    httpServerPort.value = port
    fetchDocServerData()
  })
})

onMounted((): void => {
  languages.value = availableLocales

  // Get application version from package.json version string (Using IPC communication)
  window.mainApi.receive('msgReceivedVersion', (event: Event, version: string) => {
    appVersion.value = version
  })
  window.mainApi.send('msgRequestGetVersion')
})

const docHost = ref<string>('')
const docPort = ref<string>('')
const docServerError = ref<string | null>(null)

const fetchDocServerData = async () => {
  try {
    const response = await axios.get(
      `http://127.0.0.1:${httpServerPort.value}/files/documents/start`
    )
    const [host, port] = docParseResponse(response.data)
    docHost.value = host
    docPort.value = port
    if (!isDocHostValid(docHost.value)) {
      throw new Error('Invalid host received')
    }
  } catch (err) {
    if (err instanceof Error) {
      docServerError.value = err.message
    } else {
      docServerError.value = 'An error occurred while fetching data'
    }
  }
}

const docParseResponse = (responseString: string) => {
  const hostMatch = responseString.match(/host=([^ ]+)/)
  const portMatch = responseString.match(/port=([^ ]+)/)

  const host = hostMatch ? hostMatch[1] : 'Unknown host'
  const port = portMatch ? portMatch[1] : 'Unknown port'

  return [host, port]
}

const isDocHostValid = (host: string) => {
  return host !== 'Unknown host' && host !== ''
}

const openDocLink = (filename: string) => {
  window.open(`http://${docHost.value}:${docPort.value}/documents/${filename}.pdf`, '_blank')
}
</script>

<template>
  <div class="list-page-5">
    <div class="page">
      <div class="card">
        <div class="title">硬件信息</div>
        <div class="table">
          <table>
            <tbody>
              <tr>
                <td class="table-title">设备名称</td>
                <td class="table-title">品牌</td>
                <td class="table-title">说明书</td>
              </tr>
              <tr>
                <td>信号发生器</td>
                <td>普源精电 DG4202 双通道</td>
                <td>
                  <div class="button-zone">
                    <button class="button" @click="openDocLink('信号发生器')">打开</button>
                    <div class="button-hidden">硬件信息栏</div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>直流电源</td>
                <td>普源精电 DP2031 (32V/3A，32V/3A，6V/5A)</td>
                <td>
                  <div class="button-zone">
                    <button class="button" @click="openDocLink('直流电源')">打开</button>
                    <div class="button-hidden">硬件信息栏</div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>万用表</td>
                <td>普源精电 DM3068 (6位半)</td>
                <td>
                  <div class="button-zone">
                    <button class="button" @click="openDocLink('万用表')">打开</button>
                    <div class="button-hidden">硬件信息栏</div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>直流电子负载</td>
                <td>普源精电 DL3021A</td>
                <td>
                  <div class="button-zone">
                    <button class="button" @click="openDocLink('直流电子负载')">打开</button>
                    <div class="button-hidden">硬件信息栏</div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>示波器</td>
                <td>普源精电 DHO1204 (200MHz， 2Gsa/s，4通道)</td>
                <td>
                  <div class="button-zone">
                    <button class="button" @click="openDocLink('示波器')">打开</button>
                    <div class="button-hidden">硬件信息栏</div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>高压放大器</td>
                <td>西安安泰 ATA-2021B</td>
                <td>
                  <div class="button-zone">
                    <button class="button" @click="openDocLink('高压放大器')">打开</button>
                    <div class="button-hidden">硬件信息栏</div>
                  </div>
                </td>
              </tr>
            </tbody>
            <colgroup>
              <col />
              <col />
              <col />
            </colgroup>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.list-page-5 {
  width: 100%;
  height: 100%;

  .page {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .table {
    table {
      border-collapse: collapse;
      width: 100%;
    }

    table,
    th,
    td {
      font-size: 16px;
      padding-left: 15px;
      height: 45px;
      border-bottom: 1px solid #dfdfdf;
    }

    .table-title {
      font-size: 16px;
      font-weight: 500;
    }

    .button-zone {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
    }

    .button,
    .button-hidden {
      width: auto;
      height: auto;
      margin-left: 5px;
      margin-right: 5px;
      padding-top: 3px;
      padding-bottom: 3px;
      padding-left: 8px;
      padding-right: 8px;
      border-radius: 5px;
      border: 1px solid #dfdfdf;
    }

    .button:hover {
      font-weight: 500;
      background-color: #dee2ec;
    }

    .button:active {
      background-color: white;
      border: 1px solid grey;
    }

    .button-hidden {
      border: none;
      color: white;
    }
  }

  .card {
    width: 100%;
    height: 100%;
    background-color: white;
    padding: 50px;
    color: black;
  }

  .card .title {
    font-size: 25px;
    font-weight: 500;
    margin-left: 15px;
    margin-top: 20px;
    margin-bottom: 35px;
  }
}
</style>
