<template>
  <BasicModal
    v-bind="$attrs"
    :title="title"
    @register="registerInnerModal"
    @ok="handleSubmit"
    @cancel="handleCancle"
    :width="800"
    :okText="okText"
    :confirmLoading="confirmLoading"
  >
    <img v-show="imgUrl" style="width: 100%; height: 500px" :src="imgUrl" />
  </BasicModal>
</template>

<script setup lang="ts">
import { BasicModal, useModalInner } from "@/components/Modal";
import { BasicForm, useForm } from "@/components/Form";
import { computed, ref, unref } from "vue";
import url from "../../../assets/images/logo.png";
const postList = ref<Post[]>([]);
defineOptions({ name: "VidiconInfoModal" });

const emit = defineEmits(["register", "reload"]);
const confirmLoading = ref<boolean>(false);
const imgUrl = ref("");
const okText = ref<string>("拍照");
const isUpdate = ref<number>(1);
const title = computed<string>(() => {
  return "拍照";
});

const [registerInnerModal, { modalLoading, closeModal }] = useModalInner(
  async (data: { record?: Recordable; update: number }) => {
    modalLoading(true);
    const { record, update } = data;
    isUpdate.value = update;

    modalLoading(false);
  }
);

async function handleSubmit() {
  confirmLoading.value = true;
  okText.value = "正在请求摄像头,进行照片拍摄";
  imgUrl.value = "";
  setTimeout(() => {
    confirmLoading.value = false;
    okText.value = "拍照";
    imgUrl.value = url;
  }, 500);
}
function handleCancle() {
  closeModal();
  imgUrl.value = "";
}
</script>

<style scoped></style>
