import { css } from "@linaria/core";
import { Button, Form, Input } from "ant-design-vue";
import { defineComponent, reactive } from "vue";
const layout = {
  wrapperCol: { span: 24 },
};
const tailLayout = {
  wrapperCol: { span: 24 },
};

export default defineComponent({
  setup() {
    const state = reactive({
      loading: false,
      loginType: "default",
    });

    const formState = reactive({
      account: "",
      password: "",
    });

    const rules = reactive({
      account: [
        {
          required: true,
          message: "账号不能为空",
          trigger: "change",
        },
      ],
      password: [
        { required: true, message: "密码不能为空", trigger: "change" },
        {
          min: 6,
          max: 18,
          message: "密码长度为6~18位字符",
          trigger: "change",
        },
      ],
    });

    const { validate, validateInfos } = Form.useForm(formState, rules);

    async function submit() {}

    return () => (
      <div class={PageRoot}>
        <div class={"content"}>
          <div class={"logo"}>
            <img src={getImageUrl("logo_admin.png")} />
          </div>
          <div class={"title"}>后台管理系统</div>
          <Form {...layout} name="basic">
            <Form.Item name="phone" {...validateInfos.account}>
              <Input
                placeholder="请输入账号"
                v-model={[formState.account, "value"]}
                maxlength={30}
              />
            </Form.Item>
            <Form.Item name="password" {...validateInfos.password}>
              <Input.Password
                placeholder="请输入密码"
                v-model={[formState.password, "value"]}
                maxlength={18}
              />
            </Form.Item>
            <Form.Item {...tailLayout} style={{ marginBottom: 0 }}>
              <Button
                htmlType="submit"
                block
                type="primary"
                size="large"
                loading={state.loading}
                onClick={submit}
              >
                立即登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    );
  },
});

const PageRoot = css`
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--vt-c-primary) url("@/assets/bg_admin_login.svg") no-repeat
    center/contain;
  .content {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 4px;
  }
  .logo {
    img {
      display: inline;
      height: 50px;
      object-fit: contain;
    }
    text-align: center;
    margin-bottom: 20px;
  }
  .title {
    text-align: center;
    font-size: 18px;
    color: #454847;
    margin-bottom: 20px;
  }
  .login-more {
    text-align: center;
  }
`;
