<template>
  <div class="text-layout">
    <h1 class="page-title">
      Wi-Fi 配置
    </h1>
    <el-divider></el-divider>

    <h2 class="mb-4 text-xl font-bold tracking-tight md:text-2xl lg:text-3xl">连接Wi-Fi</h2>
    <el-form label-width="auto" ref="formRef" :model="ssidValidateForm" class="m-auto">
      <el-form-item
          label="Wi-Fi名"
          prop="wifiSsid"
          :rules="[
        { required: true, message: '请输入WIFI名'},
      ]"
      >
        <div class="flex w-full">
          <el-autocomplete
              v-model="ssidValidateForm.wifiSsid"
              clearable
              :placeholder="wifiListPlaceholder"
              class="inline-input w-full"
              :fetch-suggestions="querySearch"
              value-key="ssid"
          >
            <template #default="{ item }">
              <div class="flex items-center border-b">
                <InlineSvg :name="item.wifiLogo" class="h-6 pr-4"></InlineSvg>
                <!--                <span class="w-10">{{ item.rssi }}</span>-->
                <div>{{ item.ssid }}</div>
              </div>
            </template>
          </el-autocomplete>
          <div class="h-8">
            <el-button class="h-8" @click="onScanClick">{{ scanText }}</el-button>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="密码">
        <el-input
            v-model="ssidValidateForm.password"
            show-password
            type="password"
            clearable
        />
      </el-form-item>
      <div class="mb-2">
        <el-alert type="info" show-icon>
          如果不是通过透传器的热点连接，更换Wi-Fi将导致此界面与透传器断开连接。
        </el-alert>
      </div>
      <div class="flex justify-center">
        <el-button @click="onConnectClick" type="primary">连接</el-button>
      </div>
    </el-form>

    <el-divider></el-divider>


    <el-descriptions
        title="Wi-Fi终端信息"
        :column="1"
        border
        class="description-style"
    >
      <el-descriptions-item label="asd">
        <template #label >
          <div>
            信号强度
          </div>
        </template>
        <template #default >
          {{ wifiStaApInfo.rssi }}
        </template>
      </el-descriptions-item>
      <el-descriptions-item span="1">
        <template #label>
          <div>
            SSID
          </div>
        </template>
        {{ wifiStaApInfo.ssid }}
      </el-descriptions-item>
<!--      <el-descriptions-item span="6" >-->
<!--        <template #label>-->
<!--          <div>-->
<!--            密码-->
<!--          </div>-->
<!--        </template>-->
<!--        <password-viewer password="asdasdasd"></password-viewer>-->
<!--      </el-descriptions-item>-->
      <el-descriptions-item span="4">
        <template #label>
          <div>
            IP
          </div>
        </template>
        {{ wifiStaApInfo.ip }}
      </el-descriptions-item>
      <el-descriptions-item span="4">
        <template #label>
          <div>
            MAC
          </div>
        </template>
        {{ wifiStaApInfo.mac }}
      </el-descriptions-item>
      <el-descriptions-item span="4">
        <template #label>
          <div>
            网关
          </div>
        </template>
        {{ wifiStaApInfo.gateway }}
      </el-descriptions-item>

      <el-descriptions-item span="4">
        <template #label>
          <div>
            掩码
          </div>
        </template>
        {{ wifiStaApInfo.netmask }}
      </el-descriptions-item>
    </el-descriptions>

    <el-divider></el-divider>

    <el-descriptions
        title="Wi-Fi热点信息"
        :column="1"
        border
        class="description-style"
    >
      <el-descriptions-item span="6">
        <template #label>
          <div>
            SSID
          </div>
        </template>
        {{ wifiApInfo.ssid }}
      </el-descriptions-item>
<!--      <el-descriptions-item span="6">-->
<!--        <template #label>-->
<!--          <div>-->
<!--            密码-->
<!--          </div>-->
<!--        </template>-->
<!--        <password-viewer password="asdasdasd"></password-viewer>-->
<!--      </el-descriptions-item>-->
      <el-descriptions-item span="4">
        <template #label>
          <div>
            IP
          </div>
        </template>
        {{ wifiApInfo.ip }}
      </el-descriptions-item>

      <el-descriptions-item span="4">
        <template #label>
          <div>
            MAC
          </div>
        </template>
        {{ wifiApInfo.mac }}
      </el-descriptions-item>

      <el-descriptions-item span="4">
        <template #label>
          <div>
            网关
          </div>
        </template>
        {{ wifiApInfo.gateway }}
      </el-descriptions-item>

      <el-descriptions-item span="4">
        <template #label>
          <div>
            掩码
          </div>
        </template>
        {{ wifiApInfo.netmask }}
      </el-descriptions-item>
    </el-descriptions>

    <el-divider></el-divider>
  </div>

</template>

