import { IconLock } from "@queenjs/icons";
import { Button, Tabs } from "ant-design-vue";
import { queenApi } from "queenjs";
import { defineComponent } from "vue";
import ResetPassModal from "./ResetPassModal";

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

export default defineComponent({
  setup() {
    // const modal = useModal();

    const showModal = () => {
      queenApi.dialog(<ResetPassModal />, {
        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>
    );
  },
});