import html, { schemaToModel } from "html";
import { ref, reactive } from "vue";
import AppForm from "../components/form/index.js";
import { login } from "../api/user.js";
import { get } from "../request/index.js";
import LayoutLogo from "../layouts/logo.js";
import LayoutLocale from "../layouts/locale.js";
import LayoutFooter from "../layouts/footer.js";

export default {
  components: { AppForm, LayoutLogo, LayoutLocale, LayoutFooter },
  template: html`<el-container>
    <el-main class="flex justify-center">
      <div>
        <div class="flex items-center justify-center">
          <layout-logo />
          <layout-locale />
        </div>
        <el-card class="box-card" style="width:400px;">
          <app-form :schema="schema" v-model="model" :action="action" @submit="submit">{{$t('login')}}</app-form>
        </el-card>
        <layout-footer />
      </div>
    </el-main>
  </el-container>`,
  async setup() {
    const schema = reactive({
      title: "LoginRequestModel",
      type: "object",
      properties: {
        username: {
          title: "用户名",
          type: "string",
          rules: [
            {
              required: true,
              message: "用户名不能为空",
            },
            {
              max: 64,
              message: "用户名的最大长度为 64",
            },
          ],
        },
        password: {
          title: "密码",
          type: "string",
          format: "password",
          rules: [
            {
              required: true,
              message: "密码不能为空",
            },
            {
              max: 64,
              message: "密码的最大长度为 64",
            },
            {
              message: "DataTypeAttribute",
            },
          ],
        },
        client_id: {
          default: "basic-web",
          hidden: true,
        },
        grant_type: {
          default: "password",
          hidden: true,
        },
        scope: {
          default: "WebAppGateway BaseService",
          hidden: true,
        },
      },
    });
    const model = reactive(schemaToModel(schema));
    const submit = async (callback) => {
      const result = await login(model);
      if (result.errors) {
        callback(result.errors);
      }
    };
    return {
      schema,
      model,
      submit,
    };
  },
};