<script setup lang="ts">
import {computed, onMounted, onUnmounted, reactive, ref} from "vue";
import {
  wifi_sta_get_ap_info,
  wifi_get_scan_list,
  WifiCmd,
  type WifiInfo,
  type WifiList,
  wifi_ap_get_info, wifi_connect_to
} from "@/api/apiWifi";
import type {FormInstance} from "element-plus";

import InlineSvg from "@/components/InlineSvg.vue";
import type {ApiJsonMsg, ControlMsg, ServerMsg} from "@/api";
import {ControlEvent, ControlMsgType, WtModuleID} from "@/api";
import {registerModule, unregisterModule} from "@/router/msgRouter";
import {useWsStore} from "@/stores/websocket";
import {globalNotify, globalNotifyRightSide} from "@/composables/notification";

const formRef = ref<FormInstance>()
let wifiListPlaceholder = ref("我的WIFI")
let ssidValidateForm = reactive({
  wifiSsid: "",
  password: "",
})


let wsStore = useWsStore();

const defWifiInfo: WifiInfo = {
  cmd: 1,
  module: 1,
  gateway: "未连接",
  ip: "未连接",
  mac: "未连接",
  rssi: 0,
  netmask: "未连接",
  ssid: "未连接",
}

let wifiStaApInfo = reactive<WifiInfo>({...defWifiInfo});
let wifiApInfo = reactive<WifiInfo>({...defWifiInfo});

let scanning = ref(false);
let scan_cb: any;
let connectBtnClicked = 0;
let options: Array<WifiInfo> = [];
const scanText = computed(() => {
  return scanning.value ? "扫描中" : "扫描";
});

const querySearch = (queryString: string, cb: any) => {
  if (scanning.value) {
    scan_cb = cb;
  } else {
    cb(options);
  }
}

const onClientMsg = (msg: ApiJsonMsg) => {
  switch (msg.cmd as WifiCmd) {
    case WifiCmd.UNKNOWN:
      break;
    case WifiCmd.WIFI_API_JSON_STA_GET_AP_INFO: {
      const info = msg as WifiInfo;
      if (info.rssi === 0) {
        Object.assign(wifiStaApInfo, defWifiInfo);
      } else {
        Object.assign(wifiStaApInfo, info);
      }
      if (connectBtnClicked) {
        connectBtnClicked = 0;
        globalNotifyRightSide(wifiStaApInfo.ssid + " 连接成功", "success");
      }
      break;
    }
    case WifiCmd.WIFI_API_JSON_CONNECT:
      break;
    case WifiCmd.WIFI_API_JSON_GET_SCAN: {
      const list = msg as WifiList;
      scanning.value = false;
      list.scan_list.forEach(value => {
        if (value.rssi > -50) {
          value.wifiLogo = "wifi-3";
        } else if (value.rssi > -65) {
          value.wifiLogo = "wifi-2";
        } else {
          value.wifiLogo = "wifi-1";
        }
      });
      options = list.scan_list;
      if (scan_cb) {
        scan_cb(options);
        scan_cb = null;
      }
      globalNotifyRightSide("扫描完成", "success");
      break;
    }
    case WifiCmd.WIFI_API_JSON_DISCONNECT:
      break;
    case WifiCmd.WIFI_API_JSON_AP_GET_INFO: {
      const info = msg as WifiInfo;
      Object.assign(wifiApInfo, info);
      break;
    }
  }
};

const onClientCtrl = (msg: ControlMsg) => {
  if (msg.type !== ControlMsgType.WS_EVENT) {
    return
  }

  if (msg.data === ControlEvent.DISCONNECTED) {
    Object.assign(wifiStaApInfo, defWifiInfo);
    Object.assign(wifiApInfo, defWifiInfo);
  }

  if (msg.data === ControlEvent.CONNECTED) {
    wifi_sta_get_ap_info();
    wifi_ap_get_info();
  }
};

function onScanClick() {
  if (wsStore.state !== ControlEvent.CONNECTED) {
    globalNotify("调试器未连接", 'error');
    return;
  }
  scanning.value = true;
  wifi_get_scan_list();
}

function onConnectClick() {
  if (wsStore.state !== ControlEvent.CONNECTED) {
    globalNotify("调试器未连接", 'error');
    return;
  }
  if (ssidValidateForm.wifiSsid !== "") {
    wifi_connect_to(ssidValidateForm.wifiSsid, ssidValidateForm.password);
    connectBtnClicked = 1;
  }
}

onMounted(() => {
  registerModule(WtModuleID.WIFI, {
    ctrlCallback: onClientCtrl,
    serverJsonMsgCallback: onClientMsg,
    serverBinMsgCallback: () => {},
  });
  wifi_sta_get_ap_info();
  wifi_ap_get_info();
});

onUnmounted(() => {
  unregisterModule(WtModuleID.WIFI);
});


</script>


<style scoped>
.description-style :deep(.el-descriptions__label) {
  @apply w-32
}
</style>
