import { defineComponent } from "vue";
import { useLauncher } from "../..";
import { ApplicationTypes } from "../../objects/Application/types";

export const Viewport = defineComponent({
  setup() {
    const { store, actions } = useLauncher();
    return () => (
      <div>
        <div>
          <span class="mr-10px">当前Host: </span>
          <a onClick={() => actions.updateHost()}>{store.host}</a>
        </div>
        <div class="border-bottom my-10px"></div>
        <div class="space-y-6px">
          {store.apps
            .filter((d) => d.visible)
            .map((d) => {
              return (
                <div class="flex justify-between" key={d.appKey}>
                  <span>{ApplicationTypes[d.appKey].name}</span>
                  <button>{d.disable ? "不可用" : "打开"}</button>
                </div>
              );
            })}
        </div>
      </div>
    );
  },
});
