import { useAuth } from "@queenjs-modules/auth";
import ResetForm from "@queenjs-modules/auth/components/components/ResetForm";
import { IconLock } from "@queenjs/icons";
import { Button, Tabs } from "ant-design-vue";
import { queenApi } from "queenjs";
import Modal from "queenjs/adapter/vue/components/modal";
import { defineComponent } from "vue";

const options = ["账户与安全"];

export default defineComponent({
  setup() {
    const auth = useAuth();

    const showModal = () => {
      queenApi.dialog(
        <ResetForm
          onSuccess={() => {
            Modal.clear();
            auth.actions.logout();
          }}
        />,
        {
          width: "400px",
          title: "修改密码",
        }
      );
    };

    return () => (
      <div>
        <h3 class="text-22px">个人资料</h3>
        <Tabs>
          {options.map((d, i) => (
            <Tabs.TabPane key={i} tab={d} />
          ))}
        </Tabs>
        <div>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <div class="flex items-center justify-center w-48px h-48px rounded-4px bg-light-50">
                <IconLock class="text-24px !text-orange" />
              </div>
              <div class="ml-10px">
                <div class="text-14px text-light-50">登录密码</div>
                <div class="mt-10px text-12px opacity-80">
                  建议使用6-16个字符，可包括大小写字母和数字
                </div>
              </div>
            </div>
            <Button type="link" onClick={showModal}>
              修改密码
            </Button>
          </div>
        </div>
      </div>
    );
  },
});
