<template>
  <div class="row ">
    节点旁边的图标表示节点状态 在其他加速器上面的状态
    下面的ms代表延迟 延迟的数据来自江苏宿迁检测站点
  </div>
</template>

<style scoped>
.box {
  display: flex;
  justify-content: space-around;
}

.rounded-full {
  border-radius: 9999px;
}
</style>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import { getdata } from 'src/api/api'
import { decode, encode } from 'js-base64';
import { copyToClipboard, useQuasar } from 'quasar';


export default defineComponent({
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Help',
  setup() {
    const $q = useQuasar()
    const api = new getdata;
    const text = ref('');
    const outlink = ref('');
    const def_link = 'ew0KICAidiI6ICIyIiwNCiAgInBzIjogIjAiLA0KICAiYWRkIjogIjE4NS4yMTguNi4xMDgiLA0KICAicG9ydCI6ICI5MDAwIiwNCiAgImlkIjogIjJlZTU3ODA2LWY2ZTQtNDgyYS1lZjA4LTczNjBjMDRjZDNlNSIsDQogICJhaWQiOiAiMCIsDQogICJzY3kiOiAiYXV0byIsDQogICJuZXQiOiAid3MiLA0KICAidHlwZSI6ICJub25lIiwNCiAgImhvc3QiOiAiIiwNCiAgInBhdGgiOiAiLyIsDQogICJ0bHMiOiAiIiwNCiAgInNuaSI6ICIiLA0KICAiYWxwbiI6ICIiDQp9'
    const is_ip = (ip: string) => {
      var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
      return reg.test(ip);
    }

    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    watch(() => text.value, (newValue, oldValue) => { //直接监听
      let obj = JSON.parse(decode(def_link))
      console.log(newValue)
      if (!is_ip(newValue)) {
        outlink.value = 'erroe ip'
        return
      }

      api.get_country(newValue).then(res => {
        let name = res.data.country == '中国' ? res.data.province : res.data.country
        obj.ps = name + newValue
        obj.add = newValue
        outlink.value = 'vmess://' + encode(JSON.stringify(obj))
      })
    })

    return {

      text,
      outlink,
      copy() {
        copyToClipboard(outlink.value)
          .then(() => {
            // success!
            $q.notify({
              message: '复制成功',
              color: 'positive',
              position: 'top'
            })
          })
          .catch(() => {
            // fail
            $q.notify({
              message: '复制失败',
              color: 'negative'
            })
          })
      }

    };
  }
});
</script>
