import { css } from "@linaria/core";
import { queenApi } from "queenjs";
import { defineComponent } from "vue";
import LoginLayout from "../components/LoginLayout";
import LoginTabs from "../components/LoginTabs";
import ResetForm from "../components/ResetForm";

export default defineComponent(() => {
  return () => (
    <LoginLayout>
      <div class={styleRoot}>
        <LoginTabs options={[{ label: "忘记密码", value: "" }]} />
        <ResetForm />
        <a class="backLoginLink" onClick={() => queenApi.router.back()}>
          返回登录
        </a>
      </div>
    </LoginLayout>
  );
});

const styleRoot = css`
  width: 490px;
  padding: 44px;
  background-color: @inf-component-bg;

  .backLoginLink {
    display: flex;
    margin: 0 auto;
    width: 120px;
    align-items: center;
    color: @inf-primary-color;
    svg {
      font-size: 30px;
    }
  }
`;