<template>
  <div class="row">
    <div class="col-12">
      <h6 style="text-align: center;margin: 1rem;">直连<q-icon v-show="online" title="在线" name="check_circle_outline"
          style="color: green;" /> <q-icon v-show="!online" title="离线" name="highlight_off" style="color: red;" /></h6>
      <div v-show="online" style="text-align: center;"><q-icon title="在线" name="signal_cellular_alt"
          :style="{ color: signal_style }" /><span>{{ time }}ms</span></div>
      <q-input v-model="outtext" filled autogrow readonly />
      <div style="text-align: center;margin-top: 1rem;">
        <q-btn color="white" text-color="black" @click="copy_link()" label="复制" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  ref,
  onMounted,
} from 'vue';
import { useQuasar } from 'quasar'
import { getdata } from 'src/api/api'
import { vlessLink } from 'src/config';
import { copy, extractIPv4, getColorForDelay } from 'src/Util/comm';
import { CreateLink } from 'src/Util/Link';
export default defineComponent({
  name: 'LinkItem',
  props: {
    names: {
      type: Array as () => string[],
      required: true
    }
  },
  setup(props) {
    const online = ref(false);
    const api = new getdata;
    const $q = useQuasar()
    const time = ref(0)
    const outtext = ref('')

    const signal_style = computed(() => {
      return getColorForDelay(time.value)
    })

    onMounted(() => {
      for (let index = 0; index < props.names.length; index++) {
        let ip = extractIPv4(props.names[index])
        if (ip == null) { continue }
        let vless = vlessLink

        vless.name = props.names[index]
        vless.host = ip
        vless.port = 9000
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
        vless.params!.path = '/'
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
        vless.params!.security = 'none'
        api.get_server_ms(ip, 9000, '', 0).then((res) => {
          time.value = res.time
          online.value = res.is_online
        })
        outtext.value += CreateLink('vless', vless)
      }
    })
    const copy_link = () => { copy(outtext.value, $q) }
    return { props, online, time, signal_style, outtext, copy_link };
  },
});
</script>